1fe30984b6
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）
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
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"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/shared/components/ui/select"
|
|
|
|
import { AnnouncementCard } from "./announcement-card"
|
|
import type { Announcement, AnnouncementStatus } from "../types"
|
|
|
|
type Filter = "all" | AnnouncementStatus
|
|
|
|
/**
|
|
* 公告列表组件。
|
|
*
|
|
* 过滤模式：纯服务端过滤。
|
|
* - Select 切换时更新 URL `?status=`，触发 RSC 重新渲染
|
|
* - 父页面根据 `?status=` 查询并传入 `announcements` prop
|
|
* - 组件不再做客户端二次过滤，避免双重过滤逻辑冗余
|
|
*/
|
|
export function AnnouncementList({
|
|
announcements,
|
|
canManage,
|
|
createHref,
|
|
detailHrefBuilder,
|
|
initialStatus,
|
|
}: {
|
|
announcements: Announcement[]
|
|
canManage?: boolean
|
|
createHref?: string
|
|
detailHrefBuilder?: (id: string) => string
|
|
initialStatus?: Filter
|
|
}) {
|
|
const t = useTranslations("announcements")
|
|
const router = useRouter()
|
|
const filter: 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 handleFilterChange = (value: string): void => {
|
|
const params = new URLSearchParams()
|
|
if (value !== "all") params.set("status", value)
|
|
const qs = params.toString()
|
|
router.replace(qs ? `?${qs}` : "?")
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<Select value={filter} onValueChange={handleFilterChange}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue placeholder={t("filter.placeholder")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{filterOptions.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{canManage && createHref ? (
|
|
<Button asChild>
|
|
<Link href={createHref}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
{t("actions.new")}
|
|
</Link>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
{announcements.length === 0 ? (
|
|
<EmptyState
|
|
title={t("empty.noAnnouncements")}
|
|
description={
|
|
filter === "all"
|
|
? t("empty.noAnnouncementsDesc")
|
|
: t("empty.noMatch")
|
|
}
|
|
icon={Megaphone}
|
|
className="h-auto border-none shadow-none"
|
|
/>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{announcements.map((a) => (
|
|
<AnnouncementCard
|
|
key={a.id}
|
|
announcement={a}
|
|
href={detailHrefBuilder ? detailHrefBuilder(a.id) : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|