feat(flowEditor): 为节点添加图标并优化样式

- 在 localNodeData 中添加节点图标
- 在侧边栏中使用 DynamicIcon 组件显示节点图标
-调整节点显示样式，增加图标与名称的间距
- 新增 DynamicIcon 组件，用于动态加载图标

src/components/DynamicIcon/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import * as ArcoIcons from '@arco-design/web-react/icon';
+
+export interface DynamicIconProps {
+  type: string;
+  library?: 'arco'; // 可以扩展支持更多图标库
+  [key: string]: any;
+}
+
+const DynamicIcon: React.FC<DynamicIconProps> = ({
+                                                   type,
+                                                   library = 'arco',
+                                                   ...restProps
+                                                 }) => {
+  let IconComponent: React.ComponentType<any> | undefined;
+
+  if (library === 'arco') {
+    IconComponent = ArcoIcons[type as keyof typeof ArcoIcons];
+  } // library 有其他的图标库时可添加
+
+  if (!IconComponent) {
+    console.warn(`Icon '${type}' from library '${library}' not found`);
+    return null;
+  }
+
+  return <IconComponent {...restProps} />;
+};
+
+export default DynamicIcon;

src/pages/flowEditor/sideBar/config/localNodeData.ts

@@ -17,28 +17,29 @@ const defaultParameters = {
 
 // 定义节点基本信息
 const nodeDefinitions = [
-  { nodeName: '条件选择', nodeType: 'CONDITION', nodeGroup: 'common' },
+  { nodeName: '条件选择', nodeType: 'CONDITION', nodeGroup: 'common', icon: 'IconBranch' },
-  { nodeName: '与门', nodeType: 'AND', nodeGroup: 'common' },
+  { nodeName: '与门', nodeType: 'AND', nodeGroup: 'common', icon: 'IconShareAlt' },
-  { nodeName: '或门', nodeType: 'OR', nodeGroup: 'common' },
+  { nodeName: '或门', nodeType: 'OR', nodeGroup: 'common', icon: 'IconPause' },
-  { nodeName: '等待', nodeType: 'WAIT', nodeGroup: 'common' },
+  { nodeName: '等待', nodeType: 'WAIT', nodeGroup: 'common', icon: 'IconClockCircle' },
-  { nodeName: '循环', nodeType: 'LOOP', nodeGroup: 'common' },
+  { nodeName: '循环', nodeType: 'LOOP', nodeGroup: 'common', icon: 'IconSync' },
-  { nodeName: '周期', nodeType: 'CYCLE', nodeGroup: 'common' },
+  { nodeName: '周期', nodeType: 'CYCLE', nodeGroup: 'common', icon: 'IconSchedule' },
-  { nodeName: '事件接收', nodeType: 'EVENTLISTENE', nodeGroup: 'common' },
+  { nodeName: '事件接收', nodeType: 'EVENTLISTENE', nodeGroup: 'common', icon: 'IconImport' },
-  { nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common' },
+  { nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common', icon: 'IconExport' },
-  { nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common' },
+  { nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common', icon: 'IconCodeBlock' },
-  { nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common' },
+  { nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common', icon: 'IconCodeSquare' },
-  { nodeName: 'JSON封装', nodeType: 'JSONCONVERT', nodeGroup: 'common' },
+  { nodeName: 'JSON封装', nodeType: 'JSONCONVERT', nodeGroup: 'common', icon: 'IconTranslate' },
-  { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common' },
+  { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common', icon: 'IconInteraction' },
-  { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common' },
+  { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common', icon: 'IconImage' },
-  { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common' },
+  { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common', icon: 'IconCode' },
-  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common' },
+  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' }
 ];
 
 // 通过映射生成完整的节点数据数组
-export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup }) => ({
+export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup, icon }) => ({
   nodeName,
   nodeType,
   nodeGroup,
+  icon,
   data: {
     parameters: { ...defaultParameters }
   }

src/pages/flowEditor/sideBar/sideBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './style/style.module.less';
+import DynamicIcon from '@/components/DynamicIcon';
 import { Card } from '@arco-design/web-react';
 import { Collapse } from '@arco-design/web-react';
 import { localNodeData } from './config/localNodeData';
@@ -32,7 +33,10 @@ const SideBar: React.FC = () => {
               draggable
               onDragStart={(event) => onDragStart(event, item)}
             >
-              <div>{item.nodeName}</div>
+              <div className={styles['flex-box']}>
+                <DynamicIcon type={item.icon} style={{ fontSize: '18px', color: 'blue' }} />
+                <div className={styles['node-name']}>{item.nodeName}</div>
+              </div>
             </Card>
           ))}
         </CollapseItem>

src/pages/flowEditor/sideBar/style/style.module.less

@@ -13,4 +13,19 @@
   :global(.arco-collapse-item-content-box) {
     padding: 4px 6px;
   }
+
+  :global(.arco-card-body ) {
+    padding: 15px 10px;
+  }
+
+  .flex-box {
+    display: flex;
+    align-items: center;
+
+    .node-name {
+      margin-left: 10px;
+      font-size: 14px;
+      font-weight: 700;
+    }
+  }
 }