feat: 公文三栏单页布局，并修复时间线目录跳转与样式

公告/单页对齐帖子详情三栏壳；时间线按日锚点可跳转，条目改为日志行并用暖金日期区分 feat 色。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/announcements/page.tsx

@@ -1,9 +1,16 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Megaphone } from "lucide-react";
-import { fetchAnnouncementsPage, type Announcement } from "@/lib/api";
+import { fetchAnnouncementsPage, fetchOverview, type Announcement } from "@/lib/api";
+import { getPublicSettingsCached } from "@/lib/serverData";
 import { formatDate } from "@/lib/format";
 import Pagination from "@/components/Pagination";
+import {
+  SiteDocShell,
+  SiteDocIdentity,
+  SiteDocPageNav,
+  SiteDocBreadcrumb,
+} from "@/components/site-doc";
 
 export const metadata: Metadata = {
   title: "站点公告",
@@ -26,12 +33,48 @@ function plainSummary(md: string, max = 120): string {
   return text.length > max ? `${text.slice(0, max)}…` : text;
 }
 
-function AnnouncementCard({ a }: { a: Announcement }) {
+function FeaturedAnnouncement({ a }: { a: Announcement }) {
+  const summary = plainSummary(a.content, 180);
+  return (
+    <Link
+      href={`/announcement/${a.id}`}
+      className="block px-5 sm:px-6 pt-5 sm:pt-6 pb-5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
+    >
+      <div className="flex items-center gap-2 flex-wrap mb-3">
+        <span
+          className="inline-flex items-center rounded-full px-2.5 py-0.5 text-[11.5px] font-semibold tracking-wide"
+          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+        >
+          置顶公告
+        </span>
+        {a.pinned ? <span className="badge-pin">置顶</span> : null}
+        <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
+        <time className="meta text-[12px] tabular-nums ml-auto" dateTime={a.created_at}>
+          {formatDate(a.created_at)}
+        </time>
+      </div>
+      <h2
+        className="text-[22px] sm:text-[26px] font-extrabold leading-snug tracking-tight"
+        style={{ color: "var(--ink)" }}
+      >
+        {a.title}
+      </h2>
+      {summary ? (
+        <p className="mt-3 text-[14.5px] leading-relaxed line-clamp-3" style={{ color: "var(--ink-2)" }}>
+          {summary}
+        </p>
+      ) : null}
+    </Link>
+  );
+}
+
+function AnnouncementRow({ a, showDivider }: { a: Announcement; showDivider: boolean }) {
   const summary = plainSummary(a.content);
   return (
     <Link
       href={`/announcement/${a.id}`}
-      className="panel block p-5 sm:p-6 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
+      className="block px-5 sm:px-6 py-4 sm:py-5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
+      style={showDivider ? { borderTop: "1px solid var(--line)" } : undefined}
     >
       <div className="flex items-center gap-2 flex-wrap">
         {a.pinned ? <span className="badge-pin">置顶</span> : null}
@@ -41,13 +84,13 @@ function AnnouncementCard({ a }: { a: Announcement }) {
         </time>
       </div>
       <h2
-        className="mt-2.5 text-[17px] sm:text-[18px] font-semibold leading-snug tracking-tight"
+        className="mt-2 text-[16px] sm:text-[17px] font-semibold leading-snug tracking-tight"
         style={{ color: "var(--ink)" }}
       >
         {a.title}
       </h2>
       {summary ? (
-        <p className="mt-2 text-[13.5px] leading-relaxed line-clamp-2" style={{ color: "var(--ink-2)" }}>
+        <p className="mt-1.5 text-[13.5px] leading-relaxed line-clamp-2" style={{ color: "var(--ink-2)" }}>
           {summary}
         </p>
       ) : null}
@@ -71,9 +114,34 @@ export default async function AnnouncementsListPage({ searchParams }: PageProps)
     error = e instanceof Error ? e.message : "加载公告失败";
   }
 
+  const [overview, settings] = await Promise.all([
+    fetchOverview().catch(() => null),
+    getPublicSettingsCached(),
+  ]);
+  const sidebarPages = overview?.sidebar_pages ?? [];
+  const siteLead = settings.site_description?.trim() || undefined;
+
+  // 首页置顶条目作头图；其余走列表行（置顶已在头图时不再重复）
+  const featured = page === 1 ? announcements.find((a) => a.pinned) : undefined;
+  const rest = featured ? announcements.filter((a) => a.id !== featured.id) : announcements;
+
+  const left = <SiteDocIdentity kind="announcements" lead={siteLead} />;
+  const right = <SiteDocPageNav pages={sidebarPages} title="关于本站" />;
+
   return (
-    <div className="max-w-3xl mx-auto">
-      <header className="mb-6">
+    <SiteDocShell
+      left={left}
+      right={right}
+      mobileExtras={<SiteDocPageNav pages={sidebarPages} title="关于本站" />}
+    >
+      <SiteDocBreadcrumb
+        items={[
+          { href: "/", label: "首页" },
+          { label: "站点公告" },
+        ]}
+      />
+
+      <header className="mb-5">
         <h1
           className="text-[24px] sm:text-[28px] font-extrabold tracking-tight flex items-center gap-2"
           style={{ color: "var(--ink)" }}
@@ -81,7 +149,9 @@ export default async function AnnouncementsListPage({ searchParams }: PageProps)
           <Megaphone size={26} style={{ color: "var(--accent)" }} aria-hidden />
           站点公告
         </h1>
-        <p className="meta mt-2">站点通知与运营公告</p>
+        <p className="meta mt-2">
+          {error ? "加载失败" : total > 0 ? `共 ${total} 条官方通知` : "站点通知与运营公告"}
+        </p>
       </header>
 
       {error ? (
@@ -94,9 +164,10 @@ export default async function AnnouncementsListPage({ searchParams }: PageProps)
           <p className="meta mt-1.5">有新消息时会显示在这里</p>
         </div>
       ) : (
-        <div className="flex flex-col gap-3">
-          {announcements.map((a) => (
-            <AnnouncementCard key={a.id} a={a} />
+        <div className="panel overflow-hidden">
+          {featured ? <FeaturedAnnouncement a={featured} /> : null}
+          {rest.map((a, i) => (
+            <AnnouncementRow key={a.id} a={a} showDivider={!!featured || i > 0} />
           ))}
         </div>
       )}
@@ -104,6 +175,6 @@ export default async function AnnouncementsListPage({ searchParams }: PageProps)
       {!error ? (
         <Pagination total={total} page={page} size={size} basePath="/announcements" />
       ) : null}
-    </div>
+    </SiteDocShell>
   );
 }