feat(ideContainer): 新增组件开发相关功能

- 新增组件列表、组件审核、组件编码、组件部署、组件测试等功能菜单- 实现 URL 参数解析，根据身份展示不同菜单
- 优化侧边栏菜单，根据身份动态加载菜单项
- 重构 IDEContainer 组件，支持新功能

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'
+  }
 ];

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 = () => <div style={{ height: '70vh', width: '100%' }}>应用编排</div>;
 const CompListComponent = () => <div style={{ height: '70vh', width: '100%' }}>组件列表</div>;
 const AppInstanceComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用实例</div>;
 const EventComponent = () => <div style={{ height: '70vh', width: '100%' }}>事件</div>;
 const GlobalVarComponent = () => <div style={{ height: '70vh', width: '100%' }}>全局变量</div>;
+const MyComponents = () => <div style={{ height: '70vh', width: '100%' }}>我的组件</div>;
+const MatchingComponents = () => <div style={{ height: '70vh', width: '100%' }}>协同组件</div>;
+const ComponentReview = () => <div style={{ height: '70vh', width: '100%' }}>组件审核</div>;
+const ComponentCoding = () => <div style={{ height: '70vh', width: '100%' }}>组件编码</div>;
+const ComponentDeployment = () => <div style={{ height: '70vh', width: '100%' }}>组件部署</div>;
+const ComponentTest = () => <div style={{ height: '70vh', width: '100%' }}>组件测试</div>;
 
 function IDEContainer() {
 
   const [selected, setSelected] = useState<Selected>({});
+  const [urlParams, setUrlParams] = useState<UrlParamsOptions>({});
+
+  useEffect(() => {
+    setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions);
+  }, []);
 
   // 根据选中的菜单项渲染对应组件
   const renderContent = () => {
@@ -33,8 +49,20 @@ function IDEContainer() {
         return <EventComponent />;
       case 'globalVar':
         return <GlobalVarComponent />;
+      case 'myComponents':
+        return <MyComponents />;
+      case 'matchingComponents':
+        return <MatchingComponents />;
+      case 'componentReview':
+        return <ComponentReview />;
+      case 'componentCoding':
+        return <ComponentCoding />;
+      case 'componentDeployment':
+        return <ComponentDeployment />;
+      case 'componentTest':
+        return <ComponentTest />;
       default:
-        return <AppFlowComponent />;
+        return <div>点击左侧菜单选择需要查看的功能</div>;
     }
   };
   return (
@@ -43,12 +71,13 @@ function IDEContainer() {
         <SideBar
           onMenuSelect={(select) => setSelected(select)}
           selectedKey={selected.currentKey}
+          identity={urlParams.identity}
         />
         <div className={styles.content}>
           <div className={styles.mainContent}>
             {renderContent()}
           </div>
-          <LogBar></LogBar>
+          {urlParams.identity !== 'componentDevelopment' && <LogBar></LogBar>}
         </div>
 
         <RightSideBar></RightSideBar>

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<SideBarProps> = ({ onMenuSelect, selectedKey }) => {
+const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }) => {
   const urlParams = getUrlParams();
   const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [menu, setMenu] = useState([]);
   const { userInfo, settings, userLoading } = useSelector(
     (state: GlobalState) => state
   );
@@ -40,6 +42,21 @@ const SideBar: React.FC<SideBarProps> = ({ 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<SideBarProps> = ({ onMenuSelect, selectedKey }) => {
           <Menu
             selectedKeys={selectedKey ? [selectedKey] : ['0']}
           >
-            {renderMenuItems(menuData)}
+            {renderMenuItems(menu)}
           </Menu>
           {/*<div className={styles['collapse-btn']} onClick={toggleCollapse}>*/}
           {/*  {collapsed ? <IconMenuUnfold /> : <IconMenuFold />}*/}

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 = (

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<EngineeringProps> = ({ dataType, showAdd = true }) =
   };
 
   const openEngineHandle = (index: number) => {
-    const ideUrl = '/ideContainer?menu=false';
+    const url = `/ideContainer`;
-    window.open(ideUrl, '_blank');
+    const params: OpenWindowOptions = {
+      target: '_blank',
+      menu: false,
+      identity: 'scene'
+    };
+    openWindow(url, params);
   };
 
   return (

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, string> | 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<string, string> = {};
+    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) {