From 79c9804dbd34b64ddec382572ca0b4482cfbede8 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Mon, 20 Oct 2025 17:50:37 +0800 Subject: [PATCH] 1 --- .../Design/components/NodeConfigModal.tsx | 10 ++--- .../Workflow/Design/hooks/useWorkflowData.ts | 2 +- .../Design/hooks/useWorkflowModals.ts | 4 +- frontend/src/pages/Workflow/Design/index.less | 2 +- .../Design/nodes/definitions/EndEventNode.ts | 6 +-- .../nodes/definitions/StartEventNode.ts | 6 +-- .../src/pages/Workflow/Design/nodes/types.ts | 2 +- .../pages/Workflow/Design/utils/nodeUtils.ts | 41 +++++++------------ 8 files changed, 31 insertions(+), 42 deletions(-) diff --git a/frontend/src/pages/Workflow/Design/components/NodeConfigModal.tsx b/frontend/src/pages/Workflow/Design/components/NodeConfigModal.tsx index fb180213..a1b2506d 100644 --- a/frontend/src/pages/Workflow/Design/components/NodeConfigModal.tsx +++ b/frontend/src/pages/Workflow/Design/components/NodeConfigModal.tsx @@ -21,7 +21,7 @@ interface NodeConfigModalProps { } interface FormData { - config?: Record; + configs?: Record; inputMapping?: Record; outputMapping?: Record; } @@ -55,7 +55,7 @@ const NodeConfigModal: React.FC = ({ // 合并默认值和已保存的配置 setFormData({ - config: { ...defaultConfig, ...(nodeData.config || {}) }, + configs: { ...defaultConfig, ...(nodeData.configs || {}) }, inputMapping: nodeData.inputMapping || {}, outputMapping: nodeData.outputMapping || {}, }); @@ -71,7 +71,7 @@ const NodeConfigModal: React.FC = ({ const handleConfigChange = (values: Record) => { setFormData(prev => ({ ...prev, - config: values + configs: values })); }; @@ -101,10 +101,10 @@ const NodeConfigModal: React.FC = ({ children: (
handleConfigChange(allValues)} submitter={false} /> diff --git a/frontend/src/pages/Workflow/Design/hooks/useWorkflowData.ts b/frontend/src/pages/Workflow/Design/hooks/useWorkflowData.ts index e6273674..eed32336 100644 --- a/frontend/src/pages/Workflow/Design/hooks/useWorkflowData.ts +++ b/frontend/src/pages/Workflow/Design/hooks/useWorkflowData.ts @@ -178,7 +178,7 @@ export const useWorkflowData = () => { nodeType: nodeData.nodeType, nodeName: nodeData.nodeName, position, // 只保存位置信息 - config: nodeData.config || {}, // 节点配置数据 + configs: nodeData.configs || {}, // 节点配置数据 inputMapping: nodeData.inputMapping || {}, // 输入映射数据 outputMapping: nodeData.outputMapping || {} // 输出映射数据 }; diff --git a/frontend/src/pages/Workflow/Design/hooks/useWorkflowModals.ts b/frontend/src/pages/Workflow/Design/hooks/useWorkflowModals.ts index 7a764ade..4f44ee98 100644 --- a/frontend/src/pages/Workflow/Design/hooks/useWorkflowModals.ts +++ b/frontend/src/pages/Workflow/Design/hooks/useWorkflowModals.ts @@ -40,8 +40,8 @@ export const useWorkflowModals = () => { selectedNode.setData(updatedData); // 更新节点显示名称（如果配置中有nodeName） - if (formData.config?.nodeName) { - selectedNode.attr('label/text', formData.config.nodeName); + if (formData.configs?.nodeName) { + selectedNode.attr('label/text', formData.configs.nodeName); } setConfigModalVisible(false); diff --git a/frontend/src/pages/Workflow/Design/index.less b/frontend/src/pages/Workflow/Design/index.less index 45bc6be0..5de6f13b 100644 --- a/frontend/src/pages/Workflow/Design/index.less +++ b/frontend/src/pages/Workflow/Design/index.less @@ -133,7 +133,7 @@ } .x6-node-selected { - rect { + rect, ellipse { stroke: #1890ff; stroke-width: 2px; } diff --git a/frontend/src/pages/Workflow/Design/nodes/definitions/EndEventNode.ts b/frontend/src/pages/Workflow/Design/nodes/definitions/EndEventNode.ts index 2dad6b9a..45ffb3ed 100644 --- a/frontend/src/pages/Workflow/Design/nodes/definitions/EndEventNode.ts +++ b/frontend/src/pages/Workflow/Design/nodes/definitions/EndEventNode.ts @@ -13,10 +13,10 @@ export const EndEventNode: BaseNodeDefinition = { // UI 配置 - 节点在画布上的显示样式（现代化设计） uiConfig: { - shape: 'circle', + shape: 'ellipse', size: { - width: 60, - height: 60 + width: 80, + height: 50 }, style: { fill: '#f5222d', diff --git a/frontend/src/pages/Workflow/Design/nodes/definitions/StartEventNode.ts b/frontend/src/pages/Workflow/Design/nodes/definitions/StartEventNode.ts index 9e09e7c5..ce6e6194 100644 --- a/frontend/src/pages/Workflow/Design/nodes/definitions/StartEventNode.ts +++ b/frontend/src/pages/Workflow/Design/nodes/definitions/StartEventNode.ts @@ -13,10 +13,10 @@ export const StartEventNode: BaseNodeDefinition = { // UI 配置 - 节点在画布上的显示样式（现代化设计） uiConfig: { - shape: 'circle', + shape: 'ellipse', size: { - width: 60, - height: 60 + width: 80, + height: 50 }, style: { fill: '#52c41a', diff --git a/frontend/src/pages/Workflow/Design/nodes/types.ts b/frontend/src/pages/Workflow/Design/nodes/types.ts index 120706bf..2062f387 100644 --- a/frontend/src/pages/Workflow/Design/nodes/types.ts +++ b/frontend/src/pages/Workflow/Design/nodes/types.ts @@ -62,7 +62,7 @@ export interface PortGroups { out?: PortConfig; } -export type NodeShape = 'rect' | 'circle' | 'diamond'; +export type NodeShape = 'rect' | 'circle' | 'ellipse' | 'polygon'; export interface NodeStyle { fill: string; diff --git a/frontend/src/pages/Workflow/Design/utils/nodeUtils.ts b/frontend/src/pages/Workflow/Design/utils/nodeUtils.ts index 860d2460..1f5c533c 100644 --- a/frontend/src/pages/Workflow/Design/utils/nodeUtils.ts +++ b/frontend/src/pages/Workflow/Design/utils/nodeUtils.ts @@ -11,17 +11,9 @@ export const createNodeFromDefinition = ( ) => { const {uiConfig} = nodeDefinition; - // 根据形状类型设置正确的 shape - let shape = 'rect'; - if (uiConfig.shape === 'circle') { - shape = 'circle'; - } else if (uiConfig.shape === 'diamond') { - shape = 'polygon'; - } - - // 创建节点配置 + // 创建节点配置 - 直接使用X6原生形状名称 const nodeConfig = { - shape, + shape: uiConfig.shape, x: position.x, y: position.y, width: uiConfig.size.width, @@ -29,7 +21,7 @@ export const createNodeFromDefinition = ( attrs: { body: { ...uiConfig.style, - ...(uiConfig.shape === 'diamond' ? { + ...(uiConfig.shape === 'polygon' ? { refPoints: '0,10 10,0 20,10 10,20', } : {}) }, @@ -46,7 +38,11 @@ export const createNodeFromDefinition = ( data: { nodeType: nodeDefinition.nodeType, nodeCode: nodeDefinition.nodeCode, - nodeName: nodeDefinition.nodeName + nodeName: nodeDefinition.nodeName, + // 新创建的节点，configs等数据为空 + configs: {}, + inputMapping: {}, + outputMapping: {} } }; @@ -64,18 +60,10 @@ export const restoreNodeFromData = ( // 从节点定义中获取UI配置，兼容旧数据中的uiConfig const uiConfig = nodeData.uiConfig || nodeDefinition.uiConfig; - // 根据形状类型设置正确的 shape - let shape = 'rect'; - if (uiConfig.shape === 'circle') { - shape = 'circle'; - } else if (uiConfig.shape === 'diamond') { - shape = 'polygon'; - } - - // 创建节点配置 + // 创建节点配置 - 直接使用X6原生形状名称 const nodeConfig = { id: nodeData.nodeCode, // 使用保存的ID - shape, + shape: uiConfig.shape, x: nodeData.position.x, y: nodeData.position.y, width: uiConfig.size.width, @@ -83,7 +71,7 @@ export const restoreNodeFromData = ( attrs: { body: { ...uiConfig.style, - ...(uiConfig.shape === 'diamond' ? { + ...(uiConfig.shape === 'polygon' ? { refPoints: '0,10 10,0 20,10 10,20', } : {}) }, @@ -101,9 +89,10 @@ export const restoreNodeFromData = ( nodeType: nodeData.nodeType, nodeCode: nodeData.nodeCode, nodeName: nodeData.nodeName, - configs: nodeData.configs, - inputMapping: nodeData.inputMapping, - outputMapping: nodeData.outputMapping + // 统一使用configs字段名 + configs: nodeData.configs || {}, + inputMapping: nodeData.inputMapping || {}, + outputMapping: nodeData.outputMapping || {} } };