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>