diff --git a/src/components/FlowEditor/NodeStatusIndicator.tsx b/src/components/FlowEditor/NodeStatusIndicator.tsx index d3a1350..0a95819 100644 --- a/src/components/FlowEditor/NodeStatusIndicator.tsx +++ b/src/components/FlowEditor/NodeStatusIndicator.tsx @@ -1,12 +1,16 @@ import React from 'react'; -import { NodeProps, useStore } from '@xyflow/react'; import styles from './node/style/baseOther.module.less'; // 定义节点状态类型 export type NodeStatus = 'waiting' | 'running' | 'success' | 'failed'; // 节点状态指示器组件 -const NodeStatusIndicator: React.FC<{ status: NodeStatus }> = ({ status }) => { +const NodeStatusIndicator: React.FC<{ status: NodeStatus, isVisible: boolean }> = ({ status, isVisible }) => { + // 如果不可见,不渲染任何内容 + if (!isVisible) { + return null; + } + // 根据状态返回相应的指示器样式 const getStatusIndicator = () => { switch (status) { diff --git a/src/components/FlowEditor/node/appNode/AppNode.tsx b/src/components/FlowEditor/node/appNode/AppNode.tsx index 5dcee09..707060e 100644 --- a/src/components/FlowEditor/node/appNode/AppNode.tsx +++ b/src/components/FlowEditor/node/appNode/AppNode.tsx @@ -17,12 +17,17 @@ const AppNode = ({ data, id }: { data: any; id: string }) => { const nodeStatus: NodeStatus = useFlowStore((state) => (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting' ); + + // 获取运行状态可见性 + const isStatusVisible = useFlowStore((state) => + !!state.nodeLookup.get(id)?.data?.isStatusVisible + ); return (
{title} - +
diff --git a/src/components/FlowEditor/node/basicNode/BasicNode.tsx b/src/components/FlowEditor/node/basicNode/BasicNode.tsx index 22912c2..bbf834e 100644 --- a/src/components/FlowEditor/node/basicNode/BasicNode.tsx +++ b/src/components/FlowEditor/node/basicNode/BasicNode.tsx @@ -14,15 +14,20 @@ const BasicNode = ({ data, id }: { data: any; id: string }) => { ); // 获取节点运行状态 - const nodeStatus: NodeStatus = useFlowStore((state) => + const nodeStatus: NodeStatus = useFlowStore((state) => (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting' ); + + // 获取运行状态可见性 + const isStatusVisible = useFlowStore((state) => + !!state.nodeLookup.get(id)?.data?.isStatusVisible + ); return (
{title} - +
diff --git a/src/components/FlowEditor/node/endNode/EndNode.tsx b/src/components/FlowEditor/node/endNode/EndNode.tsx index 48bfae1..55d60f9 100644 --- a/src/components/FlowEditor/node/endNode/EndNode.tsx +++ b/src/components/FlowEditor/node/endNode/EndNode.tsx @@ -18,12 +18,17 @@ const EndNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => { const nodeStatus: NodeStatus = useFlowStore((state) => (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting' ); + + // 获取运行状态可见性 + const isStatusVisible = useFlowStore((state) => + !!state.nodeLookup.get(id)?.data?.isStatusVisible + ); return (
{title} - +
diff --git a/src/components/FlowEditor/node/localNode/LocalNode.tsx b/src/components/FlowEditor/node/localNode/LocalNode.tsx index 0d543f3..8d6775d 100644 --- a/src/components/FlowEditor/node/localNode/LocalNode.tsx +++ b/src/components/FlowEditor/node/localNode/LocalNode.tsx @@ -70,13 +70,18 @@ const LocalNode = ({ data, id }: { data: any; id: string }) => { const nodeStatus: NodeStatus = useFlowStore((state) => (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting' ); + + // 获取运行状态可见性 + const isStatusVisible = useFlowStore((state) => + !!state.nodeLookup.get(id)?.data?.isStatusVisible + ); return (
{setIcon(data.type)} {title} - +
diff --git a/src/components/FlowEditor/node/startNode/StartNode.tsx b/src/components/FlowEditor/node/startNode/StartNode.tsx index 986a528..97417b9 100644 --- a/src/components/FlowEditor/node/startNode/StartNode.tsx +++ b/src/components/FlowEditor/node/startNode/StartNode.tsx @@ -18,12 +18,17 @@ const StartNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => { const nodeStatus: NodeStatus = useFlowStore((state) => (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting' ); + + // 获取运行状态可见性 + const isStatusVisible = useFlowStore((state) => + !!state.nodeLookup.get(id)?.data?.isStatusVisible + ); return (
{title} - +
diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 1873399..5e16544 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -15,7 +15,7 @@ import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData'; import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines'; import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode'; import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode'; -import { updateCanvasDataMap, resetNodeStatus } from '@/store/ideContainer'; +import { updateCanvasDataMap, resetNodeStatus, updateIsRunning } from '@/store/ideContainer'; import { validateAllNodes, showValidationErrors, @@ -919,13 +919,36 @@ export const useFlowCallbacks = ( socketId }; runMainFlow(params); - + + // 设置运行状态为true + dispatch(updateIsRunning(true)); + // 重置节点状态 dispatch(resetNodeStatus()); - + + // 开始运行时动画 + setEdges((eds) => eds.map(edge => ({ + ...edge, + data: { + ...edge.data, + isRunning: true, + animationProgress: 0 + } + }))); } else { + // 设置运行状态为false + dispatch(updateIsRunning(false)); + // 停止运行 + setEdges((eds) => eds.map(edge => ({ + ...edge, + data: { + ...edge.data, + isRunning: false, + animationProgress: 0 + } + }))); } }, [initialData?.appId]); diff --git a/src/hooks/useFlowEditorState.ts b/src/hooks/useFlowEditorState.ts index 2285ff6..bc28dc5 100644 --- a/src/hooks/useFlowEditorState.ts +++ b/src/hooks/useFlowEditorState.ts @@ -9,7 +9,7 @@ import { Dispatch } from 'redux'; export const useFlowEditorState = (initialData?: any) => { const [nodes, setNodes] = useState([]); const [edges, setEdges] = useState([]); - const { canvasDataMap, nodeStatusMap } = useSelector((state: any) => state.ideContainer); + const { canvasDataMap, nodeStatusMap, isRunning } = useSelector((state: any) => state.ideContainer); const dispatch = useDispatch(); // 添加编辑弹窗相关状态 @@ -21,9 +21,6 @@ export const useFlowEditorState = (initialData?: any) => { const [edgeForNodeAdd, setEdgeForNodeAdd] = useState(null); const [positionForNodeAdd, setPositionForNodeAdd] = useState<{ x: number, y: number } | null>(null); - // 添加运行状态 - const [isRunning, setIsRunning] = useState(false); - // 在组件顶部添加历史记录相关状态 const [historyInitialized, setHistoryInitialized] = useState(false); const historyTimeoutRef = useRef(null); @@ -35,11 +32,12 @@ export const useFlowEditorState = (initialData?: any) => { ...node, data: { ...node.data, - status: nodeStatusMap[node.id] || 'waiting' + status: nodeStatusMap[node.id] || 'waiting', + isStatusVisible: isRunning // 只有在运行时才显示状态指示器 } })) ); - }, [nodeStatusMap]); + }, [nodeStatusMap, isRunning]); const updateCanvasDataMapDebounced = useRef( debounce((dispatch: Dispatch, canvasDataMap: any, id: string, nodes: Node[], edges: Edge[]) => { @@ -68,7 +66,6 @@ export const useFlowEditorState = (initialData?: any) => { positionForNodeAdd, setPositionForNodeAdd, isRunning, - setIsRunning, historyInitialized, setHistoryInitialized, historyTimeoutRef, diff --git a/src/store/ideContainer.ts b/src/store/ideContainer.ts index ad782c7..62b98ff 100644 --- a/src/store/ideContainer.ts +++ b/src/store/ideContainer.ts @@ -1,5 +1,6 @@ import { createSlice } from '@reduxjs/toolkit'; +// 定义初始状态类型 interface IDEContainerState { info: any; menuData: any; @@ -11,8 +12,10 @@ interface IDEContainerState { logBarStatus?: boolean; socketId: string; nodeStatusMap: Record; // 节点状态映射 + isRunning: boolean; // 是否正在运行 } +// 初始状态 const initialState: IDEContainerState = { info: {}, // 项目信息 menuData: {}, // 菜单数据 @@ -23,7 +26,8 @@ const initialState: IDEContainerState = { eventList: [], // 工程下的事件列表 logBarStatus: false, socketId: '', // 工程的socketId - nodeStatusMap: {} // 初始化节点状态映射 + nodeStatusMap: {}, // 初始化节点状态映射 + isRunning: false // 默认未运行 }; // 创建切片 @@ -66,6 +70,10 @@ const ideContainerSlice = createSlice({ // 重置节点状态 resetNodeStatus: (state) => { state.nodeStatusMap = {}; + }, + // 更新运行状态 + updateIsRunning: (state, { payload }) => { + state.isRunning = payload; } } }); @@ -82,7 +90,8 @@ export const { updateLogBarStatus, updateSocketId, updateNodeStatus, - resetNodeStatus + resetNodeStatus, + updateIsRunning } = ideContainerSlice.actions; // 默认导出 reducer