feat(flowEditor): 优化连接线展示并添加数据展示功能

- 重构 CustomEdge 组件，更名为 DataDisplayEdge，用于展示数据信息
- 新增 CustomConnectionLine组件，用于自定义连接线样式
- 在 FlowEditor 组件中集成新组件和功能
- 优化连接线类型和展示效果

src/pages/flowEditor/components/customConnectionLine.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { getBezierPath } from '@xyflow/react';
+
+const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => {
+  useEffect(() => {
+    console.log('fromNode', fromNode);
+  }, [fromNode]);
+  const [path] = getBezierPath({
+    sourceX: fromX,
+    sourceY: fromY,
+    targetX: toX,
+    targetY: toY,
+    curvature: 0.2// 调整这个值可以改变曲线的弯曲程度
+  });
+
+  return (
+    <g>
+      <path
+        d={path}
+        stroke="#b1b1b7"
+        strokeWidth={1}
+        className="animated-stroke"
+        fill="none"
+      />
+      {/*TODO 临时定义，后续等接口字段。 存在事件信息的时候才展示连接提示*/}
+      {fromNode.data.eventData && (
+        <text x={(fromX + toX) / 2} y={(fromY + toY) / 2 - 10} fill="#000" fontSize={12}>
+          正在连接...
+        </text>
+      )}
+    </g>
+  );
+};
+
+export default CustomConnectionLine;

src/pages/flowEditor/components/customEdge.tsx

@@ -2,19 +2,24 @@ import React from 'react';
 import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
 import EdgeAddNodeButton from '@/pages/flowEditor/components/edgeAddNodeButton';
 
-const CustomEdge: React.FC<EdgeProps> = ({
+type DataDisplayEdgeData = {
-  id,
+  label?: string;
-  sourceX,
+  value?: any;
-  sourceY,
+};
-  targetX,
+
-  targetY,
+const DataDisplayEdge: React.FC<EdgeProps> = ({
-  sourcePosition,
+                                                id,
-  targetPosition,
+                                                sourceX,
-  style = {},
+                                                sourceY,
-  markerEnd,
+                                                targetX,
-  selected,
+                                                targetY,
-  data
+                                                sourcePosition,
-}) => {
+                                                targetPosition,
+                                                style = {},
+                                                markerEnd,
+                                                selected,
+                                                data
+                                              }) => {
   const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -22,12 +27,15 @@ const CustomEdge: React.FC<EdgeProps> = ({
     targetX,
     targetY,
     targetPosition,
-    borderRadius: 8, // 设置圆角半径
+    borderRadius: 8 // 设置圆角半径
   });
 
   // 从数据中获取悬停状态
   const hovered = data?.hovered || false;
 
+  // 从数据中获取要显示的信息
+  const displayData: DataDisplayEdgeData = data?.displayData || {};
+
   // 使用useReactFlow钩子获取setEdges方法
   const { setEdges } = useReactFlow();
 
@@ -50,6 +58,10 @@ const CustomEdge: React.FC<EdgeProps> = ({
     }));
   };
 
+  const handleDataClick = (e) => {
+    console.log('click:', e);
+  };
+
   return (
     <>
       <BaseEdge
@@ -71,6 +83,37 @@ const CustomEdge: React.FC<EdgeProps> = ({
           }}
           className="nodrag nopan"
         >
+          {/* 数据展示框 */}
+          {displayData && Object.keys(displayData).length > 0 && (
+            <div
+              onClick={(e) => handleDataClick(e)}
+              style={{
+                background: '#ffffff',
+                border: '1px solid #ddd',
+                borderRadius: 4,
+                padding: 4,
+                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                minWidth: 100,
+                marginBottom: 4,
+                fontSize: 12,
+                textAlign: 'center'
+              }}
+            >
+              {displayData.label && (
+                <div style={{ fontWeight: 'bold', marginBottom: 2 }}>
+                  {displayData.label}
+                </div>
+              )}
+              {displayData.value !== undefined && (
+                <div>
+                  {typeof displayData.value === 'object'
+                    ? JSON.stringify(displayData.value)
+                    : String(displayData.value)}
+                </div>
+              )}
+            </div>
+          )}
+
           {hovered && (
             <EdgeAddNodeButton
               onClick={(e) => handleEdgeAddNode(e)}
@@ -82,4 +125,4 @@ const CustomEdge: React.FC<EdgeProps> = ({
   );
 };
 
-export default CustomEdge;
+export default DataDisplayEdge;

src/pages/flowEditor/index.tsx

@@ -14,7 +14,8 @@ import {
   EdgeTypes,
   SelectionMode,
   useStoreApi,
-  Panel
+  Panel,
+  ConnectionLineType
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { Button, Modal } from '@arco-design/web-react';
@@ -24,6 +25,7 @@ import { convertFlowData } from '@/utils/convertFlowData';
 import { exampleFlowData } from '@/pages/flowEditor/test/exampleFlowData';
 import LocalNode from '@/pages/flowEditor/node/localNode/LocalNode';
 import CustomEdge from './components/customEdge';
+import CustomConnectionLine from './components/customConnectionLine';
 import NodeContextMenu from './components/nodeContextMenu';
 import EdgeContextMenu from './components/edgeContextMenu';
 import PaneContextMenu from './components/paneContextMenu';
@@ -193,6 +195,14 @@ const FlowEditor: React.FC = () => {
         return;
       }
 
+      // TODO 目前是临时定义，存在事件数据的时候才展示
+      // params.data = {
+      //   displayData: {
+      //     label: '测试',
+      //     value: '数据展示'
+      //   }
+      // };
+
       // 如果验证通过，创建连接
       setEdges((edgesSnapshot) => addEdge({ ...params, type: 'custom' }, edgesSnapshot));
     },
@@ -628,6 +638,8 @@ const FlowEditor: React.FC = () => {
         onDrop={onDrop}
         onDragOver={onDragOver}
         onNodeDrag={onNodeDrag}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        connectionLineComponent={CustomConnectionLine}
         onNodeDragStop={onNodeDragStop}
         onNodeContextMenu={onNodeContextMenu}
         onEdgeContextMenu={onEdgeContextMenu}