Simplify node library panel collapse behavior

web/app/dashboard/ai-workflows/_components/workflow-editor.tsx

@@ -27,7 +27,6 @@ import {
   PanelLeftOpenIcon,
 } from "lucide-react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import type { PanelImperativeHandle } from "react-resizable-panels"
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -167,7 +166,6 @@ export function WorkflowEditor({
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
   const [nodeLibraryCollapsed, setNodeLibraryCollapsed] = useState(false)
   const [pendingNodeDrag, setPendingNodeDrag] = useState<PendingNodeDrag | null>(null)
-  const nodeLibraryPanelRef = useRef<PanelImperativeHandle | null>(null)
   const canvasRef = useRef<HTMLElement | null>(null)
   const pendingNodeDragRef = useRef<PendingNodeDrag | null>(null)
   const suppressNextClickRef = useRef(false)
@@ -256,23 +254,6 @@ export function WorkflowEditor({
     })
   }
 
-  const toggleNodeLibrary = () => {
-    const panel = nodeLibraryPanelRef.current
-    if (!panel) {
-      setNodeLibraryCollapsed((current) => !current)
-      return
-    }
-
-    if (panel.isCollapsed()) {
-      panel.expand()
-      setNodeLibraryCollapsed(false)
-      return
-    }
-
-    panel.collapse()
-    setNodeLibraryCollapsed(true)
-  }
-
   const dropNodeOnCanvas = useCallback(
     (spec: AIWorkflowNodeSpec, x: number, y: number) => {
       if (!flowInstance || !canvasRef.current) {
@@ -357,19 +338,9 @@ export function WorkflowEditor({
 
   return (
     <ResizablePanelGroup orientation="horizontal" className="h-full min-h-0">
-      <ResizablePanel
+      {!nodeLibraryCollapsed ? (
-        panelRef={nodeLibraryPanelRef}
+        <>
-        defaultSize="18%"
+          <ResizablePanel defaultSize="18%" minSize="12%" maxSize="34%" className="min-h-0">
-        minSize="12%"
-        maxSize="34%"
-        collapsedSize="0%"
-        collapsible
-        onResize={(panelSize: { asPercentage: number }) => {
-          setNodeLibraryCollapsed(panelSize.asPercentage <= 1)
-        }}
-        className="min-h-0"
-      >
-        {nodeLibraryCollapsed ? null : (
             <aside className="h-full min-h-0 bg-muted/20">
               <ScrollArea className="h-full min-h-0">
                 <div className="p-3">
@@ -380,7 +351,7 @@ export function WorkflowEditor({
                       variant="ghost"
                       size="icon"
                       className="size-7 shrink-0 text-muted-foreground hover:text-foreground"
-                    onClick={toggleNodeLibrary}
+                      onClick={() => setNodeLibraryCollapsed(true)}
                       aria-label="折叠节点库"
                     >
                       <PanelLeftCloseIcon className="size-3.5" />
@@ -417,10 +388,17 @@ export function WorkflowEditor({
                 </div>
               </ScrollArea>
             </aside>
-        )}
           </ResizablePanel>
           <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={selectedNode ? "56%" : "82%"} minSize="30%" className="min-h-0">
+        </>
+      ) : null}
+      <ResizablePanel
+        defaultSize={
+          nodeLibraryCollapsed ? (selectedNode ? "74%" : "100%") : selectedNode ? "56%" : "82%"
+        }
+        minSize="30%"
+        className="min-h-0"
+      >
         <section
           data-workflow-canvas
           ref={canvasRef}
@@ -435,7 +413,7 @@ export function WorkflowEditor({
               variant="outline"
               size="icon"
               className="absolute top-12 left-3 z-20 size-7 rounded-full bg-background/95 text-muted-foreground shadow-sm hover:text-foreground"
-              onClick={toggleNodeLibrary}
+              onClick={() => setNodeLibraryCollapsed(false)}
               aria-label="展开节点库"
             >
               <PanelLeftOpenIcon className="size-3.5" />