diff --git a/frontend/src/pages/Workflow/Design/components/CustomEdge.tsx b/frontend/src/pages/Workflow/Design/components/CustomEdge.tsx index 8e173d96..98ef6307 100644 --- a/frontend/src/pages/Workflow/Design/components/CustomEdge.tsx +++ b/frontend/src/pages/Workflow/Design/components/CustomEdge.tsx @@ -1,5 +1,7 @@ -import React, { useState } from 'react'; -import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from '@xyflow/react'; +import React, { useState, useMemo } from '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 = ({ 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 = ({ transition: 'all 0.2s ease', }; - const markerEndStyle = selected - ? { ...markerEnd, color: '#3b82f6' } - : isHovered - ? { ...markerEnd, color: '#64748b' } - : markerEnd; + const markerEndStyle = (() => { + if (!markerEnd || typeof markerEnd !== 'object') return markerEnd; + if (selected) return { ...markerEnd, color: '#3b82f6' }; + if (isHovered) return { ...markerEnd, color: '#64748b' }; + return markerEnd; + })(); return ( <> @@ -64,7 +78,7 @@ const CustomEdge: React.FC = ({ /> {/* 边标签 */} - {label && ( + {displayLabel && (
= ({ onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > - {label} + {displayLabel}
)} diff --git a/frontend/src/pages/Workflow/Design/components/EdgeConfigModal.tsx b/frontend/src/pages/Workflow/Design/components/EdgeConfigModal.tsx index f1c23e1d..03343fcd 100644 --- a/frontend/src/pages/Workflow/Design/components/EdgeConfigModal.tsx +++ b/frontend/src/pages/Workflow/Design/components/EdgeConfigModal.tsx @@ -91,10 +91,8 @@ const EdgeConfigModal: React.FC = ({ 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;