From 847b3e96c81776c6c5462c22cbe34f0929172ef1 Mon Sep 17 00:00:00 2001
From: adrian <wanghai915@qq.com>
Date: Thu, 1 May 2025 14:10:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0LLMNode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/app/workflow/components/LLMNode.tsx  | 104 ++++++++++++
 .../app/workflow/components/OutputNode.tsx    |  27 +++
 .../app/workflow/components/StartNode.tsx     |  28 ++++
 .../workflow/components/WorkflowSidebar.tsx   |  44 +++++
 frontend/app/workflow/components/types.ts     |  34 ++++
 frontend/app/workflow/page.tsx                | 158 +++++++++---------
 6 files changed, 318 insertions(+), 77 deletions(-)
 create mode 100644 frontend/app/workflow/components/LLMNode.tsx
 create mode 100644 frontend/app/workflow/components/OutputNode.tsx
 create mode 100644 frontend/app/workflow/components/StartNode.tsx
 create mode 100644 frontend/app/workflow/components/WorkflowSidebar.tsx
 create mode 100644 frontend/app/workflow/components/types.ts

diff --git a/frontend/app/workflow/components/LLMNode.tsx b/frontend/app/workflow/components/LLMNode.tsx
new file mode 100644
index 0000000..d9bd6de
--- /dev/null
+++ b/frontend/app/workflow/components/LLMNode.tsx
@@ -0,0 +1,104 @@
+// File: frontend/app/workflow/components/LLMNode.tsx
+// Description: 自定义 LLM 节点组件
+
+import React, { useState, useCallback, useEffect, memo, ChangeEvent } from 'react';
+import { Handle, Position, useUpdateNodeInternals, useReactFlow, Node } from 'reactflow';
+import { BrainCircuit } from 'lucide-react';
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
+import { type LLMNodeData, type CustomNodeProps, availableModels } from './types'; // 导入类型和模型列表
+
+const LLMNodeComponent = ({ id, data, isConnectable }: CustomNodeProps<LLMNodeData>) => {
+//   const [currentData, setCurrentData] = useState<LLMNodeData>(data);
+  const updateNodeInternals = useUpdateNodeInternals();
+  const { setNodes } = useReactFlow<LLMNodeData>(); // 获取 setNodes 方法
+
+  // 从 props 更新内部状态 (如果外部数据变化)
+//   useEffect(() => {
+//       setCurrentData(data);
+//   }, [data]);
+
+  // 处理内部表单变化的通用回调 - 直接更新 React Flow 主状态
+  const handleDataChange = useCallback((key: keyof LLMNodeData, value: any) => {
+    // 使用 setNodes 更新特定节点的数据
+    setNodes((nds: Node<LLMNodeData>[]) => // 显式指定类型
+      nds.map((node) => {
+        if (node.id === id) {
+          // 创建一个新的 data 对象
+          const updatedData = { ...node.data, [key]: value };
+          return { ...node, data: updatedData };
+        }
+        return node;
+      })
+    );
+    console.log(`(LLMNode) Node ${id} data updated:`, { [key]: value });
+  }, [id, setNodes]); // 依赖 id 和 setNodes
+
+  const handleSliderChange = useCallback((value: number[]) => { handleDataChange('temperature', value[0]); }, [handleDataChange]);
+  const handleSelectChange = useCallback((value: string) => { handleDataChange('model', value); }, [handleDataChange]);
+  const handleTextChange = useCallback((event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      const { name, value } = event.target;
+      handleDataChange(name as keyof LLMNodeData, value);
+  }, [handleDataChange]);
+
+  // 检查 inputConnected 状态是否需要更新 (如果外部更新了)
+  // 注意：这个逻辑依赖于父组件正确更新了 data.inputConnected
+  useEffect(() => {
+      // 可以在这里添加逻辑，如果 props.data.inputConnected 和 UI 显示不一致时触发更新
+      // 但通常连接状态由 onConnect/onEdgesChange 在父组件处理更佳
+      // updateNodeInternals(id); // 如果 Handle 显示依赖 inputConnected，可能需要调用
+  }, [data.inputConnected, id, updateNodeInternals]);
+
+  return (
+    // 调整宽度，例如 w-96 (24rem)
+    <div className="react-flow__node react-flow__node-genericNode nopan selected selectable draggable bg-purple-50 dark:bg-gray-800 border border-purple-200 dark:border-gray-700 rounded-lg shadow-lg w-96 overflow-hidden">
+      <div className="bg-purple-100 dark:bg-gray-700 p-3 border-b border-purple-200 dark:border-gray-600">
+        <div className="flex items-center gap-2">
+          <BrainCircuit size={18} className="text-purple-700 dark:text-purple-300" />
+          <strong className="text-purple-800 dark:text-purple-200">LLM 调用</strong>
+        </div>
+         <p className="text-xs text-purple-600 dark:text-purple-400 mt-1">使用大语言模型生成文本</p>
+      </div>
+      <div className="p-4 space-y-3">
+        <div className="relative nodrag">
+            <Label className="text-xs font-semibold text-gray-500 dark:text-gray-400">输入</Label>
+            <Handle type="target" position={Position.Left} id="input-text" isConnectable={isConnectable} className="w-3 h-3 !bg-blue-500 top-1/2" />
+            {/* 直接使用 props.data.inputConnected */}
+            {!data.inputConnected && <p className="text-xs text-gray-400 italic mt-1">连接文本或提示</p>}
+        </div>
+         <div className="nodrag">
+            <Label htmlFor={`systemPrompt-${id}`} className="text-xs font-semibold">系统提示</Label>
+            {/* 直接使用 props.data 和 onChange 回调 */}
+            <Textarea id={`systemPrompt-${id}`} name="systemPrompt" value={data.systemPrompt} onChange={handleTextChange} placeholder="例如：你是一个乐于助人的助手。" className="mt-1 text-xs min-h-[60px] bg-white dark:bg-gray-700" rows={3} />
+         </div>
+         <div className="nodrag">
+            <Label htmlFor={`model-${id}`} className="text-xs font-semibold">模型名称</Label>
+            <Select name="model" value={data.model} onValueChange={handleSelectChange}>
+                <SelectTrigger id={`model-${id}`} className="mt-1 h-8 text-xs bg-white dark:bg-gray-700"><SelectValue placeholder="选择模型" /></SelectTrigger>
+                <SelectContent>{availableModels.map(model => (<SelectItem key={model.value} value={model.value} className="text-xs">{model.label}</SelectItem>))}</SelectContent>
+            </Select>
+         </div>
+         <div className="nodrag">
+            <Label htmlFor={`apiKey-${id}`} className="text-xs font-semibold">API Key (不安全)</Label>
+            <Input id={`apiKey-${id}`} name="apiKey" type="password" value={data.apiKey || ''} onChange={handleTextChange} placeholder="sk-..." className="mt-1 h-8 text-xs bg-white dark:bg-gray-700" />
+            <p className="text-xs text-red-500 mt-1">警告：不建议在此处输入密钥。</p>
+         </div>
+         <div className="nodrag">
+             <Label htmlFor={`temperature-${id}`} className="text-xs font-semibold">温度: {data.temperature?.toFixed(1) ?? 'N/A'}</Label>
+             <Slider id={`temperature-${id}`} min={0} max={1} step={0.1} value={[data.temperature ?? 0.7]} onValueChange={handleSliderChange} className="mt-2" />
+             <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"><span>精确</span><span>创造性</span></div>
+         </div>
+      </div>
+       <div className="relative p-2 border-t border-purple-200 dark:border-gray-600">
+            <Label className="text-xs font-semibold text-gray-500 dark:text-gray-400 block text-right pr-6">输出</Label>
+            <Handle type="source" position={Position.Right} id="output-message" isConnectable={isConnectable} className="w-3 h-3 !bg-green-500 top-1/2" />
+       </div>
+    </div>
+  );
+};
+
+LLMNodeComponent.displayName = 'LLMNode';
+export const LLMNode = memo(LLMNodeComponent);
\ No newline at end of file
diff --git a/frontend/app/workflow/components/OutputNode.tsx b/frontend/app/workflow/components/OutputNode.tsx
new file mode 100644
index 0000000..d0b539f
--- /dev/null
+++ b/frontend/app/workflow/components/OutputNode.tsx
@@ -0,0 +1,27 @@
+// File: frontend/app/workflow/components/OutputNode.tsx
+// Description: 自定义结束节点组件
+
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import { CheckCircle } from 'lucide-react';
+import type { OutputNodeData, CustomNodeProps } from './types'; // 导入类型
+
+const OutputNodeComponent = ({ data }: CustomNodeProps<OutputNodeData>) => {
+  return (
+    <div className="react-flow__node-default bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700 p-4 rounded-lg shadow-md w-40">
+      <Handle
+        type="target"
+        position={Position.Top}
+        id="output-target"
+        className="w-3 h-3 !bg-blue-500"
+      />
+      <div className="flex items-center gap-2 mb-2">
+        <CheckCircle size={16} className="text-blue-700 dark:text-blue-300" />
+        <strong className="text-blue-800 dark:text-blue-200">{data.label || '结束流程'}</strong>
+      </div>
+    </div>
+  );
+};
+
+OutputNodeComponent.displayName = 'OutputNode';
+export const OutputNode = memo(OutputNodeComponent);
\ No newline at end of file
diff --git a/frontend/app/workflow/components/StartNode.tsx b/frontend/app/workflow/components/StartNode.tsx
new file mode 100644
index 0000000..8d8e489
--- /dev/null
+++ b/frontend/app/workflow/components/StartNode.tsx
@@ -0,0 +1,28 @@
+// File: frontend/app/workflow/components/StartNode.tsx
+// Description: 自定义开始节点组件
+
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import { Play } from 'lucide-react';
+import type { StartNodeData, CustomNodeProps } from './types'; // 导入类型
+
+const StartNodeComponent = ({ data }: CustomNodeProps<StartNodeData>) => {
+  return (
+    <div className="react-flow__node-default bg-green-100 dark:bg-green-900 border-green-300 dark:border-green-700 p-4 rounded-lg shadow-md w-40">
+      <div className="flex items-center gap-2 mb-2">
+        <Play size={16} className="text-green-700 dark:text-green-300" />
+        <strong className="text-green-800 dark:text-green-200">{data.label || '开始流程'}</strong>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="start-source"
+        className="w-3 h-3 !bg-green-500"
+      />
+    </div>
+  );
+};
+
+StartNodeComponent.displayName = 'StartNode';
+// 使用 memo 优化
+export const StartNode = memo(StartNodeComponent);
diff --git a/frontend/app/workflow/components/WorkflowSidebar.tsx b/frontend/app/workflow/components/WorkflowSidebar.tsx
new file mode 100644
index 0000000..afe4cb6
--- /dev/null
+++ b/frontend/app/workflow/components/WorkflowSidebar.tsx
@@ -0,0 +1,44 @@
+// File: frontend/app/workflow/components/WorkflowSidebar.tsx
+// Description: 侧边栏组件，用于拖放节点
+
+import React, { DragEvent } from 'react';
+import { MessageSquareText, BrainCircuit, Database, LogOut, Play, CheckCircle } from 'lucide-react';
+
+// 定义可拖拽的节点类型 (从 page.tsx 移动过来)
+const nodeTypesForPalette = [
+    { type: 'startNode', label: '开始流程', icon: Play, defaultData: { label: '开始' } },
+    { type: 'inputNode', label: '文本输入', icon: MessageSquareText, defaultData: { text: '用户输入...' } },
+    { type: 'llmNode', label: 'LLM 调用', icon: BrainCircuit, defaultData: { model: 'gpt-3.5-turbo', temperature: 0.7, systemPrompt: '你是一个乐于助人的 AI 助手。' } },
+    { type: 'ragNode', label: 'RAG 查询', icon: Database, defaultData: { query: '...', knowledgeBase: 'default' } },
+    { type: 'outputNode', label: '结束流程', icon: CheckCircle, defaultData: { label: '结束' } },
+];
+
+
+export const WorkflowSidebar = () => {
+  const onDragStart = (event: DragEvent, nodeType: string, defaultData: any) => {
+    const nodeInfo = JSON.stringify({ nodeType, defaultData });
+    event.dataTransfer.setData('application/reactflow', nodeInfo);
+    event.dataTransfer.effectAllowed = 'move';
+    console.log(`Drag Start: ${nodeType}`);
+  };
+
+  return (
+    <aside className="w-64 bg-white dark:bg-gray-800 p-4 border-r dark:border-gray-700 shadow-md overflow-y-auto flex-shrink-0"> {/* 添加 flex-shrink-0 */}
+      <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">节点面板</h3>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">将节点拖拽到右侧画布</p>
+      <div className="space-y-2">
+        {nodeTypesForPalette.map((nodeInfo) => (
+          <div
+            key={nodeInfo.type}
+            className="p-3 border dark:border-gray-600 rounded-lg cursor-grab flex items-center gap-2 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+            onDragStart={(event) => onDragStart(event, nodeInfo.type, nodeInfo.defaultData)}
+            draggable
+          >
+            <nodeInfo.icon size={18} className="text-gray-600 dark:text-gray-300 flex-shrink-0" />
+            <span className="text-sm text-gray-700 dark:text-gray-200">{nodeInfo.label}</span>
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+};
diff --git a/frontend/app/workflow/components/types.ts b/frontend/app/workflow/components/types.ts
new file mode 100644
index 0000000..70e712f
--- /dev/null
+++ b/frontend/app/workflow/components/types.ts
@@ -0,0 +1,34 @@
+// File: frontend/app/workflow/components/types.ts
+// Description: Shared types for workflow components
+
+import { NodeProps } from 'reactflow';
+
+// 定义 LLM 节点的数据结构
+export interface LLMNodeData {
+  model: string;
+  temperature: number;
+  systemPrompt: string;
+  apiKey?: string;
+  inputConnected?: boolean;
+}
+
+// 定义其他节点可能需要的数据类型
+export interface StartNodeData {
+    label: string;
+}
+
+export interface OutputNodeData {
+    label: string;
+}
+
+// 可以将 NodeProps 包装一下，方便使用
+export type CustomNodeProps<T> = NodeProps<T>;
+
+// 可选的模型列表 (也可以放在这里共享)
+export const availableModels = [
+    { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
+    { value: "gpt-4", label: "GPT-4" },
+    { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
+    { value: "gemini-pro", label: "Gemini Pro" },
+    { value: "deepseek-coder", label: "DeepSeek Coder" },
+];
\ No newline at end of file
diff --git a/frontend/app/workflow/page.tsx b/frontend/app/workflow/page.tsx
index 8f13a24..54d531e 100644
--- a/frontend/app/workflow/page.tsx
+++ b/frontend/app/workflow/page.tsx
@@ -1,9 +1,9 @@
-// File: frontend/app/workflow/page.tsx
-// Description: 工作流编辑器页面，添加侧边栏用于拖放节点
+// File: frontend/app/workflow/page.tsx (更新)
+// Description: 工作流编辑器主页面，引入模块化组件
 
 'use client';
 
-import React, { useState, useCallback, useRef, DragEvent } from 'react'; // 添加 useRef, DragEvent
+import React, { useState, useCallback, useRef, DragEvent, useMemo } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
   MiniMap,
@@ -21,80 +21,93 @@ import ReactFlow, {
   EdgeChange,
   applyNodeChanges,
   applyEdgeChanges,
-  useReactFlow, // 导入 useReactFlow hook
+  useReactFlow,
   XYPosition,
-  BackgroundVariant, // 导入 XYPosition 类型
+  BackgroundVariant,
 } from 'reactflow';
-import { MessageSquareText, BrainCircuit, Database, LogOut, Play } from 'lucide-react'; // 导入一些节点图标
+
+// 引入自定义节点和侧边栏组件
+import { StartNode } from './components/StartNode';
+import { OutputNode } from './components/OutputNode';
+import { LLMNode } from './components/LLMNode';
+import { WorkflowSidebar } from './components/WorkflowSidebar';
+// 引入类型 (如果需要)
+// import type { LLMNodeData } from './components/types';
 
 import 'reactflow/dist/style.css';
 
-// --- 初始节点和边数据 (可以清空或保留示例) ---
+// --- 初始节点和边数据 ---
 const initialNodes: Node[] = [
-//   { id: '1', type: 'inputNode', data: { label: '开始' }, position: { x: 100, y: 100 } },
+  { id: 'start-initial', type: 'startNode', data: { label: '开始' }, position: { x: 150, y: 50 } },
+  {
+    id: 'llm-initial',
+    type: 'llmNode',
+    data: {
+        model: 'gpt-3.5-turbo',
+        temperature: 0.7,
+        systemPrompt: '你是一个乐于助人的 AI 助手。',
+        inputConnected: false,
+        apiKey: '',
+    },
+    position: { x: 350, y: 150 }
+  },
+  { id: 'end-initial', type: 'outputNode', data: { label: '结束' }, position: { x: 650, y: 350 } },
 ];
 const initialEdges: Edge[] = [];
 
-// --- 定义可拖拽的节点类型 ---
-const nodeTypesForPalette = [
-    { type: 'inputNode', label: '输入', icon: MessageSquareText, defaultData: { text: '用户输入...' } },
-    { type: 'llmNode', label: 'LLM 调用', icon: BrainCircuit, defaultData: { model: 'gpt-3.5-turbo', prompt: '...' } },
-    { type: 'ragNode', label: 'RAG 查询', icon: Database, defaultData: { query: '...', knowledgeBase: 'default' } },
-    { type: 'outputNode', label: '输出', icon: LogOut, defaultData: { result: null } },
-    { type: 'startNode', label: '开始流程', icon: Play, defaultData: {} }, // 添加一个开始节点类型
-];
-
-// --- 侧边栏组件 ---
-const Sidebar = () => {
-  // 拖拽开始时设置数据
-  const onDragStart = (event: DragEvent, nodeType: string, defaultData: any) => {
-    // 将节点类型和默认数据存储在 dataTransfer 中
-    const nodeInfo = JSON.stringify({ nodeType, defaultData });
-    event.dataTransfer.setData('application/reactflow', nodeInfo);
-    event.dataTransfer.effectAllowed = 'move';
-    console.log(`Drag Start: ${nodeType}`);
-  };
-
-  return (
-    <aside className="w-64 bg-white dark:bg-gray-800 p-4 border-r dark:border-gray-700 shadow-md overflow-y-auto">
-      <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">节点面板</h3>
-      <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">将节点拖拽到右侧画布</p>
-      <div className="space-y-2">
-        {nodeTypesForPalette.map((nodeInfo) => (
-          <div
-            key={nodeInfo.type}
-            className="p-3 border dark:border-gray-600 rounded-lg cursor-grab flex items-center gap-2 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
-            onDragStart={(event) => onDragStart(event, nodeInfo.type, nodeInfo.defaultData)}
-            draggable // 设置为可拖拽
-          >
-            <nodeInfo.icon size={18} className="text-gray-600 dark:text-gray-300 flex-shrink-0" />
-            <span className="text-sm text-gray-700 dark:text-gray-200">{nodeInfo.label}</span>
-          </div>
-        ))}
-      </div>
-    </aside>
-  );
-};
-
-
 // --- 工作流编辑器组件 ---
 function WorkflowEditor() {
   const reactFlowWrapper = useRef<HTMLDivElement>(null); // Ref 指向 React Flow 容器
-  const [nodes, setNodes] = useState<Node[]>(initialNodes);
-  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const { project } = useReactFlow(); // 使用 hook 获取 project 方法
 
-  const onNodesChange = useCallback(
-    (changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
-    [setNodes]
-  );
-  const onEdgesChange = useCallback(
-    (changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-    [setEdges]
-  );
+  // --- 注册自定义节点类型 ---
+  const nodeTypes = useMemo(() => ({
+    startNode: StartNode,
+    outputNode: OutputNode,
+    llmNode: LLMNode, // LLMNode 现在需要一种方式来调用 updateNodeData
+    // inputNode: CustomInputNode,
+    // ragNode: RAGNode,
+  }), []); // 移除 updateNodeData 依赖，因为它不应该直接传递
+
   const onConnect = useCallback(
-    (connection: Connection) => setEdges((eds) => addEdge({ ...connection, markerEnd: { type: MarkerType.ArrowClosed } }, eds)),
-    [setEdges]
+    (connection: Connection) => {
+        setEdges((eds) => addEdge({ ...connection, markerEnd: { type: MarkerType.ArrowClosed } }, eds));
+        if (connection.targetHandle === 'input-text' && connection.target) {
+             setNodes((nds) =>
+                nds.map((node) => {
+                    if (node.id === connection.target) {
+                        return { ...node, data: { ...node.data, inputConnected: true } };
+                    }
+                    return node;
+                })
+            );
+        }
+    },
+    [setEdges, setNodes] // 保持 updateNodeData 依赖
+  );
+  
+  const onEdgesChangeIntercepted = useCallback(
+    (changes: EdgeChange[]) => {
+      changes.forEach(change => {
+        if (change.type === 'remove') {
+          const edgeToRemove = edges.find(edge => edge.id === change.id);
+          if (edgeToRemove?.targetHandle === 'input-text' && edgeToRemove.target) {
+             setNodes((nds) =>
+                nds.map((node) => {
+                    if (node.id === edgeToRemove.target) {
+                        return { ...node, data: { ...node.data, inputConnected: false } };
+                    }
+                    return node;
+                })
+            );
+          }
+        }
+      });
+      onEdgesChange(changes);
+    },
+    [edges, onEdgesChange, setNodes] // 保持 updateNodeData 依赖
   );
 
   // 处理画布上的拖拽悬停事件
@@ -146,10 +159,10 @@ function WorkflowEditor() {
         id: `${nodeType}-${Date.now()}`, // 使用更唯一的 ID
         type: nodeType, // 设置节点类型
         position,
-        data: { label: `${nodeType} node`, ...defaultData }, // 合并默认数据
+        data: { label: defaultData?.label || `${nodeType} node`, ...defaultData },
         // 根据节点类型设置 Handle 位置 (可选，也可以在自定义节点内部定义)
-        sourcePosition: Position.Bottom,
-        targetPosition: Position.Top,
+        // sourcePosition: Position.Bottom,
+        // targetPosition: Position.Top,
       };
 
       console.log('Node dropped:', newNode);
@@ -159,15 +172,6 @@ function WorkflowEditor() {
     [project, setNodes] // 依赖 project 方法和 setNodes
   );
 
-  // --- (可选) 注册自定义节点类型 ---
-  // const nodeTypes = useMemo(() => ({
-  //   inputNode: CustomInputNode,
-  //   llmNode: LLMNode,
-  //   ragNode: RAGNode,
-  //   outputNode: CustomOutputNode,
-  //   startNode: StartNode,
-  // }), []);
-
   return (
     <div className="flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
       <h1 className="text-xl font-semibold p-4 border-b dark:border-gray-700 text-gray-800 dark:text-gray-200">
@@ -176,18 +180,18 @@ function WorkflowEditor() {
       {/* 主容器使用 Flexbox */}
       <div className="flex flex-1 overflow-hidden">
         {/* 侧边栏 */}
-        <Sidebar />
+        <WorkflowSidebar />
         {/* React Flow 画布容器 */}
         <div className="flex-1 h-full" ref={reactFlowWrapper}> {/* 添加 ref */}
           <ReactFlow
             nodes={nodes}
             edges={edges}
             onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
+            onEdgesChange={onEdgesChangeIntercepted}
             onConnect={onConnect}
             onDragOver={onDragOver} // 添加 onDragOver
             onDrop={onDrop}         // 添加 onDrop
-            // nodeTypes={nodeTypes}
+            nodeTypes={nodeTypes} // <--- 传递自定义节点类型
             fitView
             className="bg-gray-50 dark:bg-gray-900"
           >