From ddbaf2c144d210205a97bc6598567353a80acaf9 Mon Sep 17 00:00:00 2001 From: ZLY Date: Wed, 12 Nov 2025 10:57:22 +0800 Subject: [PATCH] =?UTF-8?q?feat(component):=20=E5=AE=9E=E7=8E=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=BC=96=E7=A0=81=E8=B7=AF=E5=BE=84=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../componentCoding/index.tsx | 257 +++++------------- .../componentCoding/style/index.module.less | 7 + .../componentList/index.tsx | 18 +- src/store/ideContainer.ts | 22 +- 4 files changed, 108 insertions(+), 196 deletions(-) diff --git a/src/pages/componentDevelopment/componentCoding/index.tsx b/src/pages/componentDevelopment/componentCoding/index.tsx index 3354bd5..dac2780 100644 --- a/src/pages/componentDevelopment/componentCoding/index.tsx +++ b/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 组件 - - ); - }; - + }, [componentCoding]); return (
@@ -203,9 +48,48 @@ const ComponentCoding = () => { size={50} style={{ marginTop: '20px', marginBottom: '30px' }} > -
- 组件筛选： - {componentScreening()} +
+ +
+ 组件名称： + {componentCoding.name || '未选择组件'} +
+
+ 组件标识： + {componentCoding.projectId || '未选择组件'} +
+
+ 组件选择： + +
+
@@ -216,11 +100,6 @@ const ComponentCoding = () => { > 启动项设置 - } - placeholder={'搜索组件关键词'} - style={{ width: 236 }} - />
diff --git a/src/pages/componentDevelopment/componentCoding/style/index.module.less b/src/pages/componentDevelopment/componentCoding/style/index.module.less index f776b4d..534b94c 100644 --- a/src/pages/componentDevelopment/componentCoding/style/index.module.less +++ b/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 { diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index d3dd8f6..4fc4b8c 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/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) => { diff --git a/src/store/ideContainer.ts b/src/store/ideContainer.ts index 9bfff28..e5f0c0e 100644 --- a/src/store/ideContainer.ts +++ b/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