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/app/(dashboard)/announcements/[id]/page.tsx
+++ b/src/app/(dashboard)/announcements/[id]/page.tsx
@@ -5,7 +5,7 @@ import { getTranslations } from "next-intl/server"

 import { requirePermission } from "@/shared/lib/auth-guard"
 import { Permissions } from "@/shared/types/permissions"
-import { getAnnouncementById } from "@/modules/announcements/data-access"
+import { getAnnouncementById, isAnnouncementReadByUser } from "@/modules/announcements/data-access"
 import { AnnouncementDetail } from "@/modules/announcements/components/announcement-detail"

 export const dynamic = "force-dynamic"
@@ -21,15 +21,18 @@ export default async function AnnouncementDetailPage({
  params: Promise<{ id: string }>
 }): Promise<JSX.Element> {
  const { id } = await params
-  await requirePermission(Permissions.ANNOUNCEMENT_READ)
+  const ctx = await requirePermission(Permissions.ANNOUNCEMENT_READ)

  const announcement = await getAnnouncementById(id)
  if (!announcement) notFound()

+  // 获取当前用户的已读状态
+  const isReadByCurrentUser = await isAnnouncementReadByUser(id, ctx.userId)
+
  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <AnnouncementDetail
-        announcement={announcement}
+        announcement={{ ...announcement, isReadByCurrentUser }}
        canManage={false}
        backHref="/announcements"
      />
--- 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>
--- a/src/modules/messaging/components/message-compose.tsx
+++ b/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}
            >
--- a/src/modules/messaging/components/message-detail.tsx
+++ b/src/modules/messaging/components/message-detail.tsx
@@ -5,17 +5,17 @@ import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
-import { ArrowLeft, Mail, Reply, Trash2 } from "lucide-react"
+import { ArrowLeft, Mail, Reply, Star, Trash2 } from "lucide-react"

 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 { usePermission } from "@/shared/hooks/use-permission"
 import { Permissions } from "@/shared/types/permissions"

