feat: enhance WorkflowEditor with improved node selection and validation display

web/app/dashboard/ai-agents/_components/config-workbench.tsx

@@ -530,14 +530,38 @@ export function AIAgentConfigWorkbench({
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="outline" disabled={savingAgent || loading} onClick={saveAgentSettings}>
-            <SaveIcon className="size-4" />
-            保存
-          </Button>
-          <Button disabled={savingWorkflow || loading || !currentAgentId} onClick={publishWorkflow}>
-            <SendIcon className="size-4" />
-            发布流程
-          </Button>
+          {activeSection === "workflow" ? (
+            <>
+              {validation ? (
+                <Badge variant={validation.valid ? "default" : "destructive"}>
+                  {validation.valid ? "校验通过" : `${validation.errors.length} 个问题`}
+                </Badge>
+              ) : null}
+              <Button variant="outline" disabled={savingWorkflow || loading || !currentAgentId} onClick={validateWorkflowDraft}>
+                <CheckCircle2Icon className="size-4" />
+                校验
+              </Button>
+              <Button variant="outline" disabled={savingWorkflow || loading || !currentAgentId} onClick={saveWorkflowDraft}>
+                <SaveIcon className="size-4" />
+                保存草稿
+              </Button>
+              <Button disabled={savingWorkflow || loading || !currentAgentId} onClick={publishWorkflow}>
+                <SendIcon className="size-4" />
+                发布流程
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="outline" disabled={savingAgent || loading} onClick={saveAgentSettings}>
+                <SaveIcon className="size-4" />
+                保存
+              </Button>
+              <Button disabled={savingWorkflow || loading || !currentAgentId} onClick={publishWorkflow}>
+                <SendIcon className="size-4" />
+                发布流程
+              </Button>
+            </>
+          )}
         </div>
       </div>
 
@@ -753,40 +777,12 @@ export function AIAgentConfigWorkbench({
               ) : null}
 
               {activeSection === "workflow" ? (
-                <div className="flex h-full min-h-0 flex-col">
-                  <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-sm font-medium">主会话流程</div>
-                    </div>
-                    <div className="ml-3 flex items-center gap-2">
-                      {validation ? (
-                        <Badge variant={validation.valid ? "default" : "destructive"}>
-                          {validation.valid ? "校验通过" : `${validation.errors.length} 个问题`}
-                        </Badge>
-                      ) : null}
-                      <Button size="sm" variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={validateWorkflowDraft}>
-                        <CheckCircle2Icon className="size-4" />
-                        校验
-                      </Button>
-                      <Button size="sm" variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={saveWorkflowDraft}>
-                        <SaveIcon className="size-4" />
-                        保存草稿
-                      </Button>
-                      <Button size="sm" disabled={savingWorkflow || !currentAgentId} onClick={publishWorkflow}>
-                        <SendIcon className="size-4" />
-                        发布
-                      </Button>
-                    </div>
-                  </div>
-                  <div className="min-h-0 flex-1">
-                    <WorkflowEditor
-                      key={editorKey}
-                      definition={definition}
-                      nodeSpecs={nodeSpecs}
-                      onDefinitionChange={setDefinition}
-                    />
-                  </div>
-                </div>
+                <WorkflowEditor
+                  key={editorKey}
+                  definition={definition}
+                  nodeSpecs={nodeSpecs}
+                  onDefinitionChange={setDefinition}
+                />
               ) : null}
 
               {activeSection === "handoff" ? (

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

@@ -24,7 +24,6 @@ import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import {
   Popover,
   PopoverContent,
@@ -188,6 +187,10 @@ export function WorkflowEditor({
     onDefinitionChange(toApiDefinition(draft) as AIWorkflowDefinition)
   }, [draft, onDefinitionChange])
 
+  useEffect(() => {
+    onDefinitionChange(toApiDefinition(draft) as AIWorkflowDefinition)
+  }, [draft, onDefinitionChange])
+
   const onConnect = useCallback(
     (connection: Connection) => {
       if (!connection.source || !connection.target) {
@@ -361,7 +364,7 @@ export function WorkflowEditor({
         </aside>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize="56%" minSize="30%" className="min-h-0">
+      <ResizablePanel defaultSize={selectedNode ? "56%" : "82%"} minSize="30%" className="min-h-0">
         <section
           data-workflow-canvas
           ref={canvasRef}
@@ -382,7 +385,12 @@ export function WorkflowEditor({
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}
             onInit={setFlowInstance}
-            onNodeClick={(_, node) => setSelectedNodeId(node.id)}
+            onNodeClick={(event, node) => {
+              event.stopPropagation()
+              setSelectedNodeId(node.id)
+            }}
+            onEdgeClick={() => setSelectedNodeId(null)}
+            onPaneClick={() => setSelectedNodeId(null)}
             fitView
             fitViewOptions={fitViewOptions}
             minZoom={0.45}
@@ -406,36 +414,31 @@ export function WorkflowEditor({
           ) : null}
         </section>
       </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize="26%" minSize="18%" maxSize="40%" className="min-h-0">
-        <aside className="h-full min-h-0 overflow-y-auto bg-muted/10">
-          <NodeConfigPanel
-            node={selectedNode}
-            nodeSpec={selectedNodeSpec}
-            availableVariables={availableVariables}
-            onChange={updateNodeData}
-          />
-          {!validation.valid ? (
-            <div className="border-t p-4">
-              <div className="mb-2 text-sm font-medium">流程检查</div>
-              <ul className="space-y-1 text-xs text-destructive">
-                {validation.errors.map((error) => (
-                  <li key={error}>{error}</li>
-                ))}
-              </ul>
-            </div>
-          ) : null}
-          <div className="border-t p-4">
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={() => onDefinitionChange(toApiDefinition(toDraft(nodes, edges)) as AIWorkflowDefinition)}
-            >
-              同步当前流程
-            </Button>
-          </div>
-        </aside>
-      </ResizablePanel>
+      {selectedNode ? (
+        <>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="26%" minSize="18%" maxSize="40%" className="min-h-0">
+            <aside className="h-full min-h-0 overflow-y-auto bg-muted/10">
+              <NodeConfigPanel
+                node={selectedNode}
+                nodeSpec={selectedNodeSpec}
+                availableVariables={availableVariables}
+                onChange={updateNodeData}
+              />
+              {!validation.valid ? (
+                <div className="border-t p-4">
+                  <div className="mb-2 text-sm font-medium">流程检查</div>
+                  <ul className="space-y-1 text-xs text-destructive">
+                    {validation.errors.map((error) => (
+                      <li key={error}>{error}</li>
+                    ))}
+                  </ul>
+                </div>
+              ) : null}
+            </aside>
+          </ResizablePanel>
+        </>
+      ) : null}
     </ResizablePanelGroup>
   )
 }