feat(announcements,messaging): 公告与消息模块审计重构 — i18n + Error Boundary + a11y

- 新增审计报告 docs/architecture/audit/announcements-messages-audit-report.md - 新增中英双语 i18n 字典 announcements.json / messages.json（11/13 个命名空间） - 重构所有 announcements 和 messaging 组件接入 next-intl（useTranslations） - 所有页面 page.tsx 使用 generateMetadata + getTranslations 替代硬编码 metadata - 新增 7 个 error.tsx 错误边界（4 公告 + 3 消息），统一 EmptyState + i18n + 重试 - a11y 改进：announcement-card / message-list / notification-dropdown 添加 aria-label - 同步架构图 004 和 005：i18n.messages 清单 + 已知问题修复记录
2026-06-22 16:02:07 +08:00
parent 21c1e7a286
commit fde711ce46
30 changed files with 1085 additions and 261 deletions
--- a/src/modules/messaging/components/message-compose.tsx
+++ b/src/modules/messaging/components/message-compose.tsx
@@ -4,6 +4,7 @@ import { useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
+import { useTranslations } from "next-intl"
 import { ArrowLeft, Send } from "lucide-react"

 import { Button } from "@/shared/components/ui/button"
@@ -35,13 +36,14 @@ export function MessageCompose({
  defaultSubject?: string
  backHref?: string
 }) {
+  const t = useTranslations("messages")
  const router = useRouter()
  const [isWorking, setIsWorking] = useState(false)
  const [receiverId, setReceiverId] = useState(defaultReceiverId ?? "")

  const handleSubmit = async (formData: FormData) => {
    if (!receiverId) {
-      toast.error("Please select a recipient")
+      toast.error(t("messages.selectRecipient"))
      return
    }
    formData.set("receiverId", receiverId)
@@ -57,10 +59,10 @@ export function MessageCompose({
        router.push("/messages")
        router.refresh()
      } else {
-        toast.error(res.message || "Failed to send message")
+        toast.error(res.message || t("messages.sendFailed"))
      }
    } catch {
-      toast.error("Failed to send message")
+      toast.error(t("messages.sendFailed"))
    } finally {
      setIsWorking(false)
    }
@@ -70,21 +72,21 @@ export function MessageCompose({
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
-          <Button asChild variant="ghost" size="icon">
+          <Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
            <Link href={backHref}>
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
-          <CardTitle>{parentMessageId ? "Reply" : "New Message"}</CardTitle>
+          <CardTitle>{parentMessageId ? t("title.reply") : t("title.newMessage")}</CardTitle>
        </div>
      </CardHeader>
      <CardContent>
        <form action={handleSubmit} className="space-y-6">
          <div className="grid gap-2">
-            <Label htmlFor="receiverId">To</Label>
+            <Label htmlFor="receiverId">{t("form.to")}</Label>
            <Select value={receiverId} onValueChange={setReceiverId} disabled={!!defaultReceiverId}>
              <SelectTrigger>
-                <SelectValue placeholder="Select a recipient" />
+                <SelectValue placeholder={t("form.toPlaceholder")} />
              </SelectTrigger>
              <SelectContent>
                {recipients.map((r) => (
@@ -99,22 +101,22 @@ export function MessageCompose({
          </div>

          <div className="grid gap-2">
-            <Label htmlFor="subject">Subject</Label>
+            <Label htmlFor="subject">{t("form.subject")}</Label>
            <Input
              id="subject"
              name="subject"
-              placeholder="Message subject"
+              placeholder={t("form.subjectPlaceholder")}
              defaultValue={defaultSubject ?? ""}
              maxLength={255}
            />
          </div>

          <div className="grid gap-2">
-            <Label htmlFor="content">Content</Label>
+            <Label htmlFor="content">{t("form.content")}</Label>
            <Textarea
              id="content"
              name="content"
-              placeholder="Write your message..."
+              placeholder={t("form.contentPlaceholder")}
              className="min-h-[200px]"
              required
            />
@@ -127,15 +129,15 @@ export function MessageCompose({
              onClick={() => router.push(backHref)}
              disabled={isWorking}
            >
-              Cancel
+              {t("actions.cancel")}
            </Button>
            <Button type="submit" disabled={isWorking || !receiverId}>
              {isWorking ? (
-                "Sending..."
+                t("actions.sending")
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
-                  Send
+                  {t("actions.send")}
                </>
              )}
            </Button>
--- a/src/modules/messaging/components/message-detail.tsx
+++ b/src/modules/messaging/components/message-detail.tsx
@@ -4,21 +4,13 @@ import { useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
+import { useTranslations } from "next-intl"
 import { ArrowLeft, Mail, Reply, Trash2 } from "lucide-react"

 import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/shared/components/ui/alert-dialog"
+import { ConfirmDeleteDialog } from "@/shared/components/ui/confirm-delete-dialog"
 import { formatDate } from "@/shared/lib/utils"
 import { usePermission } from "@/shared/hooks/use-permission"
 import { Permissions } from "@/shared/types/permissions"
@@ -35,6 +27,7 @@ export function MessageDetail({
  currentUserId: string
  backHref?: string
 }) {
+  const t = useTranslations("messages")
  const router = useRouter()
  const [isWorking, setIsWorking] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
@@ -44,7 +37,7 @@ export function MessageDetail({

  const isReceived = message.receiverId === currentUserId
  const counterpart = isReceived ? message.senderName : message.receiverName
-  const counterpartLabel = isReceived ? "From" : "To"
+  const counterpartLabel = isReceived ? t("meta.from") : t("meta.to")

  const handleDelete = async () => {
    setIsWorking(true)
@@ -55,10 +48,10 @@ export function MessageDetail({
        router.push("/messages")
        router.refresh()
      } else {
-        toast.error(res.message || "Failed to delete")
+        toast.error(res.message || t("messages.deleteFailed"))
      }
    } catch {
-      toast.error("Failed to delete")
+      toast.error(t("messages.deleteFailed"))
    } finally {
      setIsWorking(false)
      setDeleteOpen(false)
@@ -75,26 +68,26 @@ export function MessageDetail({
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-2">
-          <Button asChild variant="ghost" size="icon">
+          <Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
            <Link href={backHref}>
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
-          <h2 className="text-2xl font-bold tracking-tight">Message</h2>
+          <h2 className="text-2xl font-bold tracking-tight">{t("title.detail")}</h2>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {canSend ? (
            <Button asChild variant="outline">
              <Link href={replyHref ?? "#"}>
                <Reply className="mr-2 h-4 w-4" />
-                Reply
+                {t("actions.reply")}
              </Link>
            </Button>
          ) : null}
          {canDelete ? (
            <Button onClick={() => setDeleteOpen(true)} disabled={isWorking} variant="destructive">
              <Trash2 className="mr-2 h-4 w-4" />
-              Delete
+              {t("actions.delete")}
            </Button>
          ) : null}
        </div>
@@ -103,26 +96,26 @@ export function MessageDetail({
      <Card>
        <CardHeader className="space-y-2">
          <div className="flex flex-wrap items-center gap-2">
-            <Mail className="text-muted-foreground h-4 w-4" />
+            <Mail className="text-muted-foreground h-4 w-4" aria-hidden="true" />
            {isReceived && !message.isRead ? (
-              <Badge variant="default">New</Badge>
+              <Badge variant="default">{t("status.new")}</Badge>
            ) : isReceived ? (
-              <Badge variant="secondary">Read</Badge>
+              <Badge variant="secondary">{t("status.read")}</Badge>
            ) : (
-              <Badge variant="outline">Sent</Badge>
+              <Badge variant="outline">{t("status.sent")}</Badge>
            )}
          </div>
-          <CardTitle className="text-2xl">{message.subject ?? "(no subject)"}</CardTitle>
+          <CardTitle className="text-2xl">{message.subject ?? t("meta.noSubject")}</CardTitle>
          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
            <span>
-              {counterpartLabel}: <span className="font-medium">{counterpart ?? "Unknown"}</span>
+              {counterpartLabel}: <span className="font-medium">{counterpart ?? t("meta.unknown")}</span>
            </span>
            <span>·</span>
            <span>{formatDate(message.createdAt)}</span>
            {message.readAt && isReceived ? (
              <>
                <span>·</span>
-                <span>Read {formatDate(message.readAt)}</span>
+                <span>{t("meta.readAt", { date: formatDate(message.readAt) })}</span>
              </>
            ) : null}
          </div>
@@ -132,22 +125,14 @@ export function MessageDetail({
        </CardContent>
      </Card>

-      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete message</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete the message &quot;{message.subject ?? "(no subject)"}&quot;.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} disabled={isWorking}>
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDeleteDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title={t("empty.deleteTitle")}
+        description={t("empty.deleteDesc", { subject: message.subject ?? t("meta.noSubject") })}
+        onConfirm={handleDelete}
+        isWorking={isWorking}
+      />
    </div>
  )
 }
--- a/src/modules/messaging/components/message-list.tsx
+++ b/src/modules/messaging/components/message-list.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from "react"
 import Link from "next/link"
 import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2 } from "lucide-react"
+import { useTranslations } from "next-intl"

 import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
@@ -28,6 +29,7 @@ export function MessageList({
  currentUserId: string
  initialType?: MessageType
 }) {
+  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)
@@ -80,11 +82,11 @@ export function MessageList({
          <TabsList>
            <TabsTrigger value="inbox" className="gap-2">
              <Inbox className="h-4 w-4" />
-              Inbox
+              {t("tabs.inbox")}
            </TabsTrigger>
            <TabsTrigger value="sent" className="gap-2">
              <Send className="h-4 w-4" />
-              Sent
+              {t("tabs.sent")}
            </TabsTrigger>
          </TabsList>
        </Tabs>
@@ -92,7 +94,7 @@ export function MessageList({
          <Button asChild>
            <Link href="/messages/compose">
              <Plus className="mr-2 h-4 w-4" />
-              Compose
+              {t("actions.compose")}
            </Link>
          </Button>
        ) : null}
@@ -100,26 +102,27 @@ export function MessageList({

      {/* 搜索框 */}
      <div className="relative">
-        <Search className="text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2" />
+        <Search className="text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2" aria-hidden="true" />
        <Input
          type="search"
-          placeholder="Search messages by subject or content..."
+          aria-label={t("search.placeholder")}
+          placeholder={t("search.placeholder")}
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)}
          className="pl-9"
        />
        {searching ? (
-          <Loader2 className="text-muted-foreground absolute right-3 top-1/2 size-4 -translate-y-1/2 animate-spin" />
+          <Loader2 className="text-muted-foreground absolute right-3 top-1/2 size-4 -translate-y-1/2 animate-spin" aria-hidden="true" />
        ) : null}
      </div>

      {filtered.length === 0 ? (
        <EmptyState
-          title={tab === "inbox" ? "Inbox is empty" : "No sent messages"}
+          title={tab === "inbox" ? t("empty.inboxEmpty") : t("empty.sentEmpty")}
          description={
            tab === "inbox"
-              ? "You have no incoming messages yet."
-              : "You have not sent any messages yet."
+              ? t("empty.inboxEmptyDesc")
+              : t("empty.sentEmptyDesc")
          }
          icon={Mail}
          className="h-auto border-none shadow-none"
@@ -131,23 +134,23 @@ export function MessageList({
            const counterpart = isReceived ? m.senderName : m.receiverName
            const unread = isReceived && !m.isRead
            return (
-              <Link key={m.id} href={`/messages/${m.id}`} className="block">
+              <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" />
+                          <Mail className="h-4 w-4 text-primary" aria-hidden="true" />
                        ) : (
-                          <MailOpen className="text-muted-foreground h-4 w-4" />
+                          <MailOpen className="text-muted-foreground h-4 w-4" aria-hidden="true" />
                        )}
                        <span className={cn("text-sm font-medium", unread && "text-primary")}>
-                          {m.subject ?? "(no subject)"}
+                          {m.subject ?? t("meta.noSubject")}
                        </span>
-                        {unread ? <Badge variant="default" className="text-xs">New</Badge> : null}
+                        {unread ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
                      </div>
                      <p className="text-muted-foreground text-xs">
-                        {isReceived ? "From" : "To"}: {counterpart ?? "Unknown"}
+                        {isReceived ? t("meta.from") : t("meta.to")}: {counterpart ?? t("meta.unknown")}
                      </p>
                    </div>
                    <span className="text-muted-foreground shrink-0 text-xs">
--- a/src/modules/messaging/components/notification-dropdown.tsx
+++ b/src/modules/messaging/components/notification-dropdown.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
+import { useTranslations } from "next-intl"
 import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"

 import { Badge } from "@/shared/components/ui/badge"
@@ -34,6 +35,7 @@ const TYPE_ICON: Record<NotificationType, typeof Bell> = {
 }

 export function NotificationDropdown() {
+  const t = useTranslations("messages")
  const router = useRouter()
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [unreadCount, setUnreadCount] = useState(0)
@@ -96,8 +98,8 @@ export function NotificationDropdown() {
  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="relative text-muted-foreground">
-          <Bell className="size-5" />
+        <Button variant="ghost" size="icon" className="relative text-muted-foreground" aria-label={t("title.notifications")}>
+          <Bell className="size-5" aria-hidden="true" />
          {unreadCount > 0 ? (
            <Badge
              variant="destructive"
@@ -106,20 +108,20 @@ export function NotificationDropdown() {
              {unreadCount > 9 ? "9+" : unreadCount}
            </Badge>
          ) : null}
-          <span className="sr-only">Notifications</span>
+          <span className="sr-only">{t("title.notifications")}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-80 p-0">
        <DropdownMenuLabel className="flex items-center justify-between">
-          <span>Notifications</span>
+          <span>{t("title.notifications")}</span>
          {unreadCount > 0 ? (
            <button
              type="button"
              onClick={handleMarkAllRead}
              className="text-primary text-xs hover:underline"
            >
-              <CheckCheck className="mr-1 inline h-3 w-3" />
-              Mark all read
+              <CheckCheck className="mr-1 inline h-3 w-3" aria-hidden="true" />
+              {t("actions.markAllRead")}
            </button>
          ) : null}
        </DropdownMenuLabel>
@@ -127,7 +129,7 @@ export function NotificationDropdown() {
        <ScrollArea className="max-h-[320px]">
          {notifications.length === 0 ? (
            <div className="text-muted-foreground px-4 py-8 text-center text-sm">
-              No notifications
+              {t("empty.noNotificationsDropdown")}
            </div>
          ) : (
            notifications.map((n) => {
@@ -144,12 +146,12 @@ export function NotificationDropdown() {
                  }}
                >
                  <div className="bg-muted mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full">
-                    <Icon className="h-3.5 w-3.5" />
+                    <Icon className="h-3.5 w-3.5" aria-hidden="true" />
                  </div>
                  <div className="min-w-0 flex-1 space-y-0.5">
                    <div className="flex items-center gap-1.5">
                      {!n.isRead ? (
-                        <span className="bg-primary size-1.5 shrink-0 rounded-full" />
+                        <span className="bg-primary size-1.5 shrink-0 rounded-full" aria-hidden="true" />
                      ) : null}
                      <span className={cn("text-xs", !n.isRead ? "font-semibold" : "font-medium")}>
                        {n.title}
@@ -170,7 +172,7 @@ export function NotificationDropdown() {
        <DropdownMenuSeparator className="mt-0" />
        <DropdownMenuItem asChild>
          <Link href="/messages" className="text-primary justify-center text-xs">
-            View all notifications
+            {t("actions.viewAll")}
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
--- a/src/modules/messaging/components/notification-list.tsx
+++ b/src/modules/messaging/components/notification-list.tsx
@@ -4,6 +4,7 @@ import { useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
+import { useTranslations } from "next-intl"
 import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"

 import { Badge } from "@/shared/components/ui/badge"
@@ -22,14 +23,8 @@ const TYPE_ICON: Record<NotificationType, typeof Bell> = {
  grade: GraduationCap,
 }

-const TYPE_LABEL: Record<NotificationType, string> = {
-  message: "Message",
-  announcement: "Announcement",
-  homework: "Homework",
-  grade: "Grade",
-}
-
 export function NotificationList({ notifications }: { notifications: Notification[] }) {
+  const t = useTranslations("messages")
  const router = useRouter()
  const [isWorking, setIsWorking] = useState(false)
  const hasUnread = notifications.some((n) => !n.isRead)
@@ -42,10 +37,10 @@ export function NotificationList({ notifications }: { notifications: Notificatio
        toast.success(res.message)
        router.refresh()
      } else {
-        toast.error(res.message || "Failed to mark all as read")
+        toast.error(res.message || t("messages.markReadFailed"))
      }
    } catch {
-      toast.error("Failed to mark all as read")
+      toast.error(t("messages.markReadFailed"))
    } finally {
      setIsWorking(false)
    }
@@ -58,7 +53,7 @@ export function NotificationList({ notifications }: { notifications: Notificatio
        router.refresh()
      }
    } catch {
-      toast.error("Failed to mark as read")
+      toast.error(t("messages.markReadFailed"))
    }
  }

@@ -66,21 +61,21 @@ export function NotificationList({ notifications }: { notifications: Notificatio
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Notifications</h2>
-          <p className="text-muted-foreground text-sm">Stay updated on your latest activities.</p>
+          <h2 className="text-2xl font-bold tracking-tight">{t("title.notifications")}</h2>
+          <p className="text-muted-foreground text-sm">{t("description.notifications")}</p>
        </div>
        {hasUnread ? (
          <Button onClick={handleMarkAllRead} disabled={isWorking} variant="outline">
            <CheckCheck className="mr-2 h-4 w-4" />
-            Mark all as read
+            {t("actions.markAllRead")}
          </Button>
        ) : null}
      </div>

      {notifications.length === 0 ? (
        <EmptyState
-          title="No notifications"
-          description="You have no notifications yet."
+          title={t("empty.noNotifications")}
+          description={t("empty.noNotificationsDesc")}
          icon={Bell}
          className="h-auto border-none shadow-none"
        />
@@ -95,14 +90,14 @@ export function NotificationList({ notifications }: { notifications: Notificatio
              >
                <CardContent className="flex items-start gap-3 py-4">
                  <div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-full">
-                    <Icon className="h-4 w-4" />
+                    <Icon className="h-4 w-4" aria-hidden="true" />
                  </div>
                  <div className="min-w-0 flex-1 space-y-1">
                    <div className="flex items-center gap-2">
                      <span className={cn("text-sm", !n.isRead ? "font-semibold" : "font-medium")}>
                        {n.title}
                      </span>
-                      {!n.isRead ? <Badge variant="default" className="text-xs">New</Badge> : null}
+                      {!n.isRead ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
                    </div>
                    {n.content ? (
                      <p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
@@ -111,7 +106,7 @@ export function NotificationList({ notifications }: { notifications: Notificatio
                    ) : null}
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Badge variant="outline" className="text-xs">
-                        {TYPE_LABEL[n.type]}
+                        {t(`notificationType.${n.type}`)}
                      </Badge>
                      <span>{formatDate(n.createdAt)}</span>
                      {!n.isRead ? (
@@ -119,13 +114,14 @@ export function NotificationList({ notifications }: { notifications: Notificatio
                          type="button"
                          onClick={() => handleMarkRead(n.id)}
                          className="text-primary hover:underline"
+                          aria-label={t("actions.markRead")}
                        >
-                          Mark as read
+                          {t("actions.markRead")}
                        </button>
                      ) : null}
                      {n.link ? (
                        <Link href={n.link} className="ml-auto text-primary hover:underline">
-                          View
+                          {t("actions.view")}
                        </Link>
                      ) : null}
                    </div>