From b80414785a3511e5d9031a9b28ebe41edac59199 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 22 Oct 2025 15:32:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(flow):=E4=B8=BA=E5=BA=94=E7=94=A8=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=B7=BB=E5=8A=A0=E9=9A=8F=E6=9C=BA=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E7=94=9F=E6=88=90=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 useMemo 钩子以确保背景色只在节点首次创建时生成
- 定义颜色数组并随机选择背景色
- 将节点标题背景色从固定值改为动态生成的随机色
- 保持节点选中状态逻辑不变并适配 React Flow v12 API
---
 src/components/FlowEditor/node/appNode/AppNode.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/FlowEditor/node/appNode/AppNode.tsx b/src/components/FlowEditor/node/appNode/AppNode.tsx
index 707060e..a5071d5 100644
--- a/src/components/FlowEditor/node/appNode/AppNode.tsx
+++ b/src/components/FlowEditor/node/appNode/AppNode.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useStore } from '@xyflow/react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import NodeContent from '@/pages/flowEditor/components/nodeContentApp';
@@ -8,6 +8,12 @@ import { useStore as useFlowStore } from '@xyflow/react';
 const AppNode = ({ data, id }: { data: any; id: string }) => {
   const title = data.title || '应用节点';
 
+  // 生成随机背景色，使用useMemo确保颜色只在节点首次创建时生成一次
+  const backgroundColor = useMemo(() => {
+    const colors = ['#e59428', '#4a90e2', '#7b68ee', '#50c878', '#ff6347', '#9370db', '#00bfff', '#ff8c00'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  }, []);
+
   // 获取节点选中状态 - 适配React Flow v12 API
   const isSelected = useStore((state) =>
     state.nodeLookup.get(id)?.selected || false
@@ -25,7 +31,7 @@ const AppNode = ({ data, id }: { data: any; id: string }) => {
 
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
-      <div className={styles['node-header']} style={{ backgroundColor: '#722ed1' }}>
+      <div className={styles['node-header']} style={{ backgroundColor }}>
         {title}
         <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>