refactor: toc behaviour

src/components/FileTree.tsx

@@ -85,13 +85,15 @@ export const HeadingNode: Component<{
   const href = `${props.basePath}#${anchor}`;
   const hasChildren = !!props.node.children;
   // 默认收起，除非当前锚点在该节点内
-  const [isExpanded, setIsExpanded] = createSignal(false);
+  const [isExpanded, setIsExpanded] = createSignal(props.depth <= 0);
 
-  const handleClick = (e: MouseEvent) => {
+  const handleExpand = (e: MouseEvent) => {
     e.preventDefault();
     if (hasChildren) {
       setIsExpanded(!isExpanded());
     }
+  };
+  const handleClick = (e: MouseEvent) => {
     navigate(href);
     // 滚动到目标元素，考虑导航栏高度偏移
     requestAnimationFrame(() => {
@@ -100,7 +102,7 @@ export const HeadingNode: Component<{
         const navBarHeight = 80;
         const elementPosition = element.getBoundingClientRect().top;
         const offsetPosition = window.scrollY + elementPosition - navBarHeight;
-        window.scrollTo({ top: offsetPosition, behavior: "smooth" });
+        window.scrollTo({ top: offsetPosition, behavior: "instant" });
       }
     });
   };
@@ -109,17 +111,17 @@ export const HeadingNode: Component<{
 
   return (
     <div>
+        <span class={`${hasChildren ? "" : "invisible" } ${isExpanded() ? "rotate-90" : ""} inline-block transition-transform cursor-pointer mr-1 text-gray-400 text-xs w-3 flex-shrink-0`}
+              style={{ "margin-left": `${indent + 8}px` }}
+              onClick={handleExpand}
+        >
+          ▶
+        </span>
       <a
         href={href}
-        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` }}
+        class="inline-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"
         onClick={handleClick}
       >
-        <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={hasChildren && isExpanded()}>