From d79e66facced25c00319422a0e2cde269e68bd90 Mon Sep 17 00:00:00 2001 From: kennethcheng Date: Mon, 27 Apr 2026 14:48:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B3=A8=E5=85=A5=20TOC=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E9=87=8D=E6=9E=84=E5=8D=95=E7=AF=87=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E4=B8=BA=E4=B8=89=E6=A0=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DEV_LOG.md | 44 ++++++++++++++++++++++++++-------- src/pages/docs/[...slug].astro | 13 ++++++---- 2 files changed, 43 insertions(+), 14 deletions(-) diff --git a/DEV_LOG.md b/DEV_LOG.md index 96fcfc0..061fe91 100644 --- a/DEV_LOG.md +++ b/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 优化等）。 \ No newline at end of file diff --git a/src/pages/docs/[...slug].astro b/src/pages/docs/[...slug].astro index 6c81067..bf7c398 100644 --- a/src/pages/docs/[...slug].astro +++ b/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); --- -
- -
+
+
+ +
+ {headings && headings.length > 0 && } +