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 清单 + 已知问题修复记录

src/modules/announcements/components/admin-announcements-view.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { PlusCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 import { Button } from "@/shared/components/ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
@@ -22,6 +23,7 @@ export function AdminAnnouncementsView({
   classes?: { id: string; name: string }[]
   initialStatus?: AnnouncementStatus
 }) {
+  const t = useTranslations("announcements")
   const router = useRouter()
   const [createOpen, setCreateOpen] = useState(false)
 
@@ -34,14 +36,14 @@ export function AdminAnnouncementsView({
     <div className="flex h-full flex-col space-y-8 p-8">
       <div className="flex items-center justify-between space-y-2">
         <div>
-          <h2 className="text-2xl font-bold tracking-tight">Announcements</h2>
+          <h2 className="text-2xl font-bold tracking-tight">{t("title.adminList")}</h2>
           <p className="text-muted-foreground">
-            Create and manage school-wide announcements.
+            {t("description.adminList")}
           </p>
         </div>
         <Button onClick={() => setCreateOpen(true)}>
           <PlusCircle className="mr-2 h-4 w-4" />
-          New Announcement
+          {t("actions.new")}
         </Button>
       </div>
 
@@ -55,7 +57,7 @@ export function AdminAnnouncementsView({
       <Dialog open={createOpen} onOpenChange={handleOpenChange}>
         <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
           <DialogHeader>
-            <DialogTitle>New Announcement</DialogTitle>
+            <DialogTitle>{t("title.create")}</DialogTitle>
           </DialogHeader>
           <AnnouncementForm mode="create" grades={grades} classes={classes} />
         </DialogContent>

src/modules/announcements/components/announcement-card.tsx

@@ -1,32 +1,13 @@
 "use client"
 
 import Link from "next/link"
+import { useTranslations } from "next-intl"
+
 import { Badge } from "@/shared/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { formatDate } from "@/shared/lib/utils"
 import type { Announcement } from "../types"
 
-const STATUS_LABEL: Record<Announcement["status"], string> = {
-  draft: "Draft",
-  published: "Published",
-  archived: "Archived",
-}
-
-const STATUS_VARIANT: Record<
-  Announcement["status"],
-  "default" | "secondary" | "outline"
-> = {
-  draft: "secondary",
-  published: "default",
-  archived: "outline",
-}
-
-const TYPE_LABEL: Record<Announcement["type"], string> = {
-  school: "School",
-  grade: "Grade",
-  class: "Class",
-}
-
 export function AnnouncementCard({
   announcement,
   href,
@@ -34,12 +15,20 @@ export function AnnouncementCard({
   announcement: Announcement
   href?: string
 }) {
+  const t = useTranslations("announcements")
+
+  const statusVariant: Record<Announcement["status"], "default" | "secondary" | "outline"> = {
+    draft: "secondary",
+    published: "default",
+    archived: "outline",
+  }
+
   const card = (
     <Card className="h-full transition-colors hover:bg-accent/50">
       <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
         <CardTitle className="line-clamp-2 text-base">{announcement.title}</CardTitle>
-        <Badge variant={STATUS_VARIANT[announcement.status]} className="shrink-0">
-          {STATUS_LABEL[announcement.status]}
+        <Badge variant={statusVariant[announcement.status]} className="shrink-0">
+          {t(`status.${announcement.status}`)}
         </Badge>
       </CardHeader>
       <CardContent className="space-y-2">
@@ -48,15 +37,15 @@ export function AnnouncementCard({
         </p>
         <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
           <Badge variant="outline" className="capitalize">
-            {TYPE_LABEL[announcement.type]}
+            {t(`type.${announcement.type}`)}
           </Badge>
           <span>
             {announcement.publishedAt
-              ? `Published ${formatDate(announcement.publishedAt)}`
-              : `Updated ${formatDate(announcement.updatedAt)}`}
+              ? t("meta.publishedAt", { date: formatDate(announcement.publishedAt) })
+              : t("meta.updatedAt", { date: formatDate(announcement.updatedAt) })}
           </span>
           {announcement.authorName ? (
-            <span className="ml-auto">by {announcement.authorName}</span>
+            <span className="ml-auto">{t("meta.author", { name: announcement.authorName })}</span>
           ) : null}
         </div>
       </CardContent>
@@ -65,7 +54,7 @@ export function AnnouncementCard({
 
   if (href) {
     return (
-      <Link href={href} className="block h-full">
+      <Link href={href} className="block h-full" aria-label={announcement.title}>
         {card}
       </Link>
     )

src/modules/announcements/components/announcement-detail.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 {
   Archive,
   ArrowLeft,
@@ -16,16 +17,7 @@ import {
 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 {
@@ -35,18 +27,6 @@ import {
 } from "../actions"
 import type { Announcement } from "../types"
 
-const STATUS_LABEL: Record<Announcement["status"], string> = {
-  draft: "Draft",
-  published: "Published",
-  archived: "Archived",
-}
-
-const TYPE_LABEL: Record<Announcement["type"], string> = {
-  school: "School",
-  grade: "Grade",
-  class: "Class",
-}
-
 export function AnnouncementDetail({
   announcement,
   canManage,
@@ -58,6 +38,7 @@ export function AnnouncementDetail({
   editHref?: string
   backHref?: string
 }) {
+  const t = useTranslations("announcements")
   const router = useRouter()
   const [isWorking, setIsWorking] = useState(false)
   const [deleteOpen, setDeleteOpen] = useState(false)
@@ -70,10 +51,10 @@ export function AnnouncementDetail({
         toast.success(res.message)
         router.refresh()
       } else {
-        toast.error(res.message || "Failed to publish")
+        toast.error(res.message || t("messages.publishFailed"))
       }
     } catch {
-      toast.error("Failed to publish")
+      toast.error(t("messages.publishFailed"))
     } finally {
       setIsWorking(false)
     }
@@ -87,10 +68,10 @@ export function AnnouncementDetail({
         toast.success(res.message)
         router.refresh()
       } else {
-        toast.error(res.message || "Failed to archive")
+        toast.error(res.message || t("messages.archiveFailed"))
       }
     } catch {
-      toast.error("Failed to archive")
+      toast.error(t("messages.archiveFailed"))
     } finally {
       setIsWorking(false)
     }
@@ -105,10 +86,10 @@ export function AnnouncementDetail({
         router.push("/admin/announcements")
         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)
@@ -120,33 +101,33 @@ export function AnnouncementDetail({
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           {backHref ? (
-            <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>
           ) : null}
-          <h2 className="text-2xl font-bold tracking-tight">Announcement</h2>
+          <h2 className="text-2xl font-bold tracking-tight">{t("title.detail")}</h2>
         </div>
         {canManage ? (
           <div className="flex flex-wrap items-center gap-2">
             {announcement.status !== "published" ? (
               <Button onClick={handlePublish} disabled={isWorking} variant="outline">
                 <Send className="mr-2 h-4 w-4" />
-                Publish
+                {t("actions.publish")}
               </Button>
             ) : null}
             {announcement.status !== "archived" ? (
               <Button onClick={handleArchive} disabled={isWorking} variant="outline">
                 <Archive className="mr-2 h-4 w-4" />
-                Archive
+                {t("actions.archive")}
               </Button>
             ) : null}
             {editHref ? (
               <Button asChild>
                 <Link href={editHref}>
                   <Pencil className="mr-2 h-4 w-4" />
-                  Edit
+                  {t("actions.edit")}
                 </Link>
               </Button>
             ) : null}
@@ -156,7 +137,7 @@ export function AnnouncementDetail({
               variant="destructive"
             >
               <Trash2 className="mr-2 h-4 w-4" />
-              Delete
+              {t("actions.delete")}
             </Button>
           </div>
         ) : null}
@@ -166,19 +147,19 @@ export function AnnouncementDetail({
         <CardHeader className="space-y-2">
           <div className="flex flex-wrap items-center gap-2">
             <Badge variant="outline" className="capitalize">
-              {TYPE_LABEL[announcement.type]}
+              {t(`type.${announcement.type}`)}
             </Badge>
-            <Badge className="capitalize">{STATUS_LABEL[announcement.status]}</Badge>
+            <Badge className="capitalize">{t(`status.${announcement.status}`)}</Badge>
           </div>
           <CardTitle className="text-2xl">{announcement.title}</CardTitle>
           <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
             <Megaphone className="h-3 w-3" />
             <span>
               {announcement.publishedAt
-                ? `Published ${formatDate(announcement.publishedAt)}`
-                : `Created ${formatDate(announcement.createdAt)}`}
+                ? t("meta.publishedAt", { date: formatDate(announcement.publishedAt) })
+                : t("meta.createdAt", { date: formatDate(announcement.createdAt) })}
             </span>
-            {announcement.authorName ? <span>by {announcement.authorName}</span> : null}
+            {announcement.authorName ? <span>{t("meta.author", { name: announcement.authorName })}</span> : null}
           </div>
         </CardHeader>
         <CardContent>
@@ -186,22 +167,14 @@ export function AnnouncementDetail({
         </CardContent>
       </Card>
 
-      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete announcement</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete &quot;{announcement.title}&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", { title: announcement.title })}
+        onConfirm={handleDelete}
+        isWorking={isWorking}
+      />
     </div>
   )
 }

src/modules/announcements/components/announcement-form.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
+import { useTranslations } from "next-intl"
 
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
@@ -33,6 +34,7 @@ export function AnnouncementForm({
   grades?: { id: string; name: string }[]
   classes?: { id: string; name: string }[]
 }) {
+  const t = useTranslations("announcements")
   const router = useRouter()
   const [isWorking, setIsWorking] = useState(false)
 
@@ -61,7 +63,7 @@ export function AnnouncementForm({
             : null
 
       if (!res) {
-        toast.error("Invalid form state")
+        toast.error(t("messages.invalidState"))
         return
       }
 
@@ -70,10 +72,10 @@ export function AnnouncementForm({
         router.push("/admin/announcements")
         router.refresh()
       } else {
-        toast.error(res.message || "Failed to save announcement")
+        toast.error(res.message || t("messages.updateFailed"))
       }
     } catch {
-      toast.error("Failed to save announcement")
+      toast.error(t("messages.updateFailed"))
     } finally {
       setIsWorking(false)
     }
@@ -83,28 +85,28 @@ export function AnnouncementForm({
     <Card>
       <CardHeader>
         <CardTitle>
-          {mode === "create" ? "New Announcement" : "Edit Announcement"}
+          {mode === "create" ? t("title.create") : t("title.edit")}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <form action={handleSubmit} className="space-y-6">
           <div className="grid gap-2">
-            <Label htmlFor="title">Title</Label>
+            <Label htmlFor="title">{t("form.title")}</Label>
             <Input
               id="title"
               name="title"
-              placeholder="Announcement title"
+              placeholder={t("form.titlePlaceholder")}
               defaultValue={announcement?.title ?? ""}
               required
             />
           </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 the announcement content..."
+              placeholder={t("form.contentPlaceholder")}
               className="min-h-[160px]"
               defaultValue={announcement?.content ?? ""}
               required
@@ -113,30 +115,30 @@ export function AnnouncementForm({
 
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="grid gap-2">
-              <Label>Type</Label>
+              <Label>{t("form.type")}</Label>
               <Select value={type} onValueChange={setType}>
                 <SelectTrigger>
-                  <SelectValue placeholder="Select type" />
+                  <SelectValue placeholder={t("form.typePlaceholder")} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="school">School</SelectItem>
-                  <SelectItem value="grade">Grade</SelectItem>
-                  <SelectItem value="class">Class</SelectItem>
+                  <SelectItem value="school">{t("type.school")}</SelectItem>
+                  <SelectItem value="grade">{t("type.grade")}</SelectItem>
+                  <SelectItem value="class">{t("type.class")}</SelectItem>
                 </SelectContent>
               </Select>
               <input type="hidden" name="type" value={type} />
             </div>
 
             <div className="grid gap-2">
-              <Label>Status</Label>
+              <Label>{t("form.status")}</Label>
               <Select value={status} onValueChange={setStatus}>
                 <SelectTrigger>
-                  <SelectValue placeholder="Select status" />
+                  <SelectValue placeholder={t("form.statusPlaceholder")} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="draft">Draft</SelectItem>
-                  <SelectItem value="published">Published</SelectItem>
-                  <SelectItem value="archived">Archived</SelectItem>
+                  <SelectItem value="draft">{t("status.draft")}</SelectItem>
+                  <SelectItem value="published">{t("status.published")}</SelectItem>
+                  <SelectItem value="archived">{t("status.archived")}</SelectItem>
                 </SelectContent>
               </Select>
               <input type="hidden" name="status" value={status} />
@@ -144,10 +146,10 @@ export function AnnouncementForm({
 
             {type === "grade" ? (
               <div className="grid gap-2 md:col-span-2">
-                <Label>Target Grade</Label>
+                <Label>{t("form.targetGrade")}</Label>
                 <Select value={targetGradeId} onValueChange={setTargetGradeId}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select a grade (optional)" />
+                    <SelectValue placeholder={t("form.targetGradePlaceholder")} />
                   </SelectTrigger>
                   <SelectContent>
                     {grades.map((g) => (
@@ -163,10 +165,10 @@ export function AnnouncementForm({
 
             {type === "class" ? (
               <div className="grid gap-2 md:col-span-2">
-                <Label>Target Class</Label>
+                <Label>{t("form.targetClass")}</Label>
                 <Select value={targetClassId} onValueChange={setTargetClassId}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select a class (optional)" />
+                    <SelectValue placeholder={t("form.targetClassPlaceholder")} />
                   </SelectTrigger>
                   <SelectContent>
                     {classes.map((c) => (
@@ -188,10 +190,10 @@ export function AnnouncementForm({
               onClick={() => router.push("/admin/announcements")}
               disabled={isWorking}
             >
-              Cancel
+              {t("form.cancel")}
             </Button>
             <Button type="submit" disabled={isWorking}>
-              {isWorking ? "Saving..." : mode === "create" ? "Create" : "Save"}
+              {isWorking ? t("form.saving") : mode === "create" ? t("form.create") : t("form.submit")}
             </Button>
           </CardFooter>
         </form>

src/modules/announcements/components/announcement-list.tsx

@@ -3,7 +3,8 @@
 import { useMemo, useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { Plus } from "lucide-react"
+import { Plus, Megaphone } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 import { Button } from "@/shared/components/ui/button"
 import { EmptyState } from "@/shared/components/ui/empty-state"
@@ -14,20 +15,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/shared/components/ui/select"
-import { Megaphone } from "lucide-react"
 
 import { AnnouncementCard } from "./announcement-card"
 import type { Announcement, AnnouncementStatus } from "../types"
 
 type Filter = "all" | AnnouncementStatus
 
-const FILTER_OPTIONS: { value: Filter; label: string }[] = [
-  { value: "all", label: "All" },
-  { value: "published", label: "Published" },
-  { value: "draft", label: "Draft" },
-  { value: "archived", label: "Archived" },
-]
-
 export function AnnouncementList({
   announcements,
   canManage,
@@ -41,9 +34,17 @@ export function AnnouncementList({
   detailHrefBuilder?: (id: string) => string
   initialStatus?: Filter
 }) {
+  const t = useTranslations("announcements")
   const router = useRouter()
   const [filter, setFilter] = useState<Filter>(initialStatus ?? "all")
 
+  const filterOptions: { value: Filter; label: string }[] = [
+    { value: "all", label: t("filter.all") },
+    { value: "published", label: t("filter.published") },
+    { value: "draft", label: t("filter.draft") },
+    { value: "archived", label: t("filter.archived") },
+  ]
+
   const filtered = useMemo(() => {
     if (filter === "all") return announcements
     return announcements.filter((a) => a.status === filter)
@@ -62,10 +63,10 @@ export function AnnouncementList({
       <div className="flex flex-wrap items-center justify-between gap-3">
         <Select value={filter} onValueChange={handleFilterChange}>
           <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Filter by status" />
+            <SelectValue placeholder={t("filter.placeholder")} />
           </SelectTrigger>
           <SelectContent>
-            {FILTER_OPTIONS.map((opt) => (
+            {filterOptions.map((opt) => (
               <SelectItem key={opt.value} value={opt.value}>
                 {opt.label}
               </SelectItem>
@@ -76,7 +77,7 @@ export function AnnouncementList({
           <Button asChild>
             <Link href={createHref}>
               <Plus className="mr-2 h-4 w-4" />
-              New Announcement
+              {t("actions.new")}
             </Link>
           </Button>
         ) : null}
@@ -84,11 +85,11 @@ export function AnnouncementList({
 
       {filtered.length === 0 ? (
         <EmptyState
-          title="No announcements"
+          title={t("empty.noAnnouncements")}
           description={
             announcements.length === 0
-              ? "There are no announcements yet."
-              : "No announcements match the current filter."
+              ? t("empty.noAnnouncementsDesc")
+              : t("empty.noMatch")
           }
           icon={Megaphone}
           className="h-auto border-none shadow-none"

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>

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>
   )
 }

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">

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>

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>