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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user