diff --git a/src/components/FlowEditor/node/codeNode/CodeNode.tsx b/src/components/FlowEditor/node/codeNode/CodeNode.tsx
index 97746f9..bb26cbf 100644
--- a/src/components/FlowEditor/node/codeNode/CodeNode.tsx
+++ b/src/components/FlowEditor/node/codeNode/CodeNode.tsx
@@ -3,6 +3,8 @@ import { useStore } from '@xyflow/react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import DynamicIcon from '@/components/DynamicIcon';
import NodeContentCode from '@/pages/flowEditor/components/nodeContentCode';
+import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
+import { useStore as useFlowStore } from '@xyflow/react';
const setIcon = () => {
return ;
@@ -15,12 +17,23 @@ const CodeNode = ({ data, id }: { data: any; id: string }) => {
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);
+
+ // 获取节点运行状态
+ 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 (
diff --git a/src/components/FlowEditor/node/imageNode/ImageNode.tsx b/src/components/FlowEditor/node/imageNode/ImageNode.tsx
index b9a8b89..46fa3ea 100644
--- a/src/components/FlowEditor/node/imageNode/ImageNode.tsx
+++ b/src/components/FlowEditor/node/imageNode/ImageNode.tsx
@@ -1,9 +1,10 @@
import React from 'react';
import { useStore } from '@xyflow/react';
-// import styles from '@/pages/flowEditor/node/style/base.module.less';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import DynamicIcon from '@/components/DynamicIcon';
import NodeContentImage from '@/pages/flowEditor/components/nodeContentImage';
+import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
+import { useStore as useFlowStore } from '@xyflow/react';
const setIcon = () => {
return ;
@@ -16,12 +17,23 @@ const ImageNode = ({ data, id }: { data: any; id: string }) => {
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);
+
+ // 获取节点运行状态
+ 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 (
diff --git a/src/components/FlowEditor/node/index.tsx b/src/components/FlowEditor/node/index.tsx
index 0574886..5567e47 100644
--- a/src/components/FlowEditor/node/index.tsx
+++ b/src/components/FlowEditor/node/index.tsx
@@ -4,13 +4,23 @@ import StartNode from './startNode/StartNode';
import EndNode from './endNode/EndNode';
import BasicNode from './basicNode/BasicNode';
import AppNode from './appNode/AppNode';
+import CodeNode from './codeNode/CodeNode';
+import ImageNode from './imageNode/ImageNode';
+import RestNode from './restNode/RestNode';
+import SwitchNode from './switchNode/SwitchNode';
+import LoopNode from './loopNode/LoopNode';
// 定义所有可用的节点类型
export const nodeTypes: NodeTypes = {
start: StartNode,
end: EndNode,
BASIC: BasicNode,
- APP: AppNode
+ APP: AppNode,
+ CODE: CodeNode,
+ IMAGE: ImageNode,
+ REST: RestNode,
+ SWITCH: SwitchNode,
+ LOOP: LoopNode
};
// 节点类型映射,用于创建节点时的类型查找
@@ -18,7 +28,12 @@ export const nodeTypeMap: Record = {
'start': 'start',
'end': 'end',
'basic': 'BASIC',
- 'app': 'APP'
+ 'app': 'APP',
+ 'code': 'CODE',
+ 'image': 'IMAGE',
+ 'rest': 'REST',
+ 'switch': 'SWITCH',
+ 'loop': 'LOOP'
};
// 节点显示名称映射
@@ -26,7 +41,12 @@ export const nodeTypeNameMap: Record = {
'start': '开始节点',
'end': '结束节点',
'basic': '基础节点',
- 'app': '应用节点'
+ 'app': '应用节点',
+ 'code': '代码节点',
+ 'image': '图片节点',
+ 'rest': 'REST节点',
+ 'switch': '条件节点',
+ 'loop': '循环节点'
};
// 注册新节点类型的函数
diff --git a/src/components/FlowEditor/node/localNode/LocalNode.tsx b/src/components/FlowEditor/node/localNode/LocalNode.tsx
index 8d6775d..1356e72 100644
--- a/src/components/FlowEditor/node/localNode/LocalNode.tsx
+++ b/src/components/FlowEditor/node/localNode/LocalNode.tsx
@@ -67,12 +67,12 @@ const LocalNode = ({ 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) =>
+ const isStatusVisible = useFlowStore((state) =>
!!state.nodeLookup.get(id)?.data?.isStatusVisible
);
diff --git a/src/components/FlowEditor/node/loopNode/LoopNode.tsx b/src/components/FlowEditor/node/loopNode/LoopNode.tsx
index a698c70..476ae44 100644
--- a/src/components/FlowEditor/node/loopNode/LoopNode.tsx
+++ b/src/components/FlowEditor/node/loopNode/LoopNode.tsx
@@ -5,6 +5,8 @@ import DynamicIcon from '@/components/DynamicIcon';
import { Handle, Position } from '@xyflow/react';
import NodeContentLoop from '@/pages/flowEditor/components/nodeContentLoop';
import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
+import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
+import { useStore as useFlowStore } from '@xyflow/react';
// 循环节点组件,用于显示循环开始和循环结束节点
const LoopNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
@@ -16,6 +18,16 @@ const LoopNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);
+
+ // 获取节点运行状态
+ const nodeStatus: NodeStatus = useFlowStore((state) =>
+ (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
+ );
+
+ // 获取运行状态可见性
+ const isStatusVisible = useFlowStore((state) =>
+ !!state.nodeLookup.get(id)?.data?.isStatusVisible
+ );
// 设置图标
const setIcon = () => {
@@ -150,6 +162,7 @@ const LoopNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
{setIcon()}
{title}
+
{/* 顶部连接点,用于标识循环开始和结束节点是一组 */}
diff --git a/src/components/FlowEditor/node/restNode/RestNode.tsx b/src/components/FlowEditor/node/restNode/RestNode.tsx
index a35f601..5323bda 100644
--- a/src/components/FlowEditor/node/restNode/RestNode.tsx
+++ b/src/components/FlowEditor/node/restNode/RestNode.tsx
@@ -3,28 +3,41 @@ import { useStore } from '@xyflow/react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import DynamicIcon from '@/components/DynamicIcon';
import NodeContentREST from '@/pages/flowEditor/components/nodeContentREST';
+import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
+import { useStore as useFlowStore } from '@xyflow/react';
const setIcon = () => {
return ;
};
-const CodeNode = ({ data, id }: { data: any; id: string }) => {
+const RestNode = ({ data, id }: { data: any; id: string }) => {
const title = data.title || 'REST调用';
// 获取节点选中状态 - 适配React Flow v12 API
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);
+
+ // 获取节点运行状态
+ 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 (
);
};
-export default CodeNode;
\ No newline at end of file
+export default RestNode;
\ No newline at end of file
diff --git a/src/components/FlowEditor/node/switchNode/SwitchNode.tsx b/src/components/FlowEditor/node/switchNode/SwitchNode.tsx
index dab8628..888cf8f 100644
--- a/src/components/FlowEditor/node/switchNode/SwitchNode.tsx
+++ b/src/components/FlowEditor/node/switchNode/SwitchNode.tsx
@@ -5,6 +5,8 @@ import DynamicIcon from '@/components/DynamicIcon';
import { Handle, Position } from '@xyflow/react';
import NodeContentSwitch from '@/pages/flowEditor/components/nodeContentSwitch';
import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
+import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
+import { useStore as useFlowStore } from '@xyflow/react';
// 循环节点组件,用于显示循环开始和循环结束节点
const SwitchNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
@@ -15,6 +17,16 @@ const SwitchNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);
+
+ // 获取节点运行状态
+ const nodeStatus: NodeStatus = useFlowStore((state) =>
+ (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
+ );
+
+ // 获取运行状态可见性
+ const isStatusVisible = useFlowStore((state) =>
+ !!state.nodeLookup.get(id)?.data?.isStatusVisible
+ );
// 设置图标
const setIcon = () => {
@@ -147,6 +159,7 @@ const SwitchNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
{setIcon()}
{title}
+