optimize(projects): optimize menu selectedKey

Author: honghuangdc

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
+  };
+}

src/layouts/modules/global-menu/modules/horizontal-menu.vue

@@ -1,26 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
+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>

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue

@@ -1,31 +1,20 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
 import FirstLevelMenu from '../components/first-level-menu.vue';
-import { useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 
 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);

src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import type { RouteKey } from '@elegant-router/types';
 import { SimpleScrollbar } from '@sa/materials';
@@ -8,7 +8,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 
 defineOptions({
   name: 'ReversedHorizontalMixMenu'
@@ -18,23 +18,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);

src/layouts/modules/global-menu/modules/vertical-menu.vue

@@ -7,6 +7,7 @@ import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMenu } from '../../../context';
 
 defineOptions({
   name: 'VerticalMenu'
@@ -17,18 +18,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() {

src/layouts/modules/global-menu/modules/vertical-mix-menu.vue

@@ -9,7 +9,7 @@ import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 import { $t } from '@/locales';
 import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
-import { useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 import FirstLevelMenu from '../components/first-level-menu.vue';
 import GlobalLogo from '../../global-logo/index.vue';
 
@@ -31,6 +31,7 @@ const {
   getActiveFirstLevelMenuKey
   //
 } = useMixMenuContext();
+const { selectedKey } = useMenu();
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
 
@@ -56,15 +57,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() {