-import { deleteMessageAction } from "../actions"
+import { deleteMessageAction, toggleMessageStarAction } from "../actions"
 import type { Message } from "../types"

 export function MessageDetail({
@@ -31,6 +31,8 @@ export function MessageDetail({
  const router = useRouter()
  const [isWorking, setIsWorking] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [isStarred, setIsStarred] = useState(message.isStarred)
+  const [isTogglingStar, setIsTogglingStar] = useState(false)
  const { hasPermission } = usePermission()
  const canSend = hasPermission(Permissions.MESSAGE_SEND)
  const canDelete = hasPermission(Permissions.MESSAGE_DELETE)
@@ -58,6 +60,29 @@ export function MessageDetail({
    }
  }

+  const handleToggleStar = async () => {
+    setIsTogglingStar(true)
+    const prevStarred = isStarred
+    // 乐观更新
+    setIsStarred(!prevStarred)
+    try {
+      const res = await toggleMessageStarAction(message.id)
+      if (res.success) {
+        toast.success(t("messages.starToggled"))
+      } else {
+        // 回滚
+        setIsStarred(prevStarred)
+        toast.error(res.message)
+      }
+    } catch {
+      // 回滚
+      setIsStarred(prevStarred)
+      toast.error(t("messages.sendFailed"))
+    } finally {
+      setIsTogglingStar(false)
+    }
+  }
+
  const replyHref = canSend
    ? `/messages/compose?parentId=${message.id}&receiverId=${isReceived ? message.senderId : message.receiverId}&subject=${encodeURIComponent(
        message.subject?.startsWith("Re:") ? message.subject : `Re: ${message.subject ?? ""}`
@@ -76,6 +101,16 @@ export function MessageDetail({
          <h2 className="text-2xl font-bold tracking-tight">{t("title.detail")}</h2>
        </div>
        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            onClick={handleToggleStar}
+            disabled={isTogglingStar}
+            variant={isStarred ? "default" : "outline"}
+          >
+            <Star
+              className={cn("mr-2 h-4 w-4", isStarred && "fill-current")}
+            />
+            {isStarred ? t("actions.unstar") : t("actions.star")}
+          </Button>
          {canSend ? (
            <Button asChild variant="outline">
              <Link href={replyHref ?? "#"}>
@@ -104,6 +139,12 @@ export function MessageDetail({
            ) : (
              <Badge variant="outline">{t("status.sent")}</Badge>
            )}
+            {isStarred ? (
+              <span className="inline-flex items-center gap-1 text-xs text-yellow-600">
+                <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" aria-hidden="true" />
+                {t("actions.star")}
+              </span>
+            ) : null}
          </div>
          <CardTitle className="text-2xl">{message.subject ?? t("meta.noSubject")}</CardTitle>
          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
--- a/src/modules/messaging/components/message-list.tsx
+++ b/src/modules/messaging/components/message-list.tsx
@@ -1,9 +1,10 @@
 "use client"

-import { useMemo, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
 import Link from "next/link"
-import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2, ChevronLeft, ChevronRight } from "lucide-react"
+import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2, ChevronLeft, ChevronRight, Star } from "lucide-react"
 import { useTranslations } from "next-intl"
+import { toast } from "sonner"

 import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
@@ -15,7 +16,7 @@ import { cn, formatDate } from "@/shared/lib/utils"
 import { usePermission } from "@/shared/hooks/use-permission"
 import { Permissions } from "@/shared/types/permissions"

-import { getMessagesAction } from "../actions"
+import { getMessagesAction, toggleMessageStarAction } from "../actions"
 import { useMessageSearch } from "../hooks/use-message-search"
 import type { Message, MessageType } from "../types"

@@ -36,6 +37,8 @@ export function MessageList({
  const t = useTranslations("messages")
  const [tab, setTab] = useState<Tab>(initialType === "sent" ? "sent" : "inbox")
  const [currentPage, setCurrentPage] = useState(1)
+  const [starredOverride, setStarredOverride] = useState<Record<string, boolean>>({})
+  const [togglingStarId, setTogglingStarId] = useState<string | null>(null)
  const { hasPermission } = usePermission()
  const canSend = hasPermission(Permissions.MESSAGE_SEND)

@@ -69,6 +72,38 @@ export function MessageList({
    setCurrentPage(1)
  }

+  const getIsStarred = (m: Message): boolean => {
+    const override = starredOverride[m.id]
+    return override === undefined ? m.isStarred : override
+  }
+
+  const handleToggleStar = useCallback(
+    async (e: React.MouseEvent, messageId: string, currentStarred: boolean): Promise<void> => {
+      e.preventDefault()
+      e.stopPropagation()
+      setTogglingStarId(messageId)
+      // 乐观更新
+      setStarredOverride((prev) => ({ ...prev, [messageId]: !currentStarred }))
+      try {
+        const res = await toggleMessageStarAction(messageId)
+        if (res.success) {
+          toast.success(t("messages.starToggled"))
+        } else {
+          // 回滚
+          setStarredOverride((prev) => ({ ...prev, [messageId]: currentStarred }))
+          toast.error(res.message)
+        }
+      } catch {
+        // 回滚
+        setStarredOverride((prev) => ({ ...prev, [messageId]: currentStarred }))
+        toast.error(t("messages.sendFailed"))
+      } finally {
+        setTogglingStarId(null)
+      }
+    },
+    [t]
+  )
+
  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
@@ -128,6 +163,7 @@ export function MessageList({
              const isReceived = m.receiverId === currentUserId
              const counterpart = isReceived ? m.senderName : m.receiverName
              const unread = isReceived && !m.isRead
+              const isStarred = getIsStarred(m)
              return (
                <Link key={m.id} href={`/messages/${m.id}`} className="block" aria-label={m.subject ?? t("meta.noSubject")}>
                  <Card className={cn("transition-colors hover:bg-accent/50", unread && "border-primary/40")}>
@@ -143,14 +179,33 @@ export function MessageList({
                            {m.subject ?? t("meta.noSubject")}
                          </span>
                          {unread ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
+                          {isStarred ? (
+                            <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" aria-hidden="true" />
+                          ) : null}
                        </div>
                        <p className="text-muted-foreground text-xs">
                          {isReceived ? t("meta.from") : t("meta.to")}: {counterpart ?? t("meta.unknown")}
                        </p>
                      </div>
-                      <span className="text-muted-foreground shrink-0 text-xs">
-                        {formatDate(m.createdAt)}
-                      </span>
+                      <div className="flex shrink-0 items-center gap-1">
+                        <button
+                          type="button"
+                          onClick={(e) => void handleToggleStar(e, m.id, isStarred)}
+                          disabled={togglingStarId === m.id}
+                          aria-label={isStarred ? t("actions.unstar") : t("actions.star")}
+                          className="text-muted-foreground hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors hover:bg-accent disabled:opacity-50"
+                        >
+                          <Star
+                            className={cn(
+                              "h-4 w-4 transition-colors",
+                              isStarred && "fill-yellow-400 text-yellow-400"
+                            )}
+                          />
+                        </button>
+                        <span className="text-muted-foreground text-xs">
+                          {formatDate(m.createdAt)}
+                        </span>
+                      </div>
                    </CardHeader>
                    <CardContent className="pt-0">
                      <p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
--- a/src/shared/i18n/messages/en/announcements.json
+++ b/src/shared/i18n/messages/en/announcements.json
@@ -81,7 +81,8 @@
    "publishedAt": "Published {date}",
    "createdAt": "Created {date}",
    "updatedAt": "Updated {date}",
-    "author": "by {name}"
+    "author": "by {name}",
+    "readCount": "{count} read"
  },
  "empty": {
    "noAnnouncements": "No announcements",
--- a/src/shared/i18n/messages/zh-CN/announcements.json
+++ b/src/shared/i18n/messages/zh-CN/announcements.json
@@ -81,7 +81,8 @@
    "publishedAt": "发布于 {date}",
    "createdAt": "创建于 {date}",
    "updatedAt": "更新于 {date}",
-    "author": "作者：{name}"
+    "author": "作者：{name}",
+    "readCount": "{count} 人已读"
  },
  "empty": {
    "noAnnouncements": "暂无公告",