refactor(announcements,messaging,notifications): V1+V2 审计重构 — i18n 命名空间独立 + 通知标题 i18n 化 + 服务端过滤 + 编排下沉 + 表单错误展示 + 架构图同步

V1 改进（已完成）:
- P0-4/P1-4/P1-5: 通知组件和 CRUD Action 从 messaging 迁移至 notifications 模块
- P1-5: 新增 getMessagesPageData / getAdminAnnouncementsPageData 编排函数
- P1-6: announcements schema 添加 superRefine 条件校验
- P1-7: 新增 useMessageSearch hook（防抖 + 请求竞态取消）+ 客户端分页 UI
- P1-9: deleteMessage 事务化
- P2-11: 全模块 trackEvent 埋点
- 全模块 i18n 接入 + Error Boundary + a11y 改进

V2 改进（本次完成）:
- V2-P0-1: 通知 i18n 命名空间独立（notifications.json），useTranslations 从 "messages" 切换到 "notifications"
- V2-P0-2: 公告/消息通知标题 i18n 化，Server Action 中使用 getTranslations 生成通知标题
- V2-P1-1: AnnouncementList 纯服务端过滤，移除客户端 useState/useMemo
- V2-P1-2: MessageList 客户端过滤仅在初始数据时执行，搜索结果由服务端按 tab 过滤
- V2-P1-3: 消息详情页编排下沉，新增 getMessageDetailPageData 编排函数
- V2-P1-4: 表单服务端校验错误展示（fieldErrors + aria-invalid）
- V2-P2-1: 轮询间隔常量化（POLL_INTERVAL_MS）
- V2-P2-2: 架构图同步（004 + 005）

src/modules/messaging/components/message-list.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import Link from "next/link"
-import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2 } from "lucide-react"
+import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2, ChevronLeft, ChevronRight } from "lucide-react"
 import { useTranslations } from "next-intl"
 
 import { Badge } from "@/shared/components/ui/badge"
@@ -16,10 +16,14 @@ import { usePermission } from "@/shared/hooks/use-permission"
 import { Permissions } from "@/shared/types/permissions"
 
 import { getMessagesAction } from "../actions"
+import { useMessageSearch } from "../hooks/use-message-search"
 import type { Message, MessageType } from "../types"
 
 type Tab = "inbox" | "sent"
 
