From e6448a933d2e03fb571ef6419a4c45bed55c7df9 Mon Sep 17 00:00:00 2001
From: kennethcheng <a1478925630@163.com>
Date: Mon, 27 Apr 2026 15:28:46 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BE=8E=E5=8C=96=20TOC=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=BB=9A=E5=8A=A8=E6=9D=A1=E4=B8=BA=E7=8E=B0?=
 =?UTF-8?q?=E4=BB=A3=E7=BA=A4=E7=BB=86=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 DEV_LOG.md               |  2 ++
 src/components/TOC.astro | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/DEV_LOG.md b/DEV_LOG.md
index 6480db7..87b1567 100644
--- a/DEV_LOG.md
+++ b/DEV_LOG.md
@@ -37,6 +37,8 @@
 
 - **Task 23**: 移除 main 标签的 overflow 限制，修复 TOC 无法滚动跟随的 CSS 陷阱，并优化悬浮间距。
 
+- **Task 24**: 为 TOC 目录追加局部 CSS，将默认滚动条重构为现代化的极细隐形滚动条（支持明暗模式双效）。
+
 ---
 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
 **📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。
\ No newline at end of file
diff --git a/src/components/TOC.astro b/src/components/TOC.astro
index e40c9a8..f842c1e 100644
--- a/src/components/TOC.astro
+++ b/src/components/TOC.astro
@@ -44,3 +44,35 @@ const toc = headings.filter((h: any) => h.depth === 2 || h.depth === 3);
     });
   }
 </script>
+
+<style>
+  /* 现代纤细滚动条样式 (支持 Firefox 与 Webkit) */
+  nav {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent; /* Light: slate-300 */
+  }
+  :global(.dark) nav {
+    scrollbar-color: #334155 transparent; /* Dark: slate-700 */
+  }
+  
+  /* Chrome/Edge/Safari 专属定制 */
+  nav::-webkit-scrollbar {
+    width: 4px; /* 极细宽度 */
+  }
+  nav::-webkit-scrollbar-track {
+    background: transparent; /* 轨道透明 */
+  }
+  nav::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 4px; /* 圆角 */
+  }
+  :global(.dark) nav::-webkit-scrollbar-thumb {
+    background-color: #334155;
+  }
+  nav::-webkit-scrollbar-thumb:hover {
+    background-color: #94a3b8; /* 悬停颜色加深 */
+  }
+  :global(.dark) nav::-webkit-scrollbar-thumb:hover {
+    background-color: #475569;
+  }
+</style>