feat: 注入 TOC 组件并重构单篇文章为三栏布局

DEV_LOG.md

@@ -1,10 +1,34 @@
-Task 1: Astro 基础脚手架已生成
-Task 2: Tailwind 官方集成安装完毕
-Task 3: Typography 插件配置完成
-Task 4: Markdown 解析底层依赖安装完成
-Task 5: astro.config.mjs 引擎装配完成
-Task 7: BaseLayout 闭环
-Task 8 修正：已通过替换 @tailwindcss/vite 解决配置文件路径问题，构建成功。
-核心渲染系统闭环成功
-Task 10: MDX 生态集成完毕
-Task 11: 现代表格组件 ModernTable 构建完成
+# 🚀 DEV_LOG - 项目进度与记忆存档
+
+## 📍 阶段一：基础架构与底层渲染 (Phase 1)
+- **Task 1**: Astro 基础脚手架初始化已完成。
+- **Task 2**: Tailwind 官方集成安装完毕。
+- **Task 3**: Tailwind Typography 插件配置完成，打通基础排版。
+- **Task 4**: Markdown 解析生态（remark-math, rehype-katex, rehype-pretty-code 等）底层依赖安装完成。
+- **Task 5**: `astro.config.mjs` 引擎装配完成（装载所有 AST 解析插件）。
+- **Task 6**: Astro v6 Content Layer 配置完成（使用 Glob Loader 与 Zod Schema）。
+- **Task 7**: 全局 CSS 构建与 `BaseLayout` 初始闭环。
+- **Task 8 (Hotfix)**: 已通过替换最新的 `@tailwindcss/vite` 解决配置文件路径与插件加载问题。
+- **里程碑 1 🏆**: 核心渲染系统闭环成功，普通 Markdown 可正常渲染网页并支持暗黑模式。
+
+## 📍 阶段二：MDX 升维与 UI 进化 (Phase 2)
+- **Task 10**: MDX 生态集成完毕，支持在文档中混写 JSX 组件。
+- **Task 11**: 极客风现代表格组件 `ModernTable.astro` 构建完成。
+- **Task 12**: 测试文档成功应用 MDX 渲染。
+- **Task 13**: 强制清理残留文件与 Vite 缓存，成功修复配置未生效的幽灵 Bug。
+- **Task 14**: 真实业务数据 (`2026-04-26.mdx`) 重构成功，完美呈现 SaaS 级数据看板视图。
+- **里程碑 2 🏆**: 视觉体验跨越式升级，打破原生 Markdown 渲染的 UI 上限。
+
+## 📍 阶段三：全站导航与架构成型 (Phase 3)
+- **Task 15**: 全局动态侧边栏导航组件 (`Sidebar.astro`) 构建完成。
+- **Task 16**: `BaseLayout` 底层升级为现代化的“左侧固定边栏 + 右侧自适应内容”的双栏响应式布局。
+- **Task 17**: 根目录知识库门户主页 (`index.astro`) 构建完成，支持动态读取 MDX 并生成卡片网格导航。
+- **里程碑 3 🏆**: 孤立的文档正式组装为连贯的“知识库系统”。
+
+---
+- **Task 18**: 右侧动态高亮 TOC 目录组件 (`TOC.astro`) 构建完成，支持滚动监听与活跃章节高亮。
+- **Task 19**: TOC 集成至文档路由，实现响应式三栏布局。
+
+---
+**🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
+**📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。

src/pages/docs/[...slug].astro

@@ -1,16 +1,21 @@
 ---
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import TOC from '../../components/TOC.astro';
 
 export async function getStaticPaths() {
   const docs = await getCollection('docs');
   return docs.map(doc => ({ params: { slug: doc.id }, props: { doc } }));
 }
 const { doc } = Astro.props;
-const { Content } = await render(doc);
+// Astro 的 render 方法原生支持解构 headings
+const { Content, headings } = await render(doc);
 ---
 <BaseLayout title={doc.data.title}>
-  <main class="prose prose-lg dark:prose-invert mx-auto">
+  <div class="flex flex-col xl:flex-row xl:gap-12 relative items-start max-w-7xl mx-auto">
+    <article class="prose prose-lg dark:prose-invert max-w-3xl flex-1 w-full">
       <Content />
-  </main>
+    </article>
+    {headings && headings.length > 0 && <TOC headings={headings} />}
+  </div>
 </BaseLayout>