feat(component): 实现组件编码路径状态管理

src/pages/componentDevelopment/componentCoding/index.tsx

@@ -1,200 +1,45 @@
 import React, { useEffect, useState } from 'react';
 import styles from './style/index.module.less';
-import { Button, Input, Select, Space, Cascader } from '@arco-design/web-react';
+import { Button, Input, Select, Space } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
+import { useSelector, useDispatch } from 'react-redux';
+import { getMyComponentList } from '@/api/componentBase';
+import { updateComponentCodingPath } from '@/store/ideContainer';
 
 const Option = Select.Option;
 
 const ComponentCoding = () => {
-  const [serverUrl, setServerUrl] = useState('https://arco.design/vue/component/button');
-  const [localProjectPath, setLocalProjectPath] = useState('');
+  const [serverUrl, setServerUrl] = useState('');
+  const [optionsList, setOptionsList] = useState([]);
+  const [originList, setOriginList] = useState([]);
+  const { componentCoding } = useSelector((state: any) => state.ideContainer);
+  const dispatch = useDispatch();
 
-  useEffect(() => {
-    // 监听导航事件
-    const handleNavigateToTab = (event: CustomEvent) => {
-      if (event.detail.path === 'componentCoding' && event.detail.localProjectPath) {
-        setLocalProjectPath(event.detail.localProjectPath);
-      }
-    };
+  const getOptionsList = async () => {
+    const res: any = await getMyComponentList({
+      currPage: 1,
+      pageSize: 999
+    });
+    if (res.code === 200) {
+      setOriginList(res.data.list);
+      setOptionsList(res.data.list.map(item => {
+        return { label: item.name, value: item.localProjectPath, ...item };
+      }));
+    }
+  };
 
-    document.addEventListener('navigateToTab', handleNavigateToTab as EventListener);
-    
-    return () => {
-      document.removeEventListener('navigateToTab', handleNavigateToTab as EventListener);
-    };
+  useEffect(() => {
+    getOptionsList();
   }, []);
 
   useEffect(() => {
     const uri = process.env.NEXT_PUBLIC_DEV_CODE_SERVER_HOST;
     const codeServerFolderPre = '/app/data';
-    
+
     // 使用传入的localProjectPath或默认值
-    const path = localProjectPath || '/000000/admin_testcode1/master';
+    const path = componentCoding.localProjectPath || '/000000/admin_testcode1/master';
     setServerUrl(`${uri}?folder=${codeServerFolderPre}${path}`);
-  }, [localProjectPath]);
-
-  const componentScreening = () => {
-    // 将数据结构修改为级联结构
-    const cascaderOptions = [
-      {
-        label: '设备数采与控制交互组件',
-        value: '2',
-        children: [
-          {
-            label: 'Java:8',
-            value: '2-1',
-            children: [
-              {
-                label: '数据采集模块',
-                value: '2-1-1'
-              },
-              {
-                label: '设备控制接口',
-                value: '2-1-2'
-              }
-            ]
-          },
-          {
-            label: 'Python:3.10.12',
-            value: '2-2',
-            children: [
-              {
-                label: '数据采集模块',
-                value: '2-2-1'
-              },
-              {
-                label: '设备控制接口',
-                value: '2-2-2'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '视觉AI组件',
-        value: '3',
-        children: [
-          {
-            label: 'Java:8',
-            value: '3-1',
-            children: [
-              {
-                label: '图像识别',
-                value: '3-1-1'
-              },
-              {
-                label: '目标检测',
-                value: '3-1-2'
-              }
-            ]
-          },
-          {
-            label: 'Python:3.10.12',
-            value: '3-2',
-            children: [
-              {
-                label: '图像识别',
-                value: '3-2-1'
-              },
-              {
-                label: '目标检测',
-                value: '3-2-2'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '运动规划组件',
-        value: '4',
-        children: [
-          {
-            label: 'Java:8',
-            value: '4-1',
-            children: [
-              {
-                label: '路径规划',
-                value: '4-1-1'
-              }
-            ]
-          },
-          {
-            label: 'Python:3.10.12',
-            value: '4-2',
-            children: [
-              {
-                label: '路径规划',
-                value: '4-2-1'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '工艺知识服务组件',
-        value: '5',
-        children: [
-          {
-            label: 'Java:8',
-            value: '5-1',
-            children: [
-              {
-                label: '工艺参数优化',
-                value: '5-1-1'
-              }
-            ]
-          },
-          {
-            label: 'Python:3.10.12',
-            value: '5-2',
-            children: [
-              {
-                label: '工艺参数优化',
-                value: '5-2-1'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '时序数据AI组件',
-        value: '6',
-        children: [
-          {
-            label: 'Java:8',
-            value: '6-1',
-            children: [
-              {
-                label: '时间序列预测',
-                value: '6-1-1'
-              }
-            ]
-          },
-          {
-            label: 'Python:3.10.12',
-            value: '6-2',
-            children: [
-              {
-                label: '时间序列预测',
-                value: '6-2-1'
-              }
-            ]
-          }
-        ]
-      }
-    ];
-
-    return (
-      // 使用 Cascader 组件替换 Select 组件
-      <Cascader
-        placeholder="选择组件"
-        autoWidth={true}
-        showSearch
-        options={cascaderOptions}
-      />
-    );
-  };
-
+  }, [componentCoding]);
 
   return (
     <div className={styles['component-coding']}>
@@ -203,9 +48,48 @@ const ComponentCoding = () => {
           size={50}
           style={{ marginTop: '20px', marginBottom: '30px' }}
         >
-          <div className={styles['handleRow']}>
-            <span>组件筛选：</span>
-            {componentScreening()}
+          <div className={styles['handle-row']}>
+            <Space size={40}>
+              <div className={styles['handle-row-item']}>
+                <span>组件名称：</span>
+                <span>{componentCoding.name || '未选择组件'}</span>
+              </div>
+              <div className={styles['handle-row-item']}>
+                <span>组件标识：</span>
+                <span>{componentCoding.projectId || '未选择组件'}</span>
+              </div>
+              <div className={styles['handle-row-item']}>
+                <span>组件选择：</span>
+                <Select
+                  placeholder="选择组件"
+                  style={{ width: 250 }}
+                  showSearch
+                  filterOption={(inputValue, option) => {
+                    return option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0;
+                  }}
+                  onChange={(value) => {
+                    // 查找选中项的完整信息
+                    const selectedComponent = originList.find(item => item.localProjectPath === value);
+                    if (selectedComponent) {
+                      // 更新Redux状态
+                      dispatch(updateComponentCodingPath({
+                        localProjectPath: selectedComponent.localProjectPath,
+                        name: selectedComponent.name,
+                        projectId: selectedComponent.projectId,
+                        id: selectedComponent.id
+                      }));
+                    }
+                  }}
+                  value={componentCoding.localProjectPath || undefined}
+                >
+                  {optionsList.map((option, index) => (
+                    <Option key={option.value} value={option.value}>
+                      {option.label}
+                    </Option>
+                  ))}
+                </Select>
+              </div>
+            </Space>
           </div>
         </Space>
 
@@ -216,11 +100,6 @@ const ComponentCoding = () => {
           >
             启动项设置
           </Button>
-          <Input
-            prefix={<IconSearch />}
-            placeholder={'搜索组件关键词'}
-            style={{ width: 236 }}
-          />
         </Space>
 
       </div>

src/pages/componentDevelopment/componentCoding/style/index.module.less

@@ -6,6 +6,13 @@
   .header {
     display: flex;
     justify-content: space-between;
+
+    .handle-row {
+      .handle-row-item {
+        display: flex;
+        align-items: center;
+      }
+    }
   }
 
   .code-iframe {

src/pages/componentDevelopment/componentList/index.tsx

@@ -11,10 +11,12 @@ import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handle
 import {
   componentStatusConstant,
   componentStatusDict,
-  publicStatus,
-  publicStatusDict, publishStatusConstant, publishStatusDict
+  publicStatusDict,
+  publishStatusDict
 } from '@/const/isdp/componentBase';
 import dayjs from 'dayjs';
+import { updateComponentCodingPath } from '@/store/ideContainer';
+import { useDispatch } from 'react-redux';
 
 const Group = Radio.Group;
 
@@ -33,6 +35,7 @@ const GlobalVarContainer = () => {
   const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态
   const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
   const [componentStatus, setComponentStatus] = useState(''); // 添加组件状态筛选
+  const dispatch = useDispatch();
 
   const menuItems = [
     {
@@ -161,13 +164,18 @@ const GlobalVarContainer = () => {
             console.log('Nav to', id, type);
           }}
           onSourceCodeView={(row) => {
-            // 跳转到组件编码Tab，并传递localProjectPath参数
+            dispatch(updateComponentCodingPath({
+              localProjectPath: row.localProjectPath,
+              name: row.name,
+              projectId: row.projectId,
+              id: row.id
+            }));
             const event = new CustomEvent('navigateToTab', {
               detail: {
-                path: 'componentCoding',
-                localProjectPath: row.localProjectPath
+                path: 'componentCoding'
               }
             });
+
             document.dispatchEvent(event);
           }}
           onShowEdit={(row, index) => {

src/store/ideContainer.ts

@@ -25,6 +25,13 @@ interface IDEContainerState {
     eventlisteneList: any[] //  [{nodeID:topic}]
   }>;
   gloBalVarList: any;
+  // 组件开发相关状态
+  componentCoding: {
+    localProjectPath: string; // code-server路径
+    name: string; // 组件名称
+    projectId: string; // 组件标识
+    id: string,// 组件id
+  };
 }
 
 // 初始状态
@@ -43,7 +50,13 @@ const initialState: IDEContainerState = {
   nodeStatusMap: {}, // 初始化节点状态映射
   isRunning: false, // 默认未运行
   appRuntimeData: {}, // 按应用ID隔离的应用运行状态和日志数据
-  gloBalVarList: []  // 工程级全局变量列表
+  gloBalVarList: [],  // 工程级全局变量列表
+  componentCoding: {
+    localProjectPath: '',
+    name: '',
+    projectId: '',
+    id: ''
+  }
 };
 
 // 创建切片
@@ -196,6 +209,10 @@ const ideContainerSlice = createSlice({
       if (state.appRuntimeData[appId]) {
         state.appRuntimeData[appId].logs = [];
       }
+    },
+    // 更新组件编码路径
+    updateComponentCodingPath(state, action) {
+      state.componentCoding = { ...action.payload };
     }
   }
 });
@@ -220,7 +237,8 @@ export const {
   updateRuntimeId,
   updateEventNodeList,
   addRuntimeLog,
-  clearRuntimeLogs
+  clearRuntimeLogs,
+  updateComponentCodingPath
 } = ideContainerSlice.actions;
 
 // 默认导出 reducer