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

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

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

frontend/app/announcement/[id]/page.tsx

@@ -1,13 +1,21 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
-import { ChevronRight, Megaphone } from "lucide-react";
-import { fetchAnnouncementDetail } from "@/lib/api";
+import { Megaphone } from "lucide-react";
+import { fetchAnnouncementDetail, fetchOverview } from "@/lib/api";
 import { authCookieHeader } from "@/lib/cookies";
-import { formatDate } from "@/lib/format";
-import { getMeCached } from "@/lib/serverData";
+import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
+import { extractToc, estimateReadingMinutes, markdownHeadingToc } from "@/lib/toc";
 import MarkdownBody from "@/components/MarkdownBody";
+import PostToc from "@/components/PostToc";
+import {
+  SiteDocShell,
+  SiteDocIdentity,
+  SiteDocPageNav,
+  SiteDocAnnoNav,
+  SiteDocMasthead,
+  SiteDocBreadcrumb,
+} from "@/components/site-doc";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -32,14 +40,35 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 export default async function AnnouncementPage({ params }: PageProps) {
   const { id } = await params;
   const cookie = authCookieHeader(await cookies());
-  const [data, me] = await Promise.all([
+  const [data, me, overview, settings] = await Promise.all([
     fetchAnnouncementDetail(id, cookie || undefined).catch(() => null),
     getMeCached(cookie || undefined),
+    fetchOverview(cookie || undefined).catch(() => null),
+    getPublicSettingsCached(),
   ]);
   if (!data) notFound();
 
   const a = data.announcement;
+  const annId = Number(id);
   const loginHref = `/login?redirect=${encodeURIComponent(`/announcement/${id}`)}`;
+  const sidebarPages = overview?.sidebar_pages ?? [];
+  const announcements = overview?.announcements ?? [];
+  const siteLead = settings.site_description?.trim() || undefined;
+  const toc = extractToc(a.content);
+  const headingToc = markdownHeadingToc(toc);
+  const readingMinutes = estimateReadingMinutes(a.content, a.title.length);
+
+  let headingIndex = 0;
+  const headingRenderer = (Tag: "h2" | "h3") =>
+    function Heading({ children }: { children?: React.ReactNode }) {
+      const item = headingToc[headingIndex++];
+      return (
+        <Tag id={item?.id} style={{ scrollMarginTop: 90 }}>
+          {children}
+        </Tag>
+      );
+    };
+
   const jsonLd = {
     "@context": "https://schema.org",
     "@type": "Article",
@@ -50,69 +79,79 @@ export default async function AnnouncementPage({ params }: PageProps) {
     keywords: a.tag,
   };
 
+  const left = (
+    <>
+      <SiteDocIdentity kind="announcements" lead={siteLead} />
+      <SiteDocAnnoNav items={announcements} currentId={annId} />
+    </>
+  );
+
+  const right = (
+    <>
+      {toc.length > 0 ? <PostToc items={toc} /> : null}
+      <SiteDocPageNav pages={sidebarPages} title="关于本站" />
+    </>
+  );
+
   return (
-    <div className="max-w-3xl mx-auto">
+    <>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
 
-      {/* 面包屑 */}
-      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
-        <Link href="/" className="hover:text-[var(--accent)] transition-colors">
-          首页
-        </Link>
-        <ChevronRight size={13} />
-        <Link href="/announcements" className="hover:text-[var(--accent)] transition-colors">
-          站点公告
-        </Link>
-        <ChevronRight size={13} />
-        <span className="truncate" style={{ color: "var(--accent)" }}>
-          {a.title}
-        </span>
-      </nav>
+      <SiteDocShell
+        left={left}
+        right={right}
+        mobileExtras={
+          <>
+            {toc.length > 0 ? <PostToc items={toc} /> : null}
+            <SiteDocAnnoNav items={announcements} currentId={annId} />
+            <SiteDocPageNav pages={sidebarPages} title="关于本站" />
+          </>
+        }
+      >
+        <SiteDocBreadcrumb
+          items={[
+            { href: "/", label: "首页" },
+            { href: "/announcements", label: "站点公告" },
+            { label: a.title },
+          ]}
+        />
 
-      <article className="panel p-6 sm:p-8">
-        <div className="flex items-center justify-between gap-3 flex-wrap">
-          <div className="flex items-center gap-2 flex-wrap">
-            {a.pinned ? <span className="badge-pin">置顶</span> : null}
-            <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
-          </div>
-          <time className="meta text-[12px] tabular-nums" dateTime={a.created_at}>
-            {formatDate(a.created_at)}
-          </time>
-        </div>
+        <article className="panel p-6 sm:p-8">
+          <SiteDocMasthead
+            kicker="站点公告"
+            title={a.title}
+            createdAt={a.created_at}
+            updatedAt={a.updated_at}
+            readingMinutes={readingMinutes}
+            showTimeOfDay
+            badges={
+              <>
+                {a.pinned ? <span className="badge-pin">置顶</span> : null}
+                <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
+              </>
+            }
+          />
 
-        <h1
-          className="mt-3.5 text-[24px] sm:text-[28px] font-extrabold leading-snug tracking-tight"
-          style={{ color: "var(--ink)" }}
-        >
-          {a.title}
-        </h1>
-
-        <div
-          className="mt-5 pt-5"
-          style={{ borderTop: "1px solid var(--line)" }}
-        >
           <MarkdownBody
             content={a.content}
             loggedIn={!!me.user}
             loginHref={loginHref}
+            components={
+              headingToc.length > 0
+                ? { h2: headingRenderer("h2"), h3: headingRenderer("h3") }
+                : undefined
+            }
           />
-        </div>
-      </article>
+        </article>
 
-      <div className="mt-5 flex items-center gap-2 text-[12.5px] meta">
-        <Megaphone size={14} style={{ color: "var(--accent)" }} />
-        <span>由站点管理团队发布</span>
-        <Link
-          href="/"
-          className="ml-auto font-semibold transition-colors hover:text-[var(--accent)]"
-          style={{ color: "var(--accent)" }}
-        >
-          返回首页
-        </Link>
-      </div>
-    </div>
+        <div className="mt-5 flex items-center gap-2 text-[12.5px] meta">
+          <Megaphone size={14} style={{ color: "var(--accent)" }} />
+          <span>由站点管理团队发布</span>
+        </div>
+      </SiteDocShell>
+    </>
   );
 }