From 28b423e20836adb4348813b9b4f6b4b89712c086 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Tue, 21 Oct 2025 15:53:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(flow):=E4=B8=BA=E5=A4=9A=E7=A7=8D=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E7=B1=BB=E5=9E=8B=E6=B7=BB=E5=8A=A0=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FlowEditor/node/codeNode/CodeNode.tsx     | 13 ++++++++++
 .../FlowEditor/node/imageNode/ImageNode.tsx   | 14 +++++++++-
 src/components/FlowEditor/node/index.tsx      | 26 ++++++++++++++++---
 .../FlowEditor/node/localNode/LocalNode.tsx   |  6 ++---
 .../FlowEditor/node/loopNode/LoopNode.tsx     | 13 ++++++++++
 .../FlowEditor/node/restNode/RestNode.tsx     | 17 ++++++++++--
 .../FlowEditor/node/switchNode/SwitchNode.tsx | 13 ++++++++++
 7 files changed, 93 insertions(+), 9 deletions(-)

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 <DynamicIcon type="IconCode" style={{ fontSize: '16px', marginRight: '5px' }} />;
@@ -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 (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
         {setIcon()}
         {title}
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentCode data={data} />
     </div>
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 <DynamicIcon type="IconImage" style={{ fontSize: '16px', marginRight: '5px' }} />;
@@ -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 (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
         {setIcon()}
         {title}
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentImage data={data} />
     </div>
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<string, string> = {
   '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<string, string> = {
   '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 }) => {
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
         {setIcon()}
         {title}
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
 
       {/* 顶部连接点，用于标识循环开始和结束节点是一组 */}
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 <DynamicIcon type="IconCloudDownload" style={{ fontSize: '16px', marginRight: '5px' }} />;
 };
 
-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 (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
         {setIcon()}
         {title}
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentREST data={data} />
     </div>
   );
 };
 
-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 }) => {
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
         {setIcon()}
         {title}
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
 
       <NodeContentSwitch data={modifiedData} />