feat(messaging,announcements): 前端 UI 集成星标/草稿/置顶/已读回执

- 消息星标：MessageList 卡片星标按钮（乐观更新+回滚）、MessageDetail 头部星标切换 - 消息草稿：MessageCompose 自动保存（2s 防抖）+ 手动保存按钮 + 状态指示器 + 发送后清理草稿 - 公告置顶：AnnouncementCard 管理端置顶按钮、AnnouncementDetail 置顶切换、置顶 Badge - 公告已读回执：用户端详情页自动标记已读 + 已读/未读 Badge、管理端已读人数显示 - i18n：新增 announcements.meta.readCount 翻译键
2026-06-23 17:24:26 +08:00
parent f75602d14e
commit 276577b66c
9 changed files with 395 additions and 34 deletions
--- a/src/modules/announcements/components/announcement-card.tsx
+++ b/src/modules/announcements/components/announcement-card.tsx
@@ -1,21 +1,57 @@
 "use client"

+import { useState } from "react"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
 import { useTranslations } from "next-intl"
+import { Pin } from "lucide-react"

 import { Badge } from "@/shared/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
-import { formatDate } from "@/shared/lib/utils"
+import { cn, formatDate } from "@/shared/lib/utils"
+import { toggleAnnouncementPinAction } from "../actions"
 import type { Announcement } from "../types"

 export function AnnouncementCard({
  announcement,
  href,
+  canManage,
 }: {
  announcement: Announcement
  href?: string
+  canManage?: boolean
 }) {
  const t = useTranslations("announcements")
+  const router = useRouter()
+  const [isPinned, setIsPinned] = useState(announcement.isPinned)
+  const [isToggling, setIsToggling] = useState(false)
+
+  const handleTogglePin = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsToggling(true)
+    const prevPinned = isPinned
+    // 乐观更新
+    setIsPinned(!prevPinned)
+    try {
+      const res = await toggleAnnouncementPinAction(announcement.id)
+      if (res.success) {
+        toast.success(t("messages.pinToggled"))
+        router.refresh()
+      } else {
+        // 回滚
+        setIsPinned(prevPinned)
+        toast.error(res.message)
+      }
+    } catch {
+      // 回滚
+      setIsPinned(prevPinned)
+      toast.error(t("messages.publishFailed"))
+    } finally {
+      setIsToggling(false)
+    }
+  }

  const statusVariant: Record<Announcement["status"], "default" | "secondary" | "outline"> = {
    draft: "secondary",
@@ -24,12 +60,37 @@ export function AnnouncementCard({
  }

  const card = (
-    <Card className="h-full transition-colors hover:bg-accent/50">
+    <Card className={cn("h-full transition-colors hover:bg-accent/50", isPinned && "border-primary/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={statusVariant[announcement.status]} className="shrink-0">
-          {t(`status.${announcement.status}`)}
-        </Badge>
+        <CardTitle className="line-clamp-2 text-base">
+          {isPinned ? (
+            <Pin className="text-primary mr-1 inline h-3.5 w-3.5 fill-primary align-text-bottom" aria-hidden="true" />
+          ) : null}
+          {announcement.title}
+        </CardTitle>
+        <div className="flex shrink-0 items-center gap-1">
+          {isPinned ? (
+            <Badge variant="default" className="text-xs">
+              {t("status.pinned")}
+            </Badge>
+          ) : null}
+          <Badge variant={statusVariant[announcement.status]} className="text-xs">
+            {t(`status.${announcement.status}`)}
+          </Badge>
+          {canManage ? (
+            <button
+              type="button"
+              onClick={handleTogglePin}
+              disabled={isToggling}
+              aria-label={isPinned ? t("actions.unpin") : t("actions.pin")}
+              className="text-muted-foreground hover:text-foreground inline-flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent disabled:opacity-50"
+            >
+              <Pin
+                className={cn("h-3.5 w-3.5 transition-colors", isPinned && "fill-primary text-primary")}
+              />
+            </button>
+          ) : null}
+        </div>
      </CardHeader>
      <CardContent className="space-y-2">
        <p className="line-clamp-3 text-sm text-muted-foreground whitespace-pre-wrap">
--- a/src/modules/announcements/components/announcement-detail.tsx
+++ b/src/modules/announcements/components/announcement-detail.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { useState } from "react"
+import { useEffect, useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
@@ -8,8 +8,10 @@ import { useTranslations } from "next-intl"
 import {
  Archive,
  ArrowLeft,
+  CheckCircle2,
  Megaphone,
  Pencil,
+  Pin,
  Send,
  Trash2,
 } from "lucide-react"
@@ -18,12 +20,14 @@ 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 { ConfirmDeleteDialog } from "@/shared/components/ui/confirm-delete-dialog"
-import { formatDate } from "@/shared/lib/utils"
+import { cn, formatDate } from "@/shared/lib/utils"

 import {
  archiveAnnouncementAction,
  deleteAnnouncementAction,
+  markAnnouncementAsReadAction,
  publishAnnouncementAction,
+  toggleAnnouncementPinAction,
 } from "../actions"
 import type { Announcement } from "../types"

@@ -42,6 +46,31 @@ export function AnnouncementDetail({
  const router = useRouter()
  const [isWorking, setIsWorking] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [isPinned, setIsPinned] = useState(announcement.isPinned)
+  const [isTogglingPin, setIsTogglingPin] = useState(false)
+  const [isRead, setIsRead] = useState(announcement.isReadByCurrentUser ?? false)
+
+  // 用户端自动标记已读（非管理端且未读时）
+  useEffect(() => {
+    if (canManage) return
+    if (isRead) return
+
+    let cancelled = false
+    void markAnnouncementAsReadAction(announcement.id)
+      .then((res) => {
+        if (cancelled) return
+        if (res.success) {
+          setIsRead(true)
+        }
+      })
+      .catch(() => {
+        // 静默处理
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [canManage, isRead, announcement.id])

  const handlePublish = async () => {
    setIsWorking(true)
@@ -96,6 +125,30 @@ export function AnnouncementDetail({
    }
  }

+  const handleTogglePin = async () => {
+    setIsTogglingPin(true)
+    const prevPinned = isPinned
+    // 乐观更新
+    setIsPinned(!prevPinned)
+    try {
+      const res = await toggleAnnouncementPinAction(announcement.id)
+      if (res.success) {
+        toast.success(t("messages.pinToggled"))
+        router.refresh()
+      } else {
+        // 回滚
+        setIsPinned(prevPinned)
+        toast.error(res.message)
+      }
+    } catch {
+      // 回滚
+      setIsPinned(prevPinned)
+      toast.error(t("messages.publishFailed"))
+    } finally {
+      setIsTogglingPin(false)
+    }
+  }
+
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-2">
@@ -111,6 +164,10 @@ export function AnnouncementDetail({
        </div>
        {canManage ? (
          <div className="flex flex-wrap items-center gap-2">
+            <Button onClick={handleTogglePin} disabled={isTogglingPin} variant="outline">
+              <Pin className={cn("mr-2 h-4 w-4", isPinned && "fill-current")} />
+              {isPinned ? t("actions.unpin") : t("actions.pin")}
+            </Button>
            {announcement.status !== "published" ? (
              <Button onClick={handlePublish} disabled={isWorking} variant="outline">
                <Send className="mr-2 h-4 w-4" />
@@ -150,8 +207,38 @@ export function AnnouncementDetail({
              {t(`type.${announcement.type}`)}
            </Badge>
            <Badge className="capitalize">{t(`status.${announcement.status}`)}</Badge>
+            {isPinned ? (
+              <Badge variant="default" className="gap-1">
+                <Pin className="h-3 w-3 fill-current" aria-hidden="true" />
+                {t("status.pinned")}
+              </Badge>
+            ) : null}
+            {/* 用户端：显示已读/未读状态 */}
+            {!canManage ? (
+              <Badge variant={isRead ? "secondary" : "default"} className="gap-1">
+                {isRead ? (
+                  <>
+                    <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
+                    {t("status.read")}
+                  </>
+                ) : (
+                  t("status.unread")
+                )}
+              </Badge>
+            ) : null}
+            {/* 管理端：显示已读人数 */}
+            {canManage && announcement.readCount !== undefined ? (
+              <span className="text-xs text-muted-foreground">
+                {t("meta.readCount", { count: announcement.readCount })}
+              </span>
+            ) : null}
          </div>
-          <CardTitle className="text-2xl">{announcement.title}</CardTitle>
+          <CardTitle className="text-2xl">
+            {isPinned ? (
+              <Pin className="text-primary mr-1 inline h-5 w-5 fill-primary align-text-bottom" aria-hidden="true" />
+            ) : null}
+            {announcement.title}
+          </CardTitle>
          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
            <Megaphone className="h-3 w-3" />
            <span>
--- a/src/modules/announcements/components/announcement-list.tsx
+++ b/src/modules/announcements/components/announcement-list.tsx
@@ -116,6 +116,7 @@ export function AnnouncementList({
              key={a.id}
              announcement={a}
              href={buildDetailHref(a.id)}
+              canManage={canManage}
            />
          ))}
        </div>