feat(flowEditor): 为节点添加图标并优化相关功能

-为不同类型的节点添加相应的图标- 实现节点图标自动设置功能
- 更新节点数据配置，增加 REST 调用节点
- 优化流程编辑器界面和功能

src/pages/flowEditor/index.tsx

@@ -66,6 +66,7 @@ const FlowEditor: React.FC = () => {
       event.preventDefault();
 
       if (!reactFlowInstance) return;
+      console.log("1");
 
       const callBack = event.dataTransfer.getData('application/reactflow');
       const nodeData = JSON.parse(callBack);

src/pages/flowEditor/node/localNode/LocalNode.tsx

@@ -2,6 +2,60 @@ import React from 'react';
 import { useStore } from '@xyflow/react';
 import styles from '@/pages/flowEditor/node/style/base.module.less';
 import NodeContent from '@/pages/flowEditor/components/nodeContent';
+import DynamicIcon from '@/components/DynamicIcon';
+
+
+const setIcon = (nodeType: string) => {
+  let type = 'IconApps';
+  switch (nodeType) {
+    case 'CONDITION':
+      type = 'IconBranch';
+      break;
+    case 'AND':
+      type = 'IconShareAlt';
+      break;
+    case 'OR':
+      type = 'IconPause';
+      break;
+    case 'WAIT':
+      type = 'IconClockCircle';
+      break;
+    case 'LOOP':
+      type = 'IconSync';
+      break;
+    case 'CYCLE':
+      type = 'IconSchedule';
+      break;
+    case 'EVENTLISTENE':
+      type = 'IconImport';
+      break;
+    case 'EVENTSEND':
+      type = 'IconExport';
+      break;
+    case 'JSON2STR':
+      type = 'IconCodeBlock';
+      break;
+    case 'STR2JSON':
+      type = 'IconCodeSquare';
+      break;
+    case 'JSONCONVERT':
+      type = 'IconTranslate';
+      break;
+    case 'RESULT':
+      type = 'IconInteraction';
+      break;
+    case 'IMAGE':
+      type = 'IconImage';
+      break;
+    case 'CODE':
+      type = 'IconCode';
+      break;
+    case 'REST':
+      type = 'IconCloudDownload';
+      break;
+  }
+  return <DynamicIcon type={type} style={{ fontSize: '16px', marginRight: '5px' }} />;
+};
 
 const LocalNode = ({ data, id }: { data: any; id: string }) => {
   const title = data.title || '系统组件';
@@ -14,9 +68,9 @@ const LocalNode = ({ data, id }: { data: any; id: string }) => {
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
+        {setIcon(data.type)}
         {title}
       </div>
-
       <NodeContent data={data} />
     </div>
   );

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

@@ -31,7 +31,7 @@ const nodeDefinitions = [
   { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common', icon: 'IconInteraction' },
   { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common', icon: 'IconImage' },
   { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common', icon: 'IconCode' },
-  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' }
+  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' },
 ];
 
 // 通过映射生成完整的节点数据数组

src/pages/flowEditor/test/exampleFlowData.ts

@@ -2,32 +2,32 @@ export const exampleFlowData = {
   'main': {
     'id': 'main',
     'lineConfigs': [
-      // {
+      {
-      //   'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
+        'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
-      //   'lineType': 'API',
+        'lineType': 'API',
-      //   'next': {
+        'next': {
-      //     'endpointId': 'start',
+          'endpointId': 'start',
-      //     'nodeId': 'node_49'
+          'nodeId': 'node_49'
-      //   },
+        },
-      //   'prev': {
+        'prev': {
-      //     'endpointId': 'start',
+          'endpointId': 'start',
-      //     'nodeId': 'start'
+          'nodeId': 'start'
-      //   },
+        },
-      //   'x6': '{"vertices":[]}'
+        'x6': '{"vertices":[]}'
-      // },
+      },
-      // {
+      {
-      //   'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
+        'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
-      //   'lineType': 'API',
+        'lineType': 'API',
-      //   'next': {
+        'next': {
-      //     'endpointId': 'end',
+          'endpointId': 'end',
-      //     'nodeId': 'end'
+          'nodeId': 'end'
-      //   },
+        },
-      //   'prev': {
+        'prev': {
-      //     'endpointId': 'done',
+          'endpointId': 'done',
-      //     'nodeId': 'node_49'
+          'nodeId': 'node_49'
-      //   },
+        },
-      //   'x6': '{"vertices":[]}'
+        'x6': '{"vertices":[]}'
-      // }
+      }
     ],
     'name': '',
     'nodeConfigs': [
@@ -44,47 +44,47 @@ export const exampleFlowData = {
         'nodeName': '',
         'x6': '{"position":{"x":-250,"y":0}}'
       },
-      // {
+      {
-      //   'apiId': '',
+        'apiId': '',
-      //   'component': {
+        'component': {
-      //     'compIdentifier': 'admin_connect_test',
+          'compIdentifier': 'admin_connect_test',
-      //     'compInstanceIdentifier': 'admin_connect_test',
+          'compInstanceIdentifier': 'admin_connect_test',
-      //     'customDef': '',
+          'customDef': '',
-      //     'type': 'BASIC'
+          'type': 'BASIC'
-      //   },
+        },
-      //   'dataIns': [
+        'dataIns': [
-      //     {
+          {
-      //       'arrayType': null,
+            'arrayType': null,
-      //       'dataType': null,
+            'dataType': null,
-      //       'defaultValue': null,
+            'defaultValue': null,
-      //       'desc': '',
+            'desc': '',
-      //       'id': 'input'
+            'id': 'input'
-      //     }
+          }
-      //   ],
+        ],
-      //   'dataOfPrevNodeMap': {},
+        'dataOfPrevNodeMap': {},
-      //   'dataOuts': [
+        'dataOuts': [
-      //     {
+          {
-      //       'arrayType': null,
+            'arrayType': null,
-      //       'dataType': null,
+            'dataType': null,
-      //       'defaultValue': null,
+            'defaultValue': null,
-      //       'desc': '',
+            'desc': '',
-      //       'id': 'output'
+            'id': 'output'
-      //     },
+          },
-      //     {
+          {
-      //       'arrayType': null,
+            'arrayType': null,
-      //       'dataType': 'STRING',
+            'dataType': 'STRING',
-      //       'defaultValue': null,
+            'defaultValue': null,
-      //       'desc': '返回数据',
+            'desc': '返回数据',
-      //       'id': 'returnData'
+            'id': 'returnData'
-      //     }
+          }
-      //   ],
+        ],
-      //   'defaultValues': [],
+        'defaultValues': [],
-      //   'description': '',
+        'description': '',
-      //   'joinLines': {},
+        'joinLines': {},
-      //   'nodeId': 'node_49',
+        'nodeId': 'node_49',
-      //   'nodeName': '连接test',
+        'nodeName': '连接test',
-      //   'x6': '{"position":{"x":-90,"y":-60}}'
+        'x6': '{"position":{"x":-90,"y":-60}}'
-      // },
+      },
       {
         'apiId': '',
         'component': null,