From 75aaa9a02ef8ee85c589204b3ab359146110ab8d Mon Sep 17 00:00:00 2001 From: ZLY Date: Mon, 1 Sep 2025 17:18:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=20=E6=B7=BB=E5=8A=A0=E7=AD=89?= =?UTF-8?q?=E5=BE=85=E8=8A=82=E7=82=B9=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 实现了等待节点的编辑器组件，包括小时、分钟、秒的选择 - 添加了节点别名和描述的编辑功能 - 优化了节点 footer 的显示逻辑，支持自定义内容- 修复了与门和或门节点不可编辑的问题 --- .../flowEditor/components/nodeContent.tsx | 13 +- src/pages/flowEditor/index.tsx | 2 + .../flowEditor/node/style/base.module.less | 1 + .../nodeEditors/LocalNodeEditor.tsx | 2 +- .../nodeEditors/components/WaitEditor.tsx | 124 ++++++++++++++++-- 5 files changed, 125 insertions(+), 17 deletions(-) diff --git a/src/pages/flowEditor/components/nodeContent.tsx b/src/pages/flowEditor/components/nodeContent.tsx index 996b454..c7b2905 100644 --- a/src/pages/flowEditor/components/nodeContent.tsx +++ b/src/pages/flowEditor/components/nodeContent.tsx @@ -176,12 +176,21 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[] ); }; +// 通过duration计算时分秒 +const formatDuration = (duration: number) => { + const hours = Math.floor(duration / 3600); + const minutes = Math.floor((duration % 3600) / 60); + const seconds = Math.floor(duration % 60); + return `${hours}小时${minutes}分钟${seconds}秒`; +}; + const NodeContent = ({ data }: { data: NodeContentData }) => { const apiIns = data.parameters?.apiIns || []; const apiOuts = data.parameters?.apiOuts || []; const dataIns = data.parameters?.dataIns || []; const dataOuts = data.parameters?.dataOuts || []; - const showFooter = data.showFooter || false; + const showFooter = data?.component?.customDef || false; + const footerData = (showFooter && JSON.parse(data.component?.customDef)) || {}; // 判断节点类型 const isStartNode = data.type === 'start'; @@ -216,7 +225,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => { {/*footer栏*/} {showFooter && (
- 暂定的footer + {formatDuration(footerData.duration)}
)} diff --git a/src/pages/flowEditor/index.tsx b/src/pages/flowEditor/index.tsx index 334aa61..140c085 100644 --- a/src/pages/flowEditor/index.tsx +++ b/src/pages/flowEditor/index.tsx @@ -161,6 +161,8 @@ const FlowEditor: React.FC = () => { // 节点双击处理 const onNodeDoubleClick = useCallback( (event: React.MouseEvent, node: Node) => { + // 与门和或门不可编辑 + if (['AND', 'OR'].includes(node.type)) return; setEditingNode(node); setIsEditModalOpen(true); }, diff --git a/src/pages/flowEditor/node/style/base.module.less b/src/pages/flowEditor/node/style/base.module.less index c677da4..2a94b4c 100644 --- a/src/pages/flowEditor/node/style/base.module.less +++ b/src/pages/flowEditor/node/style/base.module.less @@ -50,5 +50,6 @@ padding: 5px 20px; border-top: 1px solid rgba(204, 204, 204, 0.18); min-height: 20px; + text-align: center; } } \ No newline at end of file diff --git a/src/pages/flowEditor/nodeEditors/LocalNodeEditor.tsx b/src/pages/flowEditor/nodeEditors/LocalNodeEditor.tsx index a759004..b9df0a5 100644 --- a/src/pages/flowEditor/nodeEditors/LocalNodeEditor.tsx +++ b/src/pages/flowEditor/nodeEditors/LocalNodeEditor.tsx @@ -66,7 +66,7 @@ const LocalNodeEditor: React.FC = ({ onChange={(value) => updateNodeData('title', value)} /> - + updateNodeData('description', value)} diff --git a/src/pages/flowEditor/nodeEditors/components/WaitEditor.tsx b/src/pages/flowEditor/nodeEditors/components/WaitEditor.tsx index 2766e32..2634afa 100644 --- a/src/pages/flowEditor/nodeEditors/components/WaitEditor.tsx +++ b/src/pages/flowEditor/nodeEditors/components/WaitEditor.tsx @@ -1,22 +1,118 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { NodeEditorProps } from '@/pages/flowEditor/nodeEditors'; -import { Typography } from '@arco-design/web-react'; -import { IconUnorderedList } from '@arco-design/web-react/icon'; -import ParamsTable from './ParamsTable'; +import { Form, Input, Select } from '@arco-design/web-react'; + +const { Option } = Select; + + +interface DurationType { + hour: number; + minute: number; + second: number; + time: number; +} const WaitEditor: React.FC = ({ nodeData, updateNodeData }) => { + console.log('nodeData:', nodeData); + const hourOptions = Array.from({ length: 23 }, (_, i) => i); + const minuteOptions = Array.from({ length: 59 }, (_, i) => i); + const secondOptions = Array.from({ length: 59 }, (_, i) => i); + const [duration, setDuration] = useState({ + hour: 0, + minute: 0, + second: 0, + time: 0 + }); + + useEffect(() => { + if (nodeData.component.customDef) { + const duration = JSON.parse(nodeData.component.customDef).duration; + setDuration({ + hour: Math.floor(duration / 3600), + minute: Math.floor((duration % 3600) / 60), + second: Math.floor(duration % 60), + time: duration + }); + } + }, [nodeData]); + + const handleChangeDuration = (newDuration: DurationType) => { + const time = (newDuration.hour || 0) * 60 * 60 + (newDuration.minute || 0) * 60 + (newDuration.second || 0); + setDuration({ + ...newDuration, + time + }); + updateNodeData('component', { + customDef: JSON.stringify({ duration: time }), + type: 'WAIT' + }); + }; + return ( <> - 输入参数 - { - updateNodeData('parameters', { - ...nodeData.parameters, - dataIns: data - }); - }} - /> + + updateNodeData('alias', value)} + /> + + + updateNodeData('description', value)} + /> + + +
+ +
时
+ +
分
+ +
秒
+
+ ); };