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

- 消息星标：MessageList 卡片星标按钮（乐观更新+回滚）、MessageDetail 头部星标切换
- 消息草稿：MessageCompose 自动保存（2s 防抖）+ 手动保存按钮 + 状态指示器 + 发送后清理草稿
- 公告置顶：AnnouncementCard 管理端置顶按钮、AnnouncementDetail 置顶切换、置顶 Badge
- 公告已读回执：用户端详情页自动标记已读 + 已读/未读 Badge、管理端已读人数显示
- i18n：新增 announcements.meta.readCount 翻译键

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>