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

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

src/modules/messaging/components/message-compose.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
-import { ArrowLeft, Send } from "lucide-react"
+import { ArrowLeft, Check, Loader2, Save, Send } from "lucide-react"
 
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
@@ -20,10 +20,14 @@ import {
   SelectValue,
 } from "@/shared/components/ui/select"
 
-import { sendMessageAction } from "../actions"
+import { deleteMessageDraftAction, saveMessageDraftAction, sendMessageAction } from "../actions"
 import type { RecipientOption } from "../types"
 
 type FieldErrors = Record<string, string[]>
+type SaveStatus = "idle" | "saving" | "saved"
+
+/** 自动保存防抖延迟（毫秒） */
+const AUTOSAVE_DEBOUNCE_MS = 2000
 
 export function MessageCompose({
   recipients,
@@ -42,13 +46,61 @@ export function MessageCompose({
   const router = useRouter()
   const [isWorking, setIsWorking] = useState(false)
   const [receiverId, setReceiverId] = useState(defaultReceiverId ?? "")
+  const [subject, setSubject] = useState(defaultSubject ?? "")
+  const [content, setContent] = useState("")
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({})
+  const [draftId, setDraftId] = useState<string | null>(null)
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle")
+  const draftIdRef = useRef<string | null>(null)
+
+  // Keep draftIdRef in sync so auto-save callback reads the latest value
+  useEffect(() => {
+    draftIdRef.current = draftId
+  }, [draftId])
 
   const getFieldError = (field: string): string | null => {
     const errs = fieldErrors[field]
     return errs && errs.length > 0 ? errs[0] : null
   }
 
+  // 自动保存草稿（防抖 2 秒）
+  useEffect(() => {
+    // 没有内容时不保存
+    if (!subject.trim() && !content.trim()) return
+
+    let cancelled = false
+    const timeout = setTimeout(() => {
+      if (cancelled) return
+      const formData = new FormData()
+      const currentDraftId = draftIdRef.current
+      if (currentDraftId) formData.set("draftId", currentDraftId)
+      if (receiverId) formData.set("receiverId", receiverId)
+      if (subject) formData.set("subject", subject)
+      if (content) formData.set("content", content)
+      if (parentMessageId) formData.set("parentMessageId", parentMessageId)
+
+      setSaveStatus("saving")
+      void saveMessageDraftAction(null, formData)
+        .then((res) => {
+          if (cancelled) return
+          if (res.success && res.data) {
+            setDraftId(res.data)
+            setSaveStatus("saved")
+          } else {
+            setSaveStatus("idle")
+          }
+        })
+        .catch(() => {
+          if (!cancelled) setSaveStatus("idle")
+        })
+    }, AUTOSAVE_DEBOUNCE_MS)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timeout)
+    }
+  }, [subject, content, receiverId, parentMessageId])
+
   const handleSubmit = async (formData: FormData) => {
     if (!receiverId) {
       toast.error(t("form.selectRecipient"))
@@ -64,6 +116,10 @@ export function MessageCompose({
     try {
       const res = await sendMessageAction(null, formData)
       if (res.success) {
+        // 发送成功后删除草稿（如有）
+        if (draftIdRef.current) {
+          void deleteMessageDraftAction(draftIdRef.current)
+        }
         toast.success(res.message)
         router.push("/messages")
         router.refresh()
@@ -81,16 +137,59 @@ export function MessageCompose({
     }
   }
 
+  const handleSaveDraft = async () => {
+    setSaveStatus("saving")
+    const formData = new FormData()
+    if (draftId) formData.set("draftId", draftId)
+    if (receiverId) formData.set("receiverId", receiverId)
+    if (subject) formData.set("subject", subject)
+    if (content) formData.set("content", content)
+    if (parentMessageId) formData.set("parentMessageId", parentMessageId)
+
+    try {
+      const res = await saveMessageDraftAction(null, formData)
+      if (res.success && res.data) {
+        setDraftId(res.data)
+        setSaveStatus("saved")
+        toast.success(t("messages.draftSaved"))
+      } else {
+        setSaveStatus("idle")
+        toast.error(res.message)
+      }
+    } catch {
+      setSaveStatus("idle")
+      toast.error(t("messages.sendFailed"))
+    }
+  }
+
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
-            <Link href={backHref}>
-              <ArrowLeft className="h-4 w-4" />
-            </Link>
-          </Button>
-          <CardTitle>{parentMessageId ? t("title.reply") : t("title.newMessage")}</CardTitle>
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
+              <Link href={backHref}>
+                <ArrowLeft className="h-4 w-4" />
+              </Link>
+            </Button>
+            <CardTitle>{parentMessageId ? t("title.reply") : t("title.newMessage")}</CardTitle>
+          </div>
+          {/* 草稿保存状态指示器 */}
+          {saveStatus !== "idle" ? (
+            <span className="text-muted-foreground flex items-center gap-1 text-xs">
+              {saveStatus === "saving" ? (
+                <>
+                  <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
+                  {t("actions.saveDraft")}...
+                </>
+              ) : (
+                <>
+                  <Check className="h-3 w-3 text-green-500" aria-hidden="true" />
+                  {t("messages.draftSaved")}
+                </>
+              )}
+            </span>
+          ) : null}
         </div>
       </CardHeader>
       <CardContent>
@@ -122,7 +221,8 @@ export function MessageCompose({
               id="subject"
               name="subject"
               placeholder={t("form.subjectPlaceholder")}
-              defaultValue={defaultSubject ?? ""}
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
               maxLength={255}
               aria-invalid={!!getFieldError("subject")}
             />
@@ -138,6 +238,8 @@ export function MessageCompose({
               name="content"
               placeholder={t("form.contentPlaceholder")}
               className="min-h-[200px]"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
               required
               aria-invalid={!!getFieldError("content")}
             />
@@ -150,6 +252,15 @@ export function MessageCompose({
             <Button
               type="button"
               variant="outline"
+              onClick={handleSaveDraft}
+              disabled={isWorking || saveStatus === "saving"}
+            >
+              <Save className="mr-2 h-4 w-4" />
+              {t("actions.saveDraft")}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
               onClick={() => router.push(backHref)}
               disabled={isWorking}
             >