From f3fdf25e03f419c4447159ea14afae963fd379a6 Mon Sep 17 00:00:00 2001 From: ZLY Date: Thu, 21 Aug 2025 10:59:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91=E7=9B=B8=E5=85=B3=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增组件列表、组件审核、组件编码、组件部署、组件测试等功能菜单- 实现 URL 参数解析，根据身份展示不同菜单 - 优化侧边栏菜单，根据身份动态加载菜单项 - 重构 IDEContainer 组件，支持新功能 --- src/pages/ideContainer/config/menuData.ts | 38 +++++++++++++++++++++++ src/pages/ideContainer/index.tsx | 37 +++++++++++++++++++--- src/pages/ideContainer/sideBar.tsx | 25 ++++++++++++--- src/pages/layout.tsx | 1 - src/pages/scene/engineering.tsx | 10 ++++-- src/utils/common.ts | 27 ++++++++++++++++ 6 files changed, 127 insertions(+), 11 deletions(-) diff --git a/src/pages/ideContainer/config/menuData.ts b/src/pages/ideContainer/config/menuData.ts index d63fd59..e1f8679 100644 --- a/src/pages/ideContainer/config/menuData.ts +++ b/src/pages/ideContainer/config/menuData.ts @@ -34,4 +34,42 @@ export const menuData = [ children: null, path: 'globalVar' } +]; + +export const menuData2 = [ + { + title: '组件列表', + children: [ + { + title: '我的组件', + children: null, + path: 'myComponents' + }, + { + title: '协同组件', + children: null, + path: 'matchingComponents' + }, + { + title: '组件审核', + children: null, + path: 'componentReview' + } + ] + }, + { + title: '组件编码', + children: null, + path: 'componentCoding' + }, + { + title: '组件部署', + children: null, + path: 'componentDeployment' + }, + { + title: '组件测试', + children: null, + path: 'componentTest' + } ]; \ No newline at end of file diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 3ec19e8..6c86cea 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -1,24 +1,40 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import styles from './style/index.module.less'; import SideBar from './sideBar'; import LogBar from './logBar'; import RightSideBar from './rightSideBar'; +import { getUrlParams } from '@/utils/common'; interface Selected { currentPath?: string; currentKey?: string; } -// 假设您有这些组件 +type UrlParamsOptions = { + identity?: string; + [key: string]: string +}; + const AppFlowComponent = () =>
应用编排
; const CompListComponent = () =>
组件列表
; const AppInstanceComponent = () =>
应用实例
; const EventComponent = () =>
事件
; const GlobalVarComponent = () =>
全局变量
; +const MyComponents = () =>
我的组件
; +const MatchingComponents = () =>
协同组件
; +const ComponentReview = () =>
组件审核
; +const ComponentCoding = () =>
组件编码
; +const ComponentDeployment = () =>
组件部署
; +const ComponentTest = () =>
组件测试
; function IDEContainer() { const [selected, setSelected] = useState({}); + const [urlParams, setUrlParams] = useState({}); + + useEffect(() => { + setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions); + }, []); // 根据选中的菜单项渲染对应组件 const renderContent = () => { @@ -33,8 +49,20 @@ function IDEContainer() { return ; case 'globalVar': return ; + case 'myComponents': + return ; + case 'matchingComponents': + return ; + case 'componentReview': + return ; + case 'componentCoding': + return ; + case 'componentDeployment': + return ; + case 'componentTest': + return ; default: - return ; + return
点击左侧菜单选择需要查看的功能
; } }; return ( @@ -43,12 +71,13 @@ function IDEContainer() { setSelected(select)} selectedKey={selected.currentKey} + identity={urlParams.identity} />
{renderContent()}
- + {urlParams.identity !== 'componentDevelopment' && }
diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index ae9bfcb..1ed87b8 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -1,11 +1,11 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import styles from './style/sideBar.module.less'; import { Layout, Menu } from '@arco-design/web-react'; import { IconApps, IconMenuFold, IconMenuUnfold } from '@arco-design/web-react/icon'; import { GlobalState } from '@/store'; import { useSelector } from 'react-redux'; import getUrlParams from '@/utils/getUrlParams'; -import { menuData } from './config/menuData'; +import { menuData, menuData2 } from './config/menuData'; const Sider = Layout.Sider; @@ -21,11 +21,13 @@ interface MenuItemType { interface SideBarProps { onMenuSelect?: ({ currentPath, currentKey }) => void; selectedKey?: string; + identity?: string; } -const SideBar: React.FC = ({ onMenuSelect, selectedKey }) => { +const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity }) => { const urlParams = getUrlParams(); const [collapsed, setCollapsed] = useState(false); + const [menu, setMenu] = useState([]); const { userInfo, settings, userLoading } = useSelector( (state: GlobalState) => state ); @@ -40,6 +42,21 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey }) => { setCollapsed((collapsed) => !collapsed); } + function getMenuData(): MenuItemType[] { + switch (identity) { + case 'scene': + return menuData; + case 'componentDevelopment' : + return menuData2; + default: + return menuData; + } + } + + useEffect(() => { + setMenu(getMenuData()); + }, [identity]); + // 递归渲染菜单项 const renderMenuItems = (items: MenuItemType[], parentKey = '') => { return items.map((item, index) => { @@ -81,7 +98,7 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey }) => { - {renderMenuItems(menuData)} + {renderMenuItems(menu)} {/*
*/} {/* {collapsed ? : }*/} diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx index 8d617d2..1181e70 100644 --- a/src/pages/layout.tsx +++ b/src/pages/layout.tsx @@ -148,7 +148,6 @@ function PageLayout({ children }: { children: ReactNode }) { function renderRoutes(locale) { return function travel(_routes: IRoute[], level, parentNode = []) { return _routes.map((route) => { - console.log('route:', route); const { ignore } = route; const iconDom = getIconFromKey(route.key); const titleDom = ( diff --git a/src/pages/scene/engineering.tsx b/src/pages/scene/engineering.tsx index 6cafcd5..4b18253 100644 --- a/src/pages/scene/engineering.tsx +++ b/src/pages/scene/engineering.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import style from './style/engineering.module.less'; import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react'; import { IconPlus, IconApps } from '@arco-design/web-react/icon'; +import { openWindow, OpenWindowOptions } from '@/utils/common'; const InputSearch = Input.Search; const Row = Grid.Row; @@ -27,8 +28,13 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = }; const openEngineHandle = (index: number) => { - const ideUrl = '/ideContainer?menu=false'; - window.open(ideUrl, '_blank'); + const url = `/ideContainer`; + const params: OpenWindowOptions = { + target: '_blank', + menu: false, + identity: 'scene' + }; + openWindow(url, params); }; return ( diff --git a/src/utils/common.ts b/src/utils/common.ts index 0005f6a..5bb4fa4 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -23,6 +23,33 @@ export function openWindow(url: string, opts?: OpenWindowOptions) { window.open(fullUrl, target); } +/** + * 从URL中获取查询参数 + * @param url - 要解析的URL + * @param key - 要获取的参数名，如果不传则返回所有参数 + * @returns 返回指定参数的值或所有参数对象 + */ +export function getUrlParams(url: string, key?: string): Record | string | object | null { + try { + const urlObj = new URL(url, window.location.origin); + const params = new URLSearchParams(urlObj.search); + + if (key) { + return params.get(key); + } + + const result: Record = {}; + params.forEach((value, key) => { + result[key] = value; + }); + + return result; + } catch (error) { + console.error('解析URL失败:', error); + return key ? null : {}; + } +} + // 格式化实例类型 export function formatInstanceType(value: string): string { switch (value) {