KennethCheng/llm_log_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kennethcheng 2026-04-27 15:23:44 +08:00
parent 9d1ee8e159
commit 9c7481544e
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
DEV_LOG.md
View File

@ -29,6 +29,14 @@
- **Task 18**: 右侧动态高亮 TOC 目录组件 (`TOC.astro`) 构建完成，支持滚动监听与活跃章节高亮。 - **Task 18**: 右侧动态高亮 TOC 目录组件 (`TOC.astro`) 构建完成，支持滚动监听与活跃章节高亮。
- **Task 19**: TOC 集成至文档路由，实现响应式三栏布局。 - **Task 19**: TOC 集成至文档路由，实现响应式三栏布局。
---
- **Task 20**: 代码块增强组件（`CodeBlockHelper.astro`）构建完成，支持一键复制与语言标签展示。
- **Task 21**: 全局挂载代码块增强组件至 `BaseLayout.astro`，全站文档生效。
- **Task 22**: 引入 `ClientRouter` 开启全站无缝路由过渡，实现 SPA 体验。
- **Task 23**: 移除 main 标签的 overflow 限制，修复 TOC 无法滚动跟随的 CSS 陷阱，并优化悬浮间距。
--- ---
**🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
**📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。 **📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。

2
src/components/TOC.astro
View File

@ -3,7 +3,7 @@ const { headings } = Astro.props;
// 仅提取 h2 和 h3 作为目录 // 仅提取 h2 和 h3 作为目录
const toc = headings.filter((h: any) => h.depth === 2 || h.depth === 3); 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> <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"> <ul class="flex flex-col gap-2.5 text-sm">
{toc.map((heading: any) => ( {toc.map((heading: any) => (

2
src/layouts/BaseLayout.astro
View File

@ -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"> <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"> <div class="flex max-w-[1440px] mx-auto">
<Sidebar /> <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 /> <slot />
</main> </main>
</div> </div>