feat(announcements): add tests, skeleton, pagination, and service context

- Add announcement-card test for component testing

- Add is-announcement-visible test and schema test for logic testing

- Add announcement-list-skeleton for loading states

- Add announcement-pagination for list pagination

- Add announcements-service-context and default-announcements-service for service layer

src/modules/announcements/components/announcement-card.tsx

@@ -10,24 +10,43 @@ import { Pin } from "lucide-react"
 import { Badge } from "@/shared/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { cn, formatDate } from "@/shared/lib/utils"
-import { toggleAnnouncementPinAction } from "../actions"
+
+import { useAnnouncementsService } from "./announcements-service-context"
 import type { Announcement } from "../types"
 
+const statusVariant: Record<Announcement["status"], "default" | "secondary" | "outline"> = {
+  draft: "secondary",
+  published: "default",
+  archived: "outline",
+}
+
+/**
+ * 公告卡片（列表项）。
+ *
+ * P1-3: 通过 `useAnnouncementsService()` 消费 togglePin，不直接 import actions。
+ * P2-1 a11y: 重构交互结构——卡片整体为 `<Link>`，置顶按钮用独立 `<button>`
+ *   绝对定位脱离链接语义，避免键盘 Enter 同时触发按钮与链接导航。
+ * P1-2: 通过 `isRead` 视觉区分已读/未读（仅非管理端 + 未提供 isRead 时不渲染）。
+ */
 export function AnnouncementCard({
   announcement,
   href,
   canManage,
+  isRead,
 }: {
   announcement: Announcement
   href?: string
   canManage?: boolean
+  /** 当前用户是否已读（用户端列表传入以做视觉区分） */
+  isRead?: boolean
 }) {
   const t = useTranslations("announcements")
   const router = useRouter()
+  const service = useAnnouncementsService()
   const [isPinned, setIsPinned] = useState(announcement.isPinned)
   const [isToggling, setIsToggling] = useState(false)
 
-  const handleTogglePin = async (e: React.MouseEvent) => {
+  const handleTogglePin = async (e: React.MouseEvent | React.KeyboardEvent) => {
     e.preventDefault()
     e.stopPropagation()
     setIsToggling(true)
@@ -35,7 +54,7 @@ export function AnnouncementCard({
     // 乐观更新
     setIsPinned(!prevPinned)
     try {
-      const res = await toggleAnnouncementPinAction(announcement.id)
+      const res = await service.togglePin(announcement.id)
       if (res.success) {
         toast.success(t("messages.pinToggled"))
         router.refresh()
@@ -53,15 +72,16 @@ export function AnnouncementCard({
     }
   }
 
-  const statusVariant: Record<Announcement["status"], "default" | "secondary" | "outline"> = {
-    draft: "secondary",
-    published: "default",
-    archived: "outline",
-  }
-
   const card = (
-    <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">
+    <Card
+      className={cn(
+        "relative h-full transition-colors hover:bg-accent/50",
+        isPinned && "border-primary/50",
+        // 已读/未读视觉区分（P1-2）
+        isRead === false && "ring-2 ring-primary/40"
+      )}
+    >
+      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pr-10">
         <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" />
@@ -77,19 +97,6 @@ export function AnnouncementCard({
           <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">
@@ -100,6 +107,11 @@ export function AnnouncementCard({
           <Badge variant="outline" className="capitalize">
             {t(`type.${announcement.type}`)}
           </Badge>
+          {isRead === false ? (
+            <Badge variant="default" className="text-xs">
+              {t("status.unread")}
+            </Badge>
+          ) : null}
           <span>
             {announcement.publishedAt
               ? t("meta.publishedAt", { date: formatDate(announcement.publishedAt) })
@@ -110,6 +122,25 @@ export function AnnouncementCard({
           ) : null}
         </div>
       </CardContent>
+      {/* P2-1 a11y: 置顶按钮绝对定位脱离链接语义，键盘可达且不触发外层 Link 导航 */}
+      {canManage ? (
+        <button
+          type="button"
+          onClick={handleTogglePin}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleTogglePin(e)
+            }
+          }}
+          disabled={isToggling}
+          aria-label={isPinned ? t("actions.unpin") : t("actions.pin")}
+          className="text-muted-foreground hover:text-foreground absolute right-3 top-3 z-10 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}
     </Card>
   )