fix: correct submenu open status handling

src/pages/layout/menu.tsx

@@ -1,16 +1,18 @@
+import { useEffect, useState } from 'react'
 import { Menu } from 'antd'
 import { useNavigate, useLocation } from 'react-router-dom'
 import useAppStore from '@/stores/app.ts'
 import CustomIcon from './custom-icon.tsx'
+import { findClosestParentMenuByPath } from '@/utils'
 import type { FC } from 'react'
 import type { MenuList } from '../../interface/layout/menu.ts'
 
 interface MenuProps {
   menuList: MenuList
 }
 
-const MenuComponent: FC<MenuProps> = props => {
-  const { menuList } = props
+const MenuComponent: FC<MenuProps> = ({ menuList } ) => {
+  const [openKey, setOpenKey] = useState<string>('')
   const { locale } = useAppStore()
   const navigate = useNavigate()
   const location = useLocation()
@@ -19,10 +21,23 @@ const MenuComponent: FC<MenuProps> = props => {
     navigate(path)
   }
 
+  const onOpenChange = (openKeys: string[]) => {
+    setOpenKey(openKeys.pop() || '')
+  }
+
+  useEffect(() => {
+    const menu = findClosestParentMenuByPath(menuList, location.pathname)
+    if (menu) {
+      setOpenKey(menu.code)
+    }
+  }, [location.pathname])
+
   return (
     <Menu
       mode="inline"
+      openKeys={openKey ? [openKey] : []}
       selectedKeys={[location.pathname]}
+      onOpenChange={onOpenChange}
       onSelect={k => onMenuClick(k.key)}
       items={menuList.map(item => {
         return item.children

src/pages/layout/tabBar.tsx

@@ -7,41 +7,11 @@ import { FormattedMessage } from 'react-intl'
 import useAppStore from '@/stores/app'
 import useTabBarStore from '@/stores/tabBar'
 import useUserStore from '@/stores/user'
-import type { MenuItem, MenuList } from '@/interface/layout/menu'
+import { findMenuByPath, initAffixTags } from '@/utils'
 import type { MenuProps } from 'antd'
 
 const { useToken } = antTheme
 
-const findMenuByPath = (menus: MenuList, path: string, locale: 'zh_CN' | 'en_US'): MenuItem | undefined => {
-  for (const menu of menus) {
-    if (menu.path === path) {
-      return menu
-    }
-    if (menu.children) {
-      const target = findMenuByPath(menu.children, path, locale)
-      if (target) {
-        return target
-      }
-    }
-  }
-}
-
-const initAffixTags = (menus: MenuList) => {
-  const affixTags: MenuItem[] = []
-  const findAffixTags = (menus: MenuList) => {
-    menus.forEach(menu => {
-      if (menu.affix) {
-        affixTags.push(menu)
-      }
-      if (menu.children) {
-        findAffixTags(menu.children)
-      }
-    })
-  }
-  findAffixTags(menus)
-  return affixTags
-}
-
 function TabBar() {
   const navigate = useNavigate()
   const location = useLocation()
@@ -63,11 +33,11 @@ function TabBar() {
 
   useEffect(() => {
     const path = location.pathname
-    const menu = findMenuByPath(menuList, path, locale)
+    const menu = findMenuByPath(menuList, path)
     if (menu) {
       addVisitedRoute(menu)
     }
-  }, [location.pathname, locale])
+  }, [location.pathname])
 
   const handleClick: MenuProps['onClick'] = ({ key }) => {
     const index = visitedRoutes.findIndex(route => route.path === location.pathname)

src/utils/findMenu.ts

@@ -0,0 +1,31 @@
+import type { MenuItem, MenuList } from '@/interface/layout/menu'
+
+export const findMenuByPath = (menus: MenuList, path: string): MenuItem | undefined => {
+  for (const menu of menus) {
+    if (menu.path === path) {
+      return menu
+    }
+    if (menu.children) {
+      const target = findMenuByPath(menu.children, path)
+      if (target) {
+        return target
+      }
+    }
+  }
+}
+
+export const findClosestParentMenuByPath = (menus: MenuList, path: string, parent?: MenuItem): MenuItem | '' => {
+  for (const menu of menus) {
+    if (parent && menu.path === path) {
+      return menu
+    }
+    if (menu.children) {
+      const target = findClosestParentMenuByPath(menu.children, path, menu)
+      if (target) {
+        return menu
+      }
+    }
+  }
+
+  return ''
+}

src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './findMenu'
+export * from './initAffixTags'

src/utils/initAffixTags.ts

@@ -0,0 +1,18 @@
+import type { MenuList } from '@/interface/layout/menu'
+
+export const initAffixTags = (menus: MenuList) => {
+  const affixTags: MenuList = []
+  const findAffixTags = (menus: MenuList) => {
+    menus.forEach(menu => {
+      if (menu.affix) {
+        affixTags.push(menu)
+      }
+      if (menu.children) {
+        findAffixTags(menu.children)
+      }
+    })
+  }
+  findAffixTags(menus)
+
+  return affixTags
+}