optimize(projects): optimize menu selectedKey

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() {