重构消息通知弹窗

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

@@ -0,0 +1,88 @@
+import React, { useState, useMemo } from 'react';
+import { EdgeLabelRenderer, EdgeProps, useReactFlow } from '@xyflow/react';
+import { SmartStepEdge as BaseSmartEdge } from '@tisoap/react-flow-smart-edge';
+import type { FlowNode } from '../types';
+import { convertToDisplayName } from '@/utils/workflow/variableConversion';
+
+/**
+ * 智能边组件 - 自动避开节点（基于 SmartStepEdge）
+ * 使用 react-flow-smart-edge 实现智能路由避障，采用直角路径
+ */
+const SmartEdge: React.FC<EdgeProps> = (props) => {
+    const {
+        id,
+        label,
+        selected,
+        style = {},
+        markerEnd,
+    } = props;
+
+    const [isHovered, setIsHovered] = useState(false);
+    const { getNodes } = useReactFlow();
+
+    // 将 label 中的 UUID 转换为节点名
+    const displayLabel = useMemo(() => {
+        if (!label || typeof label !== 'string') {
+            return label;
+        }
+
+        const allNodes = getNodes() as FlowNode[];
+        return convertToDisplayName(label, allNodes);
+    }, [label, getNodes]);
+
+    // 增强样式
+    const enhancedStyle = {
+        ...style,
+        stroke: selected ? '#3b82f6' : isHovered ? '#64748b' : '#94a3b8',
+        strokeWidth: selected ? 3 : isHovered ? 2.5 : 2,
+        transition: 'all 0.2s ease',
+    };
+
+    const enhancedMarkerEnd = (() => {
+        if (!markerEnd || typeof markerEnd !== 'object') return markerEnd;
+        const markerObj = markerEnd as Record<string, any>;
+        if (selected) return { ...markerObj, color: '#3b82f6' };
+        if (isHovered) return { ...markerObj, color: '#64748b' };
+        return markerEnd;
+    })();
+
+    return (
+        <>
+            {/* 使用 SmartStepEdge 作为基础（直角路径） */}
+            <BaseSmartEdge
+                {...props}
+                style={enhancedStyle}
+                markerEnd={enhancedMarkerEnd as any}
+            />
+
+            {/* 自定义标签（如果有） */}
+            {displayLabel && (
+                <EdgeLabelRenderer>
+                    <div
+                        data-edge-id={id}
+                        style={{
+                            position: 'absolute',
+                            fontSize: '12px',
+                            fontWeight: '500',
+                            color: selected ? '#3b82f6' : '#64748b',
+                            background: 'white',
+                            padding: '4px 10px',
+                            borderRadius: '6px',
+                            border: `1px solid ${selected ? '#3b82f6' : '#e5e7eb'}`,
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
+                            pointerEvents: 'all',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                        }}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                    >
+                        {displayLabel}
+                    </div>
+                </EdgeLabelRenderer>
+            )}
+        </>
+    );
+};
+
+export default SmartEdge;