feat(ideContainer): ideContainer侧边栏开发

- 增加子菜单数据整合逻辑，将数据整合进递归数据结构中
- 增加menuData数据的全局共享方法

src/api/apps.ts

@@ -104,3 +104,8 @@ export function getPublishApi(appId: string) {
 export function refreshToken(data: publishApi) {
   return axios.post<paramsT>(`${urlPrefix}/apps/apiTokenRefresh`, data);
 }
+
+// 获取当前工程下的所有应用及引用下的事件名称和组件名称
+export function getProjectEnv(id) {
+  return axios.get<paramsT>(`${urlPrefix}/apps/env/${id}`);
+}

src/pages/ideContainer/index.tsx

@@ -7,12 +7,10 @@ import RightSideBar from './rightSideBar';
 import NavBar from './navBar';
 import ProjectContainer from '@/pages/orchestration/project';
 import ApplicationContainer from '@/pages/orchestration/application';
-import { menuData1, menuData2 } from './config/menuData';
 import { Selected } from '@/pages/ideContainer/types';
 import { updateInfo } from '@/store/ideContainer';
 import { useDispatch, useSelector } from 'react-redux';
 import { getAppListBySceneId } from '@/api/apps';
-import * as url from 'node:url';
 
 type UrlParamsOptions = {
   identity?: string;

src/pages/ideContainer/sideBar.tsx

@@ -4,8 +4,9 @@ import { IconApps } from '@arco-design/web-react/icon';
 import { menuData1, menuData2 } from './config/menuData';
 import { ResizeBox, Tree } from '@arco-design/web-react';
 import { Selected } from '@/pages/ideContainer/types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { updateMenuData } from '@/store/ideContainer';
+import { getProjectEnv } from '@/api/apps';
 import _ from 'lodash';
 
 const TreeNode = Tree.Node;
@@ -27,12 +28,18 @@ interface SideBarProps {
   onMenuSelect?: (selected: Selected) => void;
 }
 
+const compTypeMap = {
+  appComponent: '普通组件',
+  subComponent: '复合组件'
+};
+
 const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, onMenuSelect }) => {
   const [menu, setMenu] = useState<MenuItemType[]>([]);
   const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
   const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
   const [activeKey, setActiveKey] = useState(0);
   const [mainMenuSelectedKey, setMainMenuSelectedKey] = useState<string>('');
+  const { menuData } = useSelector(state => state.ideContainer);
   const dispatch = useDispatch();
 
   function getMenuData(): MenuItemType[] {
@@ -49,7 +56,16 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
           v.key = `compFlow-${v.id}`;
           v.path = 'compFlow';
           v.parentKey = menu[activeKey]?.key;
-          v.children = null;
+          v.children = [
+            {
+              title: '事件',
+              children: null
+            },
+            {
+              title: '组件列表',
+              children: null
+            }
+          ];
         });
         menuData[menuIndex]['children'] = subMenuValue;
         dispatch(updateMenuData({ 'scene': menuData }));
@@ -94,6 +110,44 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
     onMenuSelect?.({ ...item });
   };
 
+  const getProjectEnvData = async (data) => {
+    if (!data.path || !data.key) return;
+    const parentKey = menu[activeKey]?.key;
+    const currentMenu = _.cloneDeep(menuData[identity]);
+    const index = currentMenu.findIndex(v => v.key === parentKey);
+    const res: any = await getProjectEnv(data.id);
+    if (res.code === 200) {
+      const children = currentMenu[index].children.find(v => v.id === data.id);
+      children.children[0].children = res.data.events.map(item => {
+        return {
+          title: item,
+          children: null
+        };
+      });
+      children.children[1].children = Object.keys(res.data.compList).map(item => {
+        return {
+          title: compTypeMap[item],
+          children: res.data.compList[item].map(item => {
+            return {
+              title: item,
+              children: null
+            };
+          })
+        };
+      });
+
+      // 更新 menuData 中的数据
+      dispatch(updateMenuData({ ...menuData, [identity]: currentMenu }));
+
+      // 同时更新本地 menu 状态以触发重新渲染
+      setMenu(prevMenu => {
+        const newMenu = [...prevMenu];
+        newMenu[activeKey] = { ...newMenu[activeKey], children: currentMenu[index].children };
+        return newMenu;
+      });
+    }
+  };
+
   // 渲染子菜单
   const renderMenuItems = (menuItems?: MenuItemType[], parentKey = '0') => {
     if (menuItems && menuItems.length) {
@@ -166,7 +220,7 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
             onSelect={(_selectedKeys, info) => {
               const selectedNode = info.node;
               const originalData = selectedNode.props.dataRef;
-
+              getProjectEnvData(originalData);
               // 保持主菜单的选中状态
               const mainMenuKey = `${menu[activeKey]?.key}`;
               setMainMenuSelectedKey(mainMenuKey);

src/store/ideContainer.ts

@@ -3,12 +3,14 @@ import { createSlice } from '@reduxjs/toolkit';
 interface IDEContainerState {
   info: any;
   menuData: any;
+  flowData: any;
   logBarStatus?: boolean;
 }
 
 const initialState: IDEContainerState = {
   info: {},
   menuData: {},
+  flowData: {},
   logBarStatus: false
 };
 
@@ -22,12 +24,15 @@ const ideContainerSlice = createSlice({
     updateMenuData(state, action) {
       state.menuData = action.payload;
     },
+    updateFlowData(state, action) {
+      state.flowData = action.payload;
+    },
     updateLogBarStatus(state, action) {
       state.logBarStatus = action.payload;
     }
   }
 });
 
-export const { updateInfo, updateMenuData, updateLogBarStatus } = ideContainerSlice.actions;
+export const { updateInfo, updateMenuData, updateFlowData, updateLogBarStatus } = ideContainerSlice.actions;
 
 export default ideContainerSlice.reducer;