From 3aaa991bd8c16876e939cf111f804f15ae710be4 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Wed, 25 Mar 2026 10:26:06 +0800
Subject: [PATCH] refactor: toc toggle

---
 src/components/FileTree.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/FileTree.tsx b/src/components/FileTree.tsx
index 4b51e28..1684a61 100644
--- a/src/components/FileTree.tsx
+++ b/src/components/FileTree.tsx
@@ -83,9 +83,15 @@ export const HeadingNode: Component<{
   const navigate = useNavigate();
   const anchor = props.node.id || "";
   const href = `${props.basePath}#${anchor}`;
+  const hasChildren = !!props.node.children;
+  // 默认收起，除非当前锚点在该节点内
+  const [isExpanded, setIsExpanded] = createSignal(false);
 
   const handleClick = (e: MouseEvent) => {
     e.preventDefault();
+    if (hasChildren) {
+      setIsExpanded(!isExpanded());
+    }
     navigate(href);
     // 滚动到目标元素，考虑导航栏高度偏移
     requestAnimationFrame(() => {
@@ -105,13 +111,18 @@ export const HeadingNode: Component<{
     <div>
       <a
         href={href}
-        class="block py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate"
+        class="flex items-center py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate cursor-pointer"
         style={{ "padding-left": `${indent + 8}px` }}
         onClick={handleClick}
       >
-        {props.node.title}
+        <Show when={hasChildren}>
+          <span class="mr-1 text-gray-400 text-xs w-3 flex-shrink-0">
+            {isExpanded() ? "▼" : "▶"}
+          </span>
+        </Show>
+        <span class="truncate">{props.node.title}</span>
       </a>
-      <Show when={props.node.children}>
+      <Show when={hasChildren && isExpanded()}>
         <div>
           {props.node.children!.map((child) => (
             <HeadingNode