feat(flow):为应用节点添加随机背景色生成功能

- 引入 useMemo 钩子以确保背景色只在节点首次创建时生成
- 定义颜色数组并随机选择背景色
- 将节点标题背景色从固定值改为动态生成的随机色
- 保持节点选中状态逻辑不变并适配 React Flow v12 API

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>