style: 美化 TOC 组件的滚动条为现代纤细风格

DEV_LOG.md

@@ -37,6 +37,8 @@
 
 - **Task 23**: 移除 main 标签的 overflow 限制，修复 TOC 无法滚动跟随的 CSS 陷阱，并优化悬浮间距。
 
+- **Task 24**: 为 TOC 目录追加局部 CSS，将默认滚动条重构为现代化的极细隐形滚动条（支持明暗模式双效）。
+
 ---
 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
 **📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。

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>