refactor(projects): useMixMenuContext replace useMixMenu

src/layouts/context/index.ts

@@ -1,4 +1,47 @@
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { useContext } from '@sa/hooks';
-import { useMixMenu } from '../hooks';
+import { useRouteStore } from '@/store/modules/route';
 
 export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
+
+function useMixMenu() {
+  const route = useRoute();
+  const routeStore = useRouteStore();
+
+  const activeFirstLevelMenuKey = ref('');
+
+  function setActiveFirstLevelMenuKey(key: string) {
+    activeFirstLevelMenuKey.value = key;
+  }
+
+  function getActiveFirstLevelMenuKey() {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    const [firstLevelRouteName] = routeName.split('_');
+
+    setActiveFirstLevelMenuKey(firstLevelRouteName);
+  }
+
+  const menus = computed(
+    () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
+  );
+
+  watch(
+    () => route.name,
+    () => {
+      getActiveFirstLevelMenuKey();
+    },
+    { immediate: true }
+  );
+
+  return {
+    activeFirstLevelMenuKey,
+    setActiveFirstLevelMenuKey,
+    getActiveFirstLevelMenuKey,
+    menus
+  };
+}

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

@@ -2,11 +2,10 @@
 import { computed } from 'vue';
 import { useBoolean } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
-import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
 import { $t } from '@/locales';
-import { useMixMenu } from '../../hooks';
+import { useMixMenuContext } from '../../context';
 import FirstLevelMenu from './first-level-menu.vue';
 import BaseMenu from './base-menu.vue';
 
@@ -16,15 +15,12 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 const { routerPushByKey } = useRouterPush();
 const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenu();
+const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenuContext();
 
 const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
 
-const menus = computed(() => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []);
-
 const showDrawer = computed(() => (drawerVisible.value && menus.value.length) || appStore.mixSiderFixed);
 
 function handleSelectMixMenu(menu: App.Global.Menu) {