From 4472e96c14a051118c9963872930f8b5350c1495 Mon Sep 17 00:00:00 2001
From: kennethcheng <a1478925630@163.com>
Date: Mon, 27 Apr 2026 14:44:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=20TOC=20=E7=9B=AE=E5=BD=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TOC.astro | 46 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/TOC.astro

diff --git a/src/components/TOC.astro b/src/components/TOC.astro
new file mode 100644
index 0000000..0cb59f0
--- /dev/null
+++ b/src/components/TOC.astro
@@ -0,0 +1,46 @@
+---
+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">
+  <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) => (
+      <li class={heading.depth === 3 ? "ml-4" : ""}>
+        <a 
+          href={`#${heading.slug}`} 
+          class="toc-link text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-all duration-200 block line-clamp-2"
+        >
+          {heading.text}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<script>
+  // 客户端监听滚动并高亮目录
+  document.addEventListener('astro:page-load', () => setupTOC()); // 预留后续无缝过渡支持
+  setupTOC();
+
+  function setupTOC() {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const id = entry.target.id;
+          document.querySelectorAll('.toc-link').forEach((link) => {
+            link.classList.remove('text-blue-600', 'dark:text-blue-400', 'font-semibold', 'translate-x-1');
+            if (link.getAttribute('href') === `#${id}`) {
+              link.classList.add('text-blue-600', 'dark:text-blue-400', 'font-semibold', 'translate-x-1');
+            }
+          });
+        }
+      });
+    }, { rootMargin: '0px 0px -80% 0px' });
+
+    document.querySelectorAll('article h2, article h3').forEach((section) => {
+      observer.observe(section);
+    });
+  }
+</script>