重构消息通知弹窗

frontend/src/pages/Workflow/Design/components/FlowCanvas.tsx

@@ -10,7 +10,8 @@ import {
     Connection,
     Edge,
     BackgroundVariant,
-    Panel
+    Panel,
+    reconnectEdge
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
@@ -150,6 +151,11 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
         });
     }, [nodes, setEdges]);
 
+    // 处理边重连
+    const onReconnect = useCallback((oldEdge: Edge, newConnection: Connection) => {
+        setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
+    }, [setEdges]);
+
     // 处理连接
     const onConnect = useCallback(
         (params: Connection | Edge) => {
@@ -269,6 +275,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
                 onNodesChange={handleNodesChange}
                 onEdgesChange={handleEdgesChange}
                 onConnect={onConnect}
+                onReconnect={onReconnect}
                 onNodeClick={onNodeClick}
                 onEdgeClick={onEdgeClick}
                 onDrop={handleDrop}
@@ -283,6 +290,8 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
                     style: { stroke: '#94a3b8', strokeWidth: 2 },
                     markerEnd: { type: 'arrowclosed', color: '#94a3b8' },
                 }}
+                edgesReconnectable={true}
+                reconnectRadius={20}
                 fitView
                 fitViewOptions={{
                     padding: 0.1,