From 09fe61e9a6d7cfd82a9629ba70f0242850fa3e8d Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 14 Nov 2025 18:08:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B6=88=E6=81=AF=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Workflow/Design/components/SmartEdge.tsx  | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 frontend/src/pages/Workflow/Design/components/SmartEdge.tsx

diff --git a/frontend/src/pages/Workflow/Design/components/SmartEdge.tsx b/frontend/src/pages/Workflow/Design/components/SmartEdge.tsx
new file mode 100644
index 00000000..ee972bc0
--- /dev/null
+++ b/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;