refactor: toc toggle

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