+/** 客户端分页大小 */
+const PAGE_SIZE = 20
+
 export function MessageList({
   messages,
   currentUserId,
@@ -31,54 +35,44 @@ export function MessageList({
 }) {
   const t = useTranslations("messages")
   const [tab, setTab] = useState<Tab>(initialType === "sent" ? "sent" : "inbox")
-  const [keyword, setKeyword] = useState("")
-  const [searchResults, setSearchResults] = useState<{ kw: string; tab: Tab; items: Message[] } | null>(null)
+  const [currentPage, setCurrentPage] = useState(1)
   const { hasPermission } = usePermission()
   const canSend = hasPermission(Permissions.MESSAGE_SEND)
 
-  // 防抖搜索：keyword 或 tab 变化时调用 getMessagesAction
-  useEffect(() => {
-    const kw = keyword.trim()
-    if (kw.length === 0) {
-      return
-    }
-
-    let cancelled = false
-    const timer = setTimeout(async () => {
-      if (cancelled) return
-      const res = await getMessagesAction({ type: tab, keyword: kw })
-      if (cancelled) return
-      if (res.success && res.data) {
-        setSearchResults({ kw, tab, items: res.data.items })
-      }
-    }, 400)
-
-    return () => {
-      cancelled = true
-      clearTimeout(timer)
-    }
-  }, [keyword, tab])
-
-  // 当前搜索结果是否匹配最新的 keyword 和 tab
-  const currentResults = searchResults && searchResults.kw === keyword.trim() && searchResults.tab === tab
-    ? searchResults.items
-    : null
-
-  // 搜索中：keyword 非空且尚无匹配结果
-  const searching = keyword.trim().length > 0 && currentResults === null
-
-  // 当 keyword 为空时使用 prop messages，否则使用搜索结果
-  const displayMessages = currentResults ?? messages
+  const { keyword, setKeyword, results, searching, isUsingInitial } = useMessageSearch({
+    searchAction: getMessagesAction,
+    tab,
+  })
 
+  // 客户端过滤仅在初始数据（type=all）时需要，搜索结果已由服务端按 tab 过滤
   const filtered = useMemo(() => {
+    const displayMessages = isUsingInitial ? messages : (results ?? [])
+    if (!isUsingInitial) return displayMessages
     if (tab === "inbox") return displayMessages.filter((m) => m.receiverId === currentUserId)
     return displayMessages.filter((m) => m.senderId === currentUserId)
-  }, [displayMessages, tab, currentUserId])
+  }, [messages, results, tab, currentUserId, isUsingInitial])
+
+  // 客户端分页：超过 PAGE_SIZE 条时显示分页 UI
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
+  const safePage = Math.min(currentPage, totalPages)
+  const paged = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE)
+  const showPagination = filtered.length > PAGE_SIZE
+
+  // 切换 tab 或搜索时重置分页
+  const handleTabChange = (v: string): void => {
+    setTab(v as Tab)
+    setCurrentPage(1)
+  }
+
+  const handleKeywordChange = (v: string): void => {
+    setKeyword(v)
+    setCurrentPage(1)
+  }
 
   return (
     <div className="space-y-6">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
+        <Tabs value={tab} onValueChange={handleTabChange}>
           <TabsList>
             <TabsTrigger value="inbox" className="gap-2">
               <Inbox className="h-4 w-4" />
@@ -108,7 +102,7 @@ export function MessageList({
           aria-label={t("search.placeholder")}
           placeholder={t("search.placeholder")}
           value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
+          onChange={(e) => handleKeywordChange(e.target.value)}
           className="pl-9"
         />
         {searching ? (
@@ -116,7 +110,7 @@ export function MessageList({
         ) : null}
       </div>
 
-      {filtered.length === 0 ? (
+      {paged.length === 0 ? (
         <EmptyState
           title={tab === "inbox" ? t("empty.inboxEmpty") : t("empty.sentEmpty")}
           description={
@@ -128,45 +122,73 @@ export function MessageList({
           className="h-auto border-none shadow-none"
         />
       ) : (
-        <div className="space-y-3">
-          {filtered.map((m) => {
-            const isReceived = m.receiverId === currentUserId
-            const counterpart = isReceived ? m.senderName : m.receiverName
-            const unread = isReceived && !m.isRead
-            return (
-              <Link key={m.id} href={`/messages/${m.id}`} className="block" aria-label={m.subject ?? t("meta.noSubject")}>
-                <Card className={cn("transition-colors hover:bg-accent/50", unread && "border-primary/40")}>
-                  <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
-                    <div className="space-y-1">
-                      <div className="flex items-center gap-2">
-                        {unread ? (
-                          <Mail className="h-4 w-4 text-primary" aria-hidden="true" />
-                        ) : (
-                          <MailOpen className="text-muted-foreground h-4 w-4" aria-hidden="true" />
-                        )}
-                        <span className={cn("text-sm font-medium", unread && "text-primary")}>
-                          {m.subject ?? t("meta.noSubject")}
-                        </span>
-                        {unread ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
+        <>
+          <div className="space-y-3">
+            {paged.map((m) => {
+              const isReceived = m.receiverId === currentUserId
+              const counterpart = isReceived ? m.senderName : m.receiverName
+              const unread = isReceived && !m.isRead
+              return (
+                <Link key={m.id} href={`/messages/${m.id}`} className="block" aria-label={m.subject ?? t("meta.noSubject")}>
+                  <Card className={cn("transition-colors hover:bg-accent/50", unread && "border-primary/40")}>
+                    <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          {unread ? (
+                            <Mail className="h-4 w-4 text-primary" aria-hidden="true" />
+                          ) : (
+                            <MailOpen className="text-muted-foreground h-4 w-4" aria-hidden="true" />
+                          )}
+                          <span className={cn("text-sm font-medium", unread && "text-primary")}>
+                            {m.subject ?? t("meta.noSubject")}
+                          </span>
+                          {unread ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
+                        </div>
+                        <p className="text-muted-foreground text-xs">
+                          {isReceived ? t("meta.from") : t("meta.to")}: {counterpart ?? t("meta.unknown")}
+                        </p>
                       </div>
-                      <p className="text-muted-foreground text-xs">
-                        {isReceived ? t("meta.from") : t("meta.to")}: {counterpart ?? t("meta.unknown")}
+                      <span className="text-muted-foreground shrink-0 text-xs">
+                        {formatDate(m.createdAt)}
+                      </span>
+                    </CardHeader>
+                    <CardContent className="pt-0">
+                      <p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
+                        {m.content}
                       </p>
-                    </div>
-                    <span className="text-muted-foreground shrink-0 text-xs">
-                      {formatDate(m.createdAt)}
-                    </span>
-                  </CardHeader>
-                  <CardContent className="pt-0">
-                    <p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
-                      {m.content}
-                    </p>
-                  </CardContent>
-                </Card>
-              </Link>
-            )
-          })}
-        </div>
+                    </CardContent>
+                  </Card>
+                </Link>
+              )
+            })}
+          </div>
+
+          {showPagination ? (
+            <div className="flex items-center justify-center gap-4 pt-2" role="navigation" aria-label={t("tabs.inbox")}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={safePage <= 1}
+                aria-label="Previous page"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-muted-foreground text-sm" aria-live="polite">
+                {safePage} / {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={safePage >= totalPages}
+                aria-label="Next page"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : null}
+        </>
       )}
     </div>
   )