diff --git a/src/pages/flowEditor/FlowEditorMain.tsx b/src/pages/flowEditor/FlowEditorMain.tsx index b7ff482..d26d233 100644 --- a/src/pages/flowEditor/FlowEditorMain.tsx +++ b/src/pages/flowEditor/FlowEditorMain.tsx @@ -194,9 +194,6 @@ const FlowEditorMain: React.FC = (props) => { ? appRuntimeData[currentAppKey].isRunning : false; - // 在应用编排模式下(useDefault为false)禁用删除功能 - const isDeleteDisabled = currentAppIsRunning; - // 监听自定义事件以隐藏/显示节点 useEffect(() => { const handleToggleNodeVisibility = (event: CustomEvent) => { @@ -334,6 +331,10 @@ const FlowEditorMain: React.FC = (props) => { document.dispatchEvent(event); }, [nodes, edges]); + useEffect(() => { + console.log(useDefault, menu); + }, [useDefault, menu]); + return (
e.preventDefault()} @@ -388,7 +389,7 @@ const FlowEditorMain: React.FC = (props) => { proOptions={{ hideAttribution: true }} // 隐藏水印 nodesConnectable={!currentAppIsRunning} // 运行时禁用节点连接 nodesDraggable={!currentAppIsRunning} // 运行时禁用节点拖拽 - elementsSelectable={!currentAppIsRunning} // 运行时禁用元素选择 + // elementsSelectable={!currentAppIsRunning} // 运行时禁用元素选择 connectOnClick={!currentAppIsRunning} // 运行时禁用点击连接 disableKeyboardA11y={currentAppIsRunning} // 运行时禁用键盘交互 onBeforeDelete={async ({ nodes, edges }) => { @@ -497,10 +498,10 @@ const FlowEditorMain: React.FC = (props) => { connectionLineType={ConnectionLineType.SmoothStep} connectionLineComponent={CustomConnectionLine} onNodeDragStop={!currentAppIsRunning ? onNodeDragStop : undefined} // 运行时禁用节点拖拽停止 - onNodeContextMenu={(!currentAppIsRunning && useDefault) ? onNodeContextMenu : undefined} // 运行时或应用编排模式下禁用节点上下文菜单 + onNodeContextMenu={(useDefault || currentAppIsRunning) ? onNodeContextMenu : undefined} // 应用编排模式下禁用节点上下文菜单,运行时仍可使用 onNodeDoubleClick={!currentAppIsRunning ? onNodeDoubleClick : undefined} // 运行时禁用节点双击 onEdgeContextMenu={(!currentAppIsRunning && useDefault) ? onEdgeContextMenu : undefined} // 运行时或应用编排模式下禁用边上下文菜单 - onPaneClick={!currentAppIsRunning ? onPaneClick : undefined} // 运行时禁用面板点击 + onPaneClick={(useDefault || currentAppIsRunning) ? onPaneClick : undefined} // 运行时禁用面板点击 onPaneContextMenu={(!currentAppIsRunning && useDefault) ? onPaneContextMenu : undefined} // 运行时或应用编排模式下禁用面板上下文菜单 onEdgeMouseEnter={(_event, edge) => { setEdges((eds) => eds.map(e => { @@ -544,8 +545,8 @@ const FlowEditorMain: React.FC = (props) => { - {/*节点右键上下文 - 仅在默认模式且非运行时显示*/} - {!currentAppIsRunning && useDefault && menu && menu.type === 'node' && ( + {/*节点右键上下文 - 在默认模式或运行状态下显示,运行时隐藏编辑复制删除功能*/} + {(useDefault || currentAppIsRunning) && menu && menu.type === 'node' && (
= (props) => { onCopy={copyNode} onCloseMenu={setMenu} onCloseOpenModal={setIsEditModalOpen} + isRunning={currentAppIsRunning} />
)} diff --git a/src/pages/flowEditor/components/nodeContextMenu.tsx b/src/pages/flowEditor/components/nodeContextMenu.tsx index 26b1f37..ab4c053 100644 --- a/src/pages/flowEditor/components/nodeContextMenu.tsx +++ b/src/pages/flowEditor/components/nodeContextMenu.tsx @@ -12,6 +12,7 @@ interface NodeContextMenuProps { onEdit?: (node: Node) => void; onCloseMenu?: (data: React.Dispatch>) => void; onCloseOpenModal?: (boolean: boolean) => void; + isRunning?: boolean; // 运行时隐藏复制、编辑、删除功能 } const NodeContextMenu: React.FC = ({ @@ -20,7 +21,8 @@ const NodeContextMenu: React.FC = ({ onCopy, onEdit, onCloseMenu, - onCloseOpenModal + onCloseOpenModal, + isRunning = false }) => { const handleDelete = () => { onDelete && onDelete(node); @@ -90,25 +92,28 @@ const NodeContextMenu: React.FC = ({ // 对于非开始和结束节点,添加基本操作 if (!['start', 'end'].includes(node?.type)) { - if (!['AND', 'OR', 'JSON2STR', 'STR2JSON', 'IMAGE', 'RESULT', 'LOOP_START'].includes(node.data.type as string)) { + // 运行时隐藏编辑、复制、删除功能 + if (!isRunning) { + if (!['AND', 'OR', 'JSON2STR', 'STR2JSON', 'IMAGE', 'RESULT', 'LOOP_START'].includes(node.data.type as string)) { + menuItems.push( + + 编辑节点 + + ); + } + + menuItems.push( + + 复制节点 + + ); menuItems.push( - - 编辑节点 + + 删除节点 ); } - menuItems.push( - - 复制节点 - - ); - menuItems.push( - - 删除节点 - - ); - // 单步执行 - 仅对事件接收节点显示 if (node.data.type === 'EVENTLISTENE') { menuItems.push(