refactor(hooks): optimize useContext and update useMixMenuContext

src/layouts/base-layout/index.vue

@@ -10,7 +10,7 @@ import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
 import ThemeDrawer from '../modules/theme-drawer/index.vue';
-import { setupMixMenuContext } from '../context';
+import { provideMixMenuContext } from '../modules/global-menu/context';
 
 defineOptions({
   name: 'BaseLayout'
@@ -18,7 +18,7 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = setupMixMenuContext();
+const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = provideMixMenuContext();
 
 const GlobalMenu = defineAsyncComponent(() => import('../modules/global-menu/index.vue'));
 

src/layouts/modules/global-menu/context/index.ts

@@ -5,7 +5,7 @@ import type { RouteKey } from '@elegant-router/types';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 
-export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
+export const [provideMixMenuContext, useMixMenuContext] = useContext('MixMenu', useMixMenu);
 
 function useMixMenu() {
   const route = useRoute();

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

@@ -2,7 +2,7 @@
 import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMenu } from '../../../context';
+import { useMenu } from '../context';
 
 defineOptions({
   name: 'HorizontalMenu'

src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue

@@ -7,7 +7,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 { useMenu, useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../context';
 
 defineOptions({
   name: 'TopHybridHeaderFirst'
@@ -18,7 +18,8 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } = useMixMenuContext();
+const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } =
+  useMixMenuContext('TopHybridHeaderFirst');
 const { selectedKey } = useMenu();
 
 const expandedKeys = ref<string[]>([]);

src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue

@@ -4,7 +4,7 @@ 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 { useMenu, useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../context';
 
 defineOptions({
   name: 'TopHybridSidebarFirst'
@@ -13,7 +13,8 @@ defineOptions({
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } = useMixMenuContext();
+const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } =
+  useMixMenuContext('TopHybridSidebarFirst');
 const { selectedKey } = useMenu();
 </script>
 

src/layouts/modules/global-menu/modules/vertical-hybrid-header-first.vue

@@ -9,7 +9,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 { useMenu, useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../context';
 import FirstLevelMenu from '../components/first-level-menu.vue';
 import GlobalLogo from '../../global-logo/index.vue';
 
@@ -34,7 +34,7 @@ const {
   handleSelectSecondLevelMenu,
   getActiveSecondLevelMenuKey,
   childLevelMenus
-} = useMixMenuContext();
+} = useMixMenuContext('VerticalHybridHeaderFirst');
 const { selectedKey } = useMenu();
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);

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

@@ -7,7 +7,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 { useMenu } from '../../../context';
+import { useMenu } from '../context';
 
 defineOptions({
   name: 'VerticalMenu'

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

@@ -10,7 +10,7 @@ import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 import { $t } from '@/locales';
-import { useMenu, useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../context';
 import FirstLevelMenu from '../components/first-level-menu.vue';
 import GlobalLogo from '../../global-logo/index.vue';
 
@@ -31,7 +31,7 @@ const {
   isActiveFirstLevelMenuHasChildren,
   getActiveFirstLevelMenuKey,
   handleSelectFirstLevelMenu
-} = useMixMenuContext();
+} = useMixMenuContext('VerticalMixMenu');
 const { selectedKey } = useMenu();
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);