Merge pull request #29 from loicduong/24-optimizecore-optimize-menu-s…

…electedkey optimize(core): optimize menu selectedKey
loicduong · Sep 7, 2024 · ec4870e · ec4870e
2 parents 8870ebf + 66ab892
commit ec4870e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 56 deletions.
diff --git a/src/layouts/context/index.ts b/src/layouts/context/index.ts
@@ -8,6 +8,7 @@ export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } =
 function useMixMenu() {
   const route = useRoute()
   const routeStore = useRouteStore()
+  const { selectedKey } = useMenu()
 
   const activeFirstLevelMenuKey = ref('')
 
@@ -16,12 +17,7 @@ function useMixMenu() {
   }
 
   function getActiveFirstLevelMenuKey() {
-    const { hideInMenu, activeMenu } = route.meta
-    const name = route.name as string
-
-    const routeName = (hideInMenu ? activeMenu : name) || name
-
-    const [firstLevelRouteName] = routeName.split('_')
+    const [firstLevelRouteName] = selectedKey.value.split('_')
 
     setActiveFirstLevelMenuKey(firstLevelRouteName)
   }
@@ -68,3 +64,20 @@ function useMixMenu() {
     getActiveFirstLevelMenuKey,
   }
 }
+
+export function useMenu() {
+  const route = useRoute()
+
+  const selectedKey = computed(() => {
+    const { hideInMenu, activeMenu } = route.meta
+    const name = route.name as string
+
+    const routeName = (hideInMenu ? activeMenu : name) || name
+
+    return routeName
+  })
+
+  return {
+    selectedKey,
+  }
+}
diff --git a/src/layouts/modules/global-menu/modules/horizontal-menu.vue b/src/layouts/modules/global-menu/modules/horizontal-menu.vue
@@ -2,23 +2,16 @@
 import { GLOBAL_HEADER_MENU_ID } from '@/constants/app'
 import { useRouterPush } from '@/hooks/common/router'
 import { useRouteStore } from '@/store/modules/route'
+import { useMenu } from '../../../context'
 
 defineOptions({
   name: 'HorizontalMenu',
 })
 
-const route = useRoute()
 const routeStore = useRouteStore()
 const { routerPushByKeyWithMetaQuery } = useRouterPush()
 
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta
-  const name = route.name as string
-
-  const routeName = (hideInMenu ? activeMenu : name) || name
-
-  return routeName
-})
+const { selectedKey } = useMenu()
 </script>
 
 <template>

diff --git a/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue b/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
@@ -3,27 +3,19 @@ import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app'
 import { useRouterPush } from '@/hooks/common/router'
 import { useAppStore } from '@/store/modules/app'
 import { useThemeStore } from '@/store/modules/theme'
-import { useMixMenuContext } from '../../../context'
+import { useMenu, useMixMenuContext } from '../../../context'
 import FirstLevelMenu from '../components/first-level-menu.vue'
 
 defineOptions({
   name: 'HorizontalMixMenu',
 })
 
-const route = useRoute()
 const appStore = useAppStore()
 const themeStore = useThemeStore()
-const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext()
 const { routerPushByKeyWithMetaQuery } = useRouterPush()
 
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta
-  const name = route.name as string
-
-  const routeName = (hideInMenu ? activeMenu : name) || name
-
-  return routeName
-})
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext()
+const { selectedKey } = useMenu()
 
 function handleSelectMixMenu(menu: App.Global.Menu) {
   setActiveFirstLevelMenuKey(menu.key)

diff --git a/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue b/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
@@ -6,7 +6,7 @@ import { useRouteStore } from '@/store/modules/route'
 import { useThemeStore } from '@/store/modules/theme'
 import { SimpleScrollbar } from '@sa/materials'
 import type { RouteKey } from '@elegant-router/types'
-import { useMixMenuContext } from '../../../context'
+import { useMenu, useMixMenuContext } from '../../../context'
 
 defineOptions({
   name: 'ReversedHorizontalMixMenu',
@@ -16,23 +16,15 @@ const route = useRoute()
 const appStore = useAppStore()
 const themeStore = useThemeStore()
 const routeStore = useRouteStore()
+const { routerPushByKeyWithMetaQuery } = useRouterPush()
 const {
   firstLevelMenus,
   childLevelMenus,
   activeFirstLevelMenuKey,
   setActiveFirstLevelMenuKey,
   isActiveFirstLevelMenuHasChildren,
 } = useMixMenuContext()
-const { routerPushByKeyWithMetaQuery } = useRouterPush()
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta
-  const name = route.name as string
-
-  const routeName = (hideInMenu ? activeMenu : name) || name
-
-  return routeName
-})
+const { selectedKey } = useMenu()
 
 function handleSelectMixMenu(key: RouteKey) {
   setActiveFirstLevelMenuKey(key)

diff --git a/src/layouts/modules/global-menu/modules/vertical-menu.vue b/src/layouts/modules/global-menu/modules/vertical-menu.vue
@@ -5,6 +5,7 @@ import { useAppStore } from '@/store/modules/app'
 import { useRouteStore } from '@/store/modules/route'
 import { useThemeStore } from '@/store/modules/theme'
 import { SimpleScrollbar } from '@sa/materials'
+import { useMenu } from '../../../context'
 
 defineOptions({
   name: 'VerticalMenu',
@@ -15,18 +16,10 @@ const appStore = useAppStore()
 const themeStore = useThemeStore()
 const routeStore = useRouteStore()
 const { routerPushByKeyWithMetaQuery } = useRouterPush()
+const { selectedKey } = useMenu()
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted)
 
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta
-  const name = route.name as string
-
-  const routeName = (hideInMenu ? activeMenu : name) || name
-
-  return routeName
-})
-
 const expandedKeys = ref<string[]>([])
 
 function updateExpandedKeys() {

diff --git a/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
@@ -7,7 +7,7 @@ import { useRouteStore } from '@/store/modules/route'
 import { useThemeStore } from '@/store/modules/theme'
 import { useBoolean } from '@sa/hooks'
 import { SimpleScrollbar } from '@sa/materials'
-import { useMixMenuContext } from '../../../context'
+import { useMenu, useMixMenuContext } from '../../../context'
 import GlobalLogo from '../../global-logo/index.vue'
 import FirstLevelMenu from '../components/first-level-menu.vue'
 
@@ -29,6 +29,7 @@ const {
   getActiveFirstLevelMenuKey,
   //
 } = useMixMenuContext()
+const { selectedKey } = useMenu()
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted)
 
@@ -55,15 +56,6 @@ function handleResetActiveMenu() {
   }
 }
 
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta
-  const name = route.name as string
-
-  const routeName = (hideInMenu ? activeMenu : name) || name
-
-  return routeName
-})
-
 const expandedKeys = ref<string[]>([])
 
 function updateExpandedKeys() {