1

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

@@ -1,5 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
-import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from '@xyflow/react';
+import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
+import type { FlowNode } from '../types';
+import { convertToDisplayName } from '@/utils/workflow/variableConversion';
 
 /**
  * 自定义边组件
@@ -19,6 +21,17 @@ const CustomEdge: React.FC<EdgeProps> = ({
     selected,
 }) => {
     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 [edgePath, labelX, labelY] = getSmoothStepPath({
         sourceX,
@@ -37,11 +50,12 @@ const CustomEdge: React.FC<EdgeProps> = ({
         transition: 'all 0.2s ease',
     };
 
-    const markerEndStyle = selected 
+    const markerEndStyle = (() => {
-        ? { ...markerEnd, color: '#3b82f6' }
+        if (!markerEnd || typeof markerEnd !== 'object') return markerEnd;
-        : isHovered
+        if (selected) return { ...markerEnd, color: '#3b82f6' };
-        ? { ...markerEnd, color: '#64748b' }
+        if (isHovered) return { ...markerEnd, color: '#64748b' };
-        : markerEnd;
+        return markerEnd;
+    })();
 
     return (
         <>
@@ -64,7 +78,7 @@ const CustomEdge: React.FC<EdgeProps> = ({
             />
 
             {/* 边标签 */}
-            {label && (
+            {displayLabel && (
                 <EdgeLabelRenderer>
                     <div
                         style={{
@@ -85,7 +99,7 @@ const CustomEdge: React.FC<EdgeProps> = ({
                         onMouseEnter={() => setIsHovered(true)}
                         onMouseLeave={() => setIsHovered(false)}
                     >
-                        {label}
+                        {displayLabel}
                     </div>
                 </EdgeLabelRenderer>
             )}

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

@@ -91,10 +91,8 @@ const EdgeConfigModal: React.FC<EdgeConfigModalProps> = ({
             form.reset(values);
             setConditionType(values.type);
         }
-        // visible, edge.id, 和 allNodes.length 改变时重置表单
-        // 使用 allNodes.length 而不是 allNodes，避免引用变化导致的频繁重置
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible, edge?.id, allNodes.length]);
+    }, [visible, edge?.id]);
 
     const handleSubmit = (values: EdgeConditionFormValues) => {
         if (!edge) return;