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

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

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

frontend/components/markdown/MdTimeline.tsx

@@ -4,6 +4,7 @@ import {
   groupTimelineByDate,
   type TimelineItem,
 } from "@/lib/timelineBlocks";
+import { timelineDayId } from "@/lib/toc";
 
 type MdTimelineProps = {
   items: TimelineItem[];
@@ -11,8 +12,24 @@ type MdTimelineProps = {
   renderBody?: (item: TimelineItem, index: number) => ReactNode;
 };
 
+const PREFIX_RE =
+  /^(feat|fix|polish|chore|docs|refactor|style|perf|test)(?:\(([^)]*)\))?\s*:?\s*/i;
+
+function splitTitlePrefix(title: string): { kind?: string; scope?: string; rest: string } {
+  const m = PREFIX_RE.exec(title);
+  if (!m) return { rest: title };
+  const rest = title.slice(m[0].length).trim() || title;
+  return {
+    kind: m[1].toLowerCase(),
+    scope: m[2]?.trim() || undefined,
+    rest,
+  };
+}
+
 /**
- * 按日分组的垂直时间线（更新树）。颜色走 CSS 令牌。
+ * 按日分组的垂直时间线（更新树）。
+ * 日分组 id 与 extractToc 的 tl-YYYY-MM-DD 对齐，供右侧目录跳转。
+ * 条目用普通段落而非 h3，避免被 .prose-content 标题样式放大。
  */
 export default function MdTimeline({ items, renderBody }: MdTimelineProps) {
   if (!items.length) {
@@ -24,19 +41,41 @@ export default function MdTimeline({ items, renderBody }: MdTimelineProps) {
   return (
     <div className="j13-timeline" role="list" aria-label="时间线">
       {groups.map((g) => (
-        <div key={g.date} className="j13-timeline-day">
-          <div className="j13-timeline-day-label">
-            <time dateTime={g.date}>{g.date}</time>
+        <section
+          key={g.date}
+          id={timelineDayId(g.date)}
+          className="j13-timeline-day"
+          style={{ scrollMarginTop: 90 }}
+          aria-labelledby={`${timelineDayId(g.date)}-label`}
+        >
+          <div className="j13-timeline-day-label" id={`${timelineDayId(g.date)}-label`}>
+            <time dateTime={/^\d{4}-\d{2}-\d{2}$/.test(g.date) ? g.date : undefined}>
+              {g.date}
+            </time>
+            <span className="j13-timeline-day-count">{g.items.length}</span>
           </div>
           <ul className="j13-timeline-items">
             {g.items.map((it) => {
               const idx = flat++;
+              const { kind, scope, rest } = splitTitlePrefix(it.title);
+              const bodyNode = renderBody
+                ? renderBody(it, idx)
+                : it.body.trim()
+                  ? <span className="whitespace-pre-wrap">{it.body}</span>
+                  : null;
+
               return (
                 <li key={`${g.date}-${idx}-${it.title}`} className="j13-timeline-item" role="listitem">
                   <span className="j13-timeline-dot" aria-hidden />
                   <div className="j13-timeline-card">
                     <div className="j13-timeline-head">
-                      <h3 className="j13-timeline-title">{it.title}</h3>
+                      {kind ? (
+                        <span className={`j13-timeline-chip is-${kind}`}>
+                          {kind}
+                          {scope ? <span className="j13-timeline-chip-scope">({scope})</span> : null}
+                        </span>
+                      ) : null}
+                      <p className="j13-timeline-summary">{rest}</p>
                       {it.sourceUrl ? (
                         <a
                           href={it.sourceUrl}
@@ -46,21 +85,17 @@ export default function MdTimeline({ items, renderBody }: MdTimelineProps) {
                           data-tip="查看提交"
                           aria-label="查看提交"
                         >
-                          <ExternalLink size={13} />
+                          <ExternalLink size={12} />
                         </a>
                       ) : null}
                     </div>
-                    {renderBody ? (
-                      <div className="j13-timeline-body">{renderBody(it, idx)}</div>
-                    ) : it.body.trim() ? (
-                      <div className="j13-timeline-body whitespace-pre-wrap">{it.body}</div>
-                    ) : null}
+                    {bodyNode ? <div className="j13-timeline-body">{bodyNode}</div> : null}
                   </div>
                 </li>
               );
             })}
           </ul>
-        </div>
+        </section>
       ))}
     </div>
   );