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 清单 + 已知问题修复记录
This commit is contained in:
SpecialX
2026-06-22 16:02:07 +08:00
parent 21c1e7a286
commit fde711ce46
30 changed files with 1085 additions and 261 deletions

View File

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