From 0d568ebf87324d8743a65d702295f4b30489b4d2 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sat, 27 Jun 2026 22:40:27 +0800
Subject: [PATCH] feat: refactor workflow configuration components for improved
 structure and usability

---
 .../_components/config-workbench.tsx          |  6 +-
 .../_components/node-config-panel.tsx         | 42 +++++-----
 .../_components/workflow-config-sidebar.tsx   | 79 ++++++++++---------
 .../_components/workflow-editor.tsx           | 34 ++++----
 4 files changed, 87 insertions(+), 74 deletions(-)

diff --git a/web/app/dashboard/ai-agents/_components/config-workbench.tsx b/web/app/dashboard/ai-agents/_components/config-workbench.tsx
index 0de1190..08dc8a1 100644
--- a/web/app/dashboard/ai-agents/_components/config-workbench.tsx
+++ b/web/app/dashboard/ai-agents/_components/config-workbench.tsx
@@ -591,7 +591,11 @@ export function AIAgentConfigWorkbench({
           </div>
         </div>
 
-        <main className="min-h-0 flex-1 overflow-y-auto bg-background">
+        <main
+          className={`min-h-0 flex-1 bg-background ${
+            activeSection === "workflow" ? "overflow-hidden" : "overflow-y-auto"
+          }`}
+        >
           {loading ? (
             <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
               加载中...
diff --git a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
index 523f7c1..d67346c 100644
--- a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
+++ b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
@@ -31,6 +31,7 @@ export function NodeConfigPanel({
   nodeSpec,
   nodes,
   availableVariables,
+  showHeader = true,
   onChange,
   onDelete,
 }: {
@@ -39,6 +40,7 @@ export function NodeConfigPanel({
   nodes: AIWorkflowDefinition["nodes"]
   availableVariables?: WorkflowVariableRef[]
   branchSummaries?: WorkflowBranchSummary[]
+  showHeader?: boolean
   onChange: (nodeId: string, data: AIWorkflowDefinition["nodes"][number]["data"]) => void
   onDelete?: (nodeId: string) => void
 }) {
@@ -104,26 +106,30 @@ export function NodeConfigPanel({
 
   return (
     <div className="flex h-full flex-col">
-      <div className="border-b px-4 py-3">
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="truncate text-sm font-medium">{node.data?.title || nodeSpec?.title || node.type}</div>
-            <div className="mt-1 truncate text-xs text-muted-foreground">{node.id}</div>
+      {showHeader ? (
+        <div className="border-b px-4 py-3">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium">
+                {node.data?.title || nodeSpec?.title || node.type}
+              </div>
+              <div className="mt-1 truncate text-xs text-muted-foreground">{node.id}</div>
+            </div>
+            {canDelete ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-8 shrink-0 text-muted-foreground hover:text-destructive"
+                onClick={() => onDelete?.(node.id)}
+                aria-label="删除节点"
+              >
+                <Trash2Icon className="size-4" />
+              </Button>
+            ) : null}
           </div>
-          {canDelete ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="size-8 shrink-0 text-muted-foreground hover:text-destructive"
-              onClick={() => onDelete?.(node.id)}
-              aria-label="删除节点"
-            >
-              <Trash2Icon className="size-4" />
-            </Button>
-          ) : null}
         </div>
-      </div>
+      ) : null}
       <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
         <div className="space-y-2">
           <Label htmlFor={`node-title-${node.id}`}>标题</Label>
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
index 9994b9a..56be20d 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
@@ -1,27 +1,28 @@
 "use client"
 
+import { XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
 import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
-import { cn } from "@/lib/utils"
 
 import { NodeConfigPanel } from "./node-config-panel"
 import {
   getAvailableVariables,
-  getNodeTitle,
   type WorkflowNodeData,
 } from "./workflow-utils"
 
-export function WorkflowConfigSidebar({
+export function WorkflowConfigPanel({
   definition,
   nodeSpecs,
   selectedNodeId,
-  onSelectNode,
+  onClose,
   onChangeNodeData,
   onDeleteNode,
 }: {
   definition: AIWorkflowDefinition
   nodeSpecs: AIWorkflowNodeSpec[]
   selectedNodeId: string
-  onSelectNode: (nodeId: string) => void
+  onClose: () => void
   onChangeNodeData: (nodeId: string, data: WorkflowNodeData) => void
   onDeleteNode: (nodeId: string) => void
 }) {
@@ -33,39 +34,43 @@ export function WorkflowConfigSidebar({
     ? getAvailableVariables(definition, selectedNode.id, nodeSpecs)
     : []
 
+  if (!selectedNode) {
+    return null
+  }
+
   return (
-    <aside className="relative z-50 flex w-80 shrink-0 flex-col border-l bg-background">
-      <div className="border-b px-3 py-2">
-        <div className="text-sm font-medium">配置</div>
-      </div>
-      <div className="max-h-48 overflow-y-auto border-b p-2">
-        <div className="space-y-1">
-          {definition.nodes.map((node) => (
-            <button
-              key={node.id}
-              type="button"
-              className={cn(
-                "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted",
-                selectedNodeId === node.id && "bg-muted"
-              )}
-              onClick={() => onSelectNode(node.id)}
-            >
-              <span className="min-w-0 truncate">{getNodeTitle(node, nodeSpecs)}</span>
-              <span className="shrink-0 text-xs text-muted-foreground">{node.type}</span>
-            </button>
-          ))}
+    <div className="pointer-events-none absolute inset-y-3 right-3 z-50 flex w-[360px] max-w-[calc(100%-1.5rem)]">
+      <section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg border bg-background shadow-2xl">
+        <div className="flex shrink-0 items-start justify-between gap-3 border-b px-4 py-3">
+          <div className="min-w-0">
+            <div className="text-sm font-medium">属性</div>
+            <div className="mt-0.5 truncate text-xs text-muted-foreground">
+              {selectedNode.data?.title || selectedNodeSpec?.title || selectedNode.type}
+            </div>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-8 shrink-0 text-muted-foreground"
+            aria-label="关闭属性面板"
+            onClick={onClose}
+          >
+            <XIcon className="size-4" />
+          </Button>
         </div>
-      </div>
-      <div className="min-h-0 flex-1">
-        <NodeConfigPanel
-          node={selectedNode}
-          nodeSpec={selectedNodeSpec}
-          nodes={definition.nodes}
-          availableVariables={availableVariables}
-          onChange={onChangeNodeData}
-          onDelete={onDeleteNode}
-        />
-      </div>
-    </aside>
+        <div className="min-h-0 flex-1">
+          <NodeConfigPanel
+            node={selectedNode}
+            nodeSpec={selectedNodeSpec}
+            nodes={definition.nodes}
+            availableVariables={availableVariables}
+            showHeader={false}
+            onChange={onChangeNodeData}
+            onDelete={onDeleteNode}
+          />
+        </div>
+      </section>
+    </div>
   )
 }
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
index b946982..fa6eb55 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
@@ -16,7 +16,7 @@ import {
 import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
 
 import { useFlowgramEditorProps } from "./flowgram-editor-provider"
-import { WorkflowConfigSidebar } from "./workflow-config-sidebar"
+import { WorkflowConfigPanel } from "./workflow-config-sidebar"
 import { WorkflowEditorToolbar } from "./workflow-editor-toolbar"
 import { WorkflowNodePalette } from "./workflow-node-palette"
 import {
@@ -63,7 +63,7 @@ export function WorkflowEditor({
   toolbarExtra?: ReactNode
 }) {
   const [localDefinition, setLocalDefinition] = useState(definition)
-  const [selectedNodeId, setSelectedNodeId] = useState(definition.nodes[0]?.id ?? "")
+  const [selectedNodeId, setSelectedNodeId] = useState("")
 
   const validation = useMemo(
     () => validateWorkflowDefinition(localDefinition, nodeSpecs),
@@ -157,9 +157,7 @@ function WorkflowEditorInner({
   useEffect(() => {
     const disposable = selectService.onSelectionChanged(() => {
       const selectedNode = selectService.selectedNodes[0]
-      if (selectedNode) {
-        onSelectNode(selectedNode.id)
-      }
+      onSelectNode(selectedNode?.id ?? "")
     })
     return () => disposable.dispose()
   }, [onSelectNode, selectService])
@@ -180,14 +178,6 @@ function WorkflowEditorInner({
     emitCurrentDefinition()
   }
 
-  const selectNode = (nodeId: string) => {
-    const node = workflowDocument.getAllNodes().find((item) => item.id === nodeId)
-    if (node) {
-      selectService.selectNodeAndFocus(node)
-    }
-    onSelectNode(nodeId)
-  }
-
   const updateNodeData = (nodeId: string, data: WorkflowNodeData) => {
     const next = updateWorkflowNodeData(definition, nodeId, data)
     context.operation.fromJSON(next as WorkflowJSON)
@@ -202,11 +192,19 @@ function WorkflowEditorInner({
     onDefinitionChange(context.document.toJSON() as AIWorkflowDefinition)
   }
 
+  const closeConfigPanel = () => {
+    selectService.clear()
+    onSelectNode("")
+  }
+
   return (
-    <div className="relative isolate flex min-h-[640px] flex-1 overflow-hidden border bg-background">
+    <div
+      data-workflow-editor-root
+      className="relative isolate flex h-full min-h-0 w-full flex-1 overflow-hidden border bg-background"
+    >
       <WorkflowNodePalette nodeSpecs={nodeSpecs} onAddNode={addNode} />
 
-      <div className="flex min-w-0 flex-1 flex-col">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
         <WorkflowEditorToolbar
           validation={validation}
           nodeCount={definition.nodes.length}
@@ -225,16 +223,16 @@ function WorkflowEditorInner({
           onPublish={onPublish}
           publishDisabled={publishDisabled}
         />
-        <div className="min-h-0 flex-1">
+        <div className="relative min-h-0 flex-1 overflow-hidden">
           <EditorRenderer className="h-full w-full" />
         </div>
       </div>
 
-      <WorkflowConfigSidebar
+      <WorkflowConfigPanel
         definition={definition}
         nodeSpecs={nodeSpecs}
         selectedNodeId={selectedNodeId}
-        onSelectNode={selectNode}
+        onClose={closeConfigPanel}
         onChangeNodeData={updateNodeData}
         onDeleteNode={removeNode}
       />