feat(ideContainer): 优化菜单选中逻辑与数据结构

src/pages/ideContainer/config/menuData.ts

@@ -3,6 +3,7 @@ export const menuData1 = [
     title: '应用列表',
     path: '',
     key: 'appList',
+    parentKey: 'appList',
     children: [
       {
         title: '应用A',
@@ -41,6 +42,7 @@ export const menuData1 = [
   {
     title: '应用编排',
     key: 'appFlow',
+    parentKey: 'appFlow',
     children: null,
     path: 'appFlow'
   },
@@ -48,19 +50,22 @@ export const menuData1 = [
     title: '事件',
     children: null,
     path: 'event',
-    key: 'event'
+    key: 'event',
+    parentKey: 'event'
   },
   {
     title: '全局变量',
     children: null,
     path: 'globalVar',
-    key: 'globalVar'
+    key: 'globalVar',
+    parentKey: 'globalVar'
   },
   {
     title: '组件',
     children: null,
     path: 'appCompList',
-    key: 'appCompList'
+    key: 'appCompList',
+    parentKey: 'appCompList'
   }
 ];
 
@@ -68,21 +73,25 @@ export const menuData2 = [
   {
     title: '组件列表',
     key: 'componentList',
+    parentKey: 'componentList',
     children: [
       {
         title: '我的组件',
         children: null,
-        path: 'myComponents'
+        path: 'myComponents',
+        parentKey: 'componentList'
       },
       {
         title: '协同组件',
         children: null,
-        path: 'matchingComponents'
+        path: 'matchingComponents',
+        parentKey: 'componentList'
       },
       {
         title: '组件审核',
         children: null,
-        path: 'componentReview'
+        path: 'componentReview',
+        parentKey: 'componentList'
       }
     ]
   },
@@ -90,19 +99,22 @@ export const menuData2 = [
     title: '组件编码',
     children: null,
     path: 'componentCoding',
-    key: 'componentCoding'
+    key: 'componentCoding',
+    parentKey: 'componentCoding'
   },
   {
     title: '组件部署',
     children: null,
     path: 'componentDeployment',
-    key: 'componentDeployment'
+    key: 'componentDeployment',
+    parentKey: 'componentDeployment'
   },
   {
     title: '组件测试',
     children: null,
     path: 'componentTest',
-    key: 'componentTest'
+    key: 'componentTest',
+    parentKey: 'componentTest'
   }
 ];
 

src/pages/ideContainer/index.tsx

@@ -165,7 +165,8 @@ function IDEContainer() {
       if (menuItem) {
         setSelected({
           ...menuItem,
-          key: menuItem.key || menuItem.parentKey
+          key: menuItem.key,
+          parentKey: menuItem.parentKey
         });
       }
     }
@@ -192,7 +193,7 @@ function IDEContainer() {
     <>
       <div className={styles.IDEContainer}>
         <SideBar
-          selectedKey={selected.key}
+          selected={selected}
           identity={urlParams.identity}
           subMenuData={subMenuData}
           onMenuSelect={(select) => setSelected(select)}

src/pages/ideContainer/navBar.tsx

@@ -41,6 +41,7 @@ const NavBar: React.FC<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
     if (selected?.path) {
       const path = selected.path;
       const key = selected.key;
+      const parentKey = selected.parentKey;
       const title = selected.title;
       // 检查tab是否已存在
       const existingTab = tabs.find(tab => tab.key === (key) && tab.title === title);
@@ -50,6 +51,7 @@ const NavBar: React.FC<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
         const title = menuData ? findMenuTitle(selected, menuData, path) : path;
         const newTab = {
           key: key,
+          parentKey: parentKey,
           title: title,
           path: path
         };
@@ -71,7 +73,7 @@ const NavBar: React.FC<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
     // 如果删除的是当前激活的tab，激活第一个tab（如果存在）
     if (key === activeTab && newTabs.length > 0) {
       setActiveTab(newTabs[0].key);
-      onTabChange?.(newTabs[0].path);
+      onTabChange?.(newTabs[0].key);
     }
     else if (key === activeTab && newTabs.length === 0) {
       setActiveTab('');
@@ -85,10 +87,10 @@ const NavBar: React.FC<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
   const handleTabChange = (key: string) => {
     setActiveTab(key);
     // 查找对应的tab并通知父组件
-    // const tab = tabs.find(t => t.key === key);
+    const tab = tabs.find(t => t.key === key);
-    // if (tab) {
+    if (tab) {
-    //   onTabChange?.(tab.key);
+      onTabChange?.(tab.key);
-    // }
+    }
   };
 
   return (

src/pages/ideContainer/sideBar.tsx

@@ -24,7 +24,7 @@ interface MenuItemType {
 
 interface SideBarProps {
   subMenuData: any;
-  selectedKey?: string;
+  selected?: any;
   identity?: string;
   onMenuSelect?: (selected: Selected) => void;
 }
@@ -34,12 +34,11 @@ const compTypeMap = {
   subComponent: '复合组件'
 };
 
-const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, onMenuSelect }) => {
+const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMenuSelect }) => {
   const [menu, setMenu] = useState<MenuItemType[]>([]);
   const [subMenuWidth, setSubMenuWidth] = useState(300); // 子菜单宽度状态
   const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
   const [activeKey, setActiveKey] = useState(0);
-  const [mainMenuSelectedKey, setMainMenuSelectedKey] = useState<string>('');
   const { menuData } = useSelector(state => state.ideContainer);
   const dispatch = useDispatch();
 
@@ -94,7 +93,7 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
   const handleMenuItemClick = (item: MenuItemType, index: number) => {
     setActiveKey(index);
     // 如果点击的是当前已激活的菜单项，则切换子菜单的展开/收起状态
-    if (selectedKey === `${item.key}`) {
+    if (selected.key === `${item.key}`) {
       toggleSubMenu();
     }
     else {
@@ -105,8 +104,6 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
       }
     }
 
-    const mainMenuKey = `${item.key}`;
-    setMainMenuSelectedKey(mainMenuKey);
     // 调用外部传入的菜单选择处理函数
     onMenuSelect?.({ ...item });
   };
@@ -192,7 +189,7 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
         {menu.map((item, index) => (
           <div
             key={index}
-            className={`${styles['menu-item']} ${(selectedKey === `${item.key}` || mainMenuSelectedKey === `${item.key}`) ? styles['menu-item-active'] : ''}`}
+            className={`${styles['menu-item']} ${(selected.parentKey === `${item.parentKey}`) ? styles['menu-item-active'] : ''}`}
             onClick={() => handleMenuItemClick(item, index)}
           >
             <div className={styles['menu-item-content']}>
@@ -240,9 +237,6 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
               const selectedNode = info.node;
               const originalData = selectedNode.props.dataRef;
               await getProjectEnvData(originalData);
-              // 保持主菜单的选中状态
-              const mainMenuKey = `${menu[activeKey]?.key}`;
-              setMainMenuSelectedKey(mainMenuKey);
 
               // 调用外部传入的菜单选择处理函数
               originalData.key && onMenuSelect?.({ ...originalData } as Selected);