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/announcements/components/admin-announcements-view.tsx
+++ b/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>
--- a/src/modules/announcements/components/announcement-card.tsx
+++ b/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>
    )
--- a/src/modules/announcements/components/announcement-detail.tsx
+++ b/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>
  )
 }
--- a/src/modules/announcements/components/announcement-form.tsx
+++ b/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>
--- a/src/modules/announcements/components/announcement-list.tsx
+++ b/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"