fix: 修復 TOC 滾動跟隨失效問題並更新開發日誌

2026-04-27 15:23:44 +08:00 · 2026-04-27 15:23:44 +08:00 · 9c7481544e
commit 9c7481544e
parent 9d1ee8e159
3 changed files with 10 additions and 2 deletions
--- a/DEV_LOG.md
+++ b/DEV_LOG.md
@ -29,6 +29,14 @@
 - **Task 18**: 右侧动态高亮 TOC 目录组件 (`TOC.astro`) 构建完成，支持滚动监听与活跃章节高亮。
 - **Task 19**: TOC 集成至文档路由，实现响应式三栏布局。

+---
+- **Task 20**: 代码块增强组件（`CodeBlockHelper.astro`）构建完成，支持一键复制与语言标签展示。
+- **Task 21**: 全局挂载代码块增强组件至 `BaseLayout.astro`，全站文档生效。
+
+- **Task 22**: 引入 `ClientRouter` 开启全站无缝路由过渡，实现 SPA 体验。
+
+- **Task 23**: 移除 main 标签的 overflow 限制，修复 TOC 无法滚动跟随的 CSS 陷阱，并优化悬浮间距。
+
 ---
 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
 **📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。
--- a/src/components/TOC.astro
+++ b/src/components/TOC.astro
@ -3,7 +3,7 @@ const { headings } = Astro.props;
 // 仅提取 h2 和 h3 作为目录
 const toc = headings.filter((h: any) => h.depth === 2 || h.depth === 3);
 ---
-<nav class="sticky top-8 max-h-[calc(100vh-4rem)] overflow-y-auto hidden xl:block min-w-[200px] w-64 pr-4">
+<nav class="sticky top-32 max-h-[calc(100vh-10rem)] overflow-y-auto hidden xl:block min-w-[200px] w-64 pr-4">
  <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mb-4 border-l-4 border-blue-500 pl-2">目录大纲</h3>
  <ul class="flex flex-col gap-2.5 text-sm">
    {toc.map((heading: any) => (
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -16,7 +16,7 @@ const { title } = Astro.props;
  <body class="bg-white dark:bg-[#0a0c10] text-gray-900 min-h-screen selection:bg-blue-200 dark:selection:bg-blue-900">
    <div class="flex max-w-[1440px] mx-auto">
      <Sidebar />
-      <main class="flex-1 w-full min-w-0 p-8 md:p-12 overflow-x-hidden">
+      <main class="flex-1 w-full min-w-0 p-8 md:p-12">
        <slot />
      </main>
    </div>