refactor: toc behaviour

src/components/FileTree.tsx

@@ -83,9 +83,17 @@ 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(props.depth <= 0);
 
-  const handleClick = (e: MouseEvent) => {
+  const handleExpand = (e: MouseEvent) => {
     e.preventDefault();
+    if (hasChildren) {
+      setIsExpanded(!isExpanded());
+    }
+  };
+  const handleClick = (e: MouseEvent) => {
     navigate(href);
     // 滚动到目标元素，考虑导航栏高度偏移
     requestAnimationFrame(() => {
@@ -94,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" });
       }
     });
   };
@@ -103,15 +111,20 @@ 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="block py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate"
+        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"
-        style={{ "padding-left": `${indent + 8}px` }}
         onClick={handleClick}
       >
-        {props.node.title}
+        <span class="truncate">{props.node.title}</span>
       </a>
-      <Show when={props.node.children}>
+      <Show when={hasChildren && isExpanded()}>
         <div>
           {props.node.children!.map((child) => (
             <HeadingNode

src/components/Sidebar.tsx

@@ -30,7 +30,7 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
 
   return (
     <div class="flex flex-col h-full">
-      <div class="p-4 border-b">
+      <div class="p-4 border-b border-b-gray-200">
         <div class="flex items-center justify-between">
           <h2 class="text-lg font-bold text-gray-900">目录</h2>
           <Show when={!props.isDesktop}>
@@ -63,7 +63,7 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
 
       {/* 当前文件标题滚动区域 */}
       <Show when={currentFileHeadings().length > 0}>
-        <div class="flex-1 border-t overflow-y-auto p-4 min-h-0">
+        <div class="flex-1 border-t-gray-200 border-t overflow-y-auto p-4 min-h-0">
           <h3 class="text-xs font-semibold text-gray-500 uppercase mb-2 px-2">
             本页
           </h3>