refactor(announcements,messaging,notifications): V1+V2 审计重构 — i18n 命名空间独立 + 通知标题 i18n 化 + 服务端过滤 + 编排下沉 + 表单错误展示 + 架构图同步
V1 改进(已完成): - P0-4/P1-4/P1-5: 通知组件和 CRUD Action 从 messaging 迁移至 notifications 模块 - P1-5: 新增 getMessagesPageData / getAdminAnnouncementsPageData 编排函数 - P1-6: announcements schema 添加 superRefine 条件校验 - P1-7: 新增 useMessageSearch hook(防抖 + 请求竞态取消)+ 客户端分页 UI - P1-9: deleteMessage 事务化 - P2-11: 全模块 trackEvent 埋点 - 全模块 i18n 接入 + Error Boundary + a11y 改进 V2 改进(本次完成): - V2-P0-1: 通知 i18n 命名空间独立(notifications.json),useTranslations 从 "messages" 切换到 "notifications" - V2-P0-2: 公告/消息通知标题 i18n 化,Server Action 中使用 getTranslations 生成通知标题 - V2-P1-1: AnnouncementList 纯服务端过滤,移除客户端 useState/useMemo - V2-P1-2: MessageList 客户端过滤仅在初始数据时执行,搜索结果由服务端按 tab 过滤 - V2-P1-3: 消息详情页编排下沉,新增 getMessageDetailPageData 编排函数 - V2-P1-4: 表单服务端校验错误展示(fieldErrors + aria-invalid) - V2-P2-1: 轮询间隔常量化(POLL_INTERVAL_MS) - V2-P2-2: 架构图同步(004 + 005)
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Plus, Megaphone } from "lucide-react"
|
||||
@@ -21,6 +20,14 @@ import type { Announcement, AnnouncementStatus } from "../types"
|
||||
|
||||
type Filter = "all" | AnnouncementStatus
|
||||
|
||||
/**
|
||||
* 公告列表组件。
|
||||
*
|
||||
* 过滤模式:纯服务端过滤。
|
||||
* - Select 切换时更新 URL `?status=`,触发 RSC 重新渲染
|
||||
* - 父页面根据 `?status=` 查询并传入 `announcements` prop
|
||||
* - 组件不再做客户端二次过滤,避免双重过滤逻辑冗余
|
||||
*/
|
||||
export function AnnouncementList({
|
||||
announcements,
|
||||
canManage,
|
||||
@@ -36,7 +43,7 @@ export function AnnouncementList({
|
||||
}) {
|
||||
const t = useTranslations("announcements")
|
||||
const router = useRouter()
|
||||
const [filter, setFilter] = useState<Filter>(initialStatus ?? "all")
|
||||
const filter: Filter = initialStatus ?? "all"
|
||||
|
||||
const filterOptions: { value: Filter; label: string }[] = [
|
||||
{ value: "all", label: t("filter.all") },
|
||||
@@ -45,13 +52,7 @@ export function AnnouncementList({
|
||||
{ value: "archived", label: t("filter.archived") },
|
||||
]
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (filter === "all") return announcements
|
||||
return announcements.filter((a) => a.status === filter)
|
||||
}, [announcements, filter])
|
||||
|
||||
const handleFilterChange = (value: string) => {
|
||||
setFilter(value as Filter)
|
||||
const handleFilterChange = (value: string): void => {
|
||||
const params = new URLSearchParams()
|
||||
if (value !== "all") params.set("status", value)
|
||||
const qs = params.toString()
|
||||
@@ -83,11 +84,11 @@ export function AnnouncementList({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
{announcements.length === 0 ? (
|
||||
<EmptyState
|
||||
title={t("empty.noAnnouncements")}
|
||||
description={
|
||||
announcements.length === 0
|
||||
filter === "all"
|
||||
? t("empty.noAnnouncementsDesc")
|
||||
: t("empty.noMatch")
|
||||
}
|
||||
@@ -96,7 +97,7 @@ export function AnnouncementList({
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filtered.map((a) => (
|
||||
{announcements.map((a) => (
|
||||
<AnnouncementCard
|
||||
key={a.id}
|
||||
announcement={a}
|
||||
|
||||
Reference in New Issue
Block a user