From 66ab892739410718f0ad42a1a6e384d7c2d36b67 Mon Sep 17 00:00:00 2001
From: loicduong <mikhailcolt@gmail.com>
Date: Sat, 7 Sep 2024 15:17:19 +0700
Subject: [PATCH] optimize(core): optimize menu selectedKey

---
 src/layouts/context/index.ts                  | 25 ++++++++++++++-----
 .../global-menu/modules/horizontal-menu.vue   | 11 ++------
 .../modules/horizontal-mix-menu.vue           | 14 +++--------
 .../modules/reversed-horizontal-mix-menu.vue  | 14 +++--------
 .../global-menu/modules/vertical-menu.vue     | 11 ++------
 .../global-menu/modules/vertical-mix-menu.vue | 12 ++-------
 6 files changed, 31 insertions(+), 56 deletions(-)

diff --git a/src/layouts/context/index.ts b/src/layouts/context/index.ts
index e530580..475fc04 100644
--- 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
index 6ec8b52..11daf81 100644
--- 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
index 3fb3cf7..a39f5df 100644
--- 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
index 81c587b..4300d1c 100644
--- 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,6 +16,7 @@ const route = useRoute()
 const appStore = useAppStore()
 const themeStore = useThemeStore()
 const routeStore = useRouteStore()
+const { routerPushByKeyWithMetaQuery } = useRouterPush()
 const {
   firstLevelMenus,
   childLevelMenus,
@@ -23,16 +24,7 @@ const {
   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
index bf87845..c08c000 100644
--- 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
index fc586f6..4d45374 100644
--- 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() {