1

frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx

@@ -226,6 +226,42 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
             },
         });
 
+        // 添加拖拽事件处理
+        const container = containerRef.current;
+        container.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+
+        container.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const nodeTypeData = e.dataTransfer?.getData('nodeType');
+            if (!nodeTypeData) return;
+
+            try {
+                const nodeType = JSON.parse(nodeTypeData);
+                const { clientX, clientY } = e;
+                const { left, top } = container.getBoundingClientRect();
+                const x = clientX - left;
+                const y = clientY - top;
+
+                // 创建节点
+                const node = graph.addNode({
+                    shape: nodeType.code,
+                    x,
+                    y,
+                    data: {
+                        type: nodeType.code
+                    }
+                });
+
+                // 触发更新
+                const updateEvent = new Event('node:moved');
+                container.dispatchEvent(updateEvent);
+            } catch (error) {
+                console.error('创建节点失败:', error);
+            }
+        });
+
         // 监听事件
         if (!readOnly) {
             let updateTimer: number | null = null;
@@ -388,6 +424,9 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
         graphRef.current = graph;
 
         return () => {
+            // 清理事件监听
+            container.removeEventListener('dragover', (e) => e.preventDefault());
+            container.removeEventListener('drop', (e) => e.preventDefault());
             graph.dispose();
         };
     }, [nodeTypes, value, onChange, readOnly]);
@@ -414,7 +453,11 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
                     ))}
                 </Card>
             </div>
-            <div className={styles.canvas} ref={containerRef} />
+            <div 
+                className={styles.canvas} 
+                ref={containerRef}
+                style={{ minHeight: '600px' }}
+            />
         </div>
     );
 };