refactor(projects)!: refactor global menu & support `reversed-horizon…

…tal-mix-menu`. close #365

src/constants/app.ts

@@ -1,5 +1,9 @@
 import { transformRecordToOption } from '@/utils/common';
 
+export const GLOBAL_HEADER_MENU_ID = '__GLOBAL_HEADER_MENU__';
+
+export const GLOBAL_SIDER_MENU_ID = '__GLOBAL_SIDER_MENU__';
+
 export const themeSchemaRecord: Record<UnionKey.ThemeScheme, App.I18n.I18nKey> = {
  light: 'theme.themeSchema.light',
  dark: 'theme.themeSchema.dark',

src/hooks/common/router.ts

@@ -30,17 +30,30 @@ export function useRouterPush(inSetup = true) {
  name: key
  };
 
- if (query) {
+ if (Object.keys(query || {}).length) {
  routeLocation.query = query;
  }
 
- if (params) {
+ if (Object.keys(params || {}).length) {
  routeLocation.params = params;
  }
 
  return routerPush(routeLocation);
  }
 
+ function routerPushByKeyWithMetaQuery(key: RouteKey) {
+ const allRoutes = router.getRoutes();
+ const meta = allRoutes.find(item => item.name === key)?.meta || null;
+
+ const query: Record<string, string> = {};
+
+ meta?.query?.forEach(item => {
+ query[item.key] = item.value;
+ });
+
+ return routerPushByKey(key, { query });
+ }
+
  async function toHome() {
  return routerPushByKey('root');
  }
@@ -95,6 +108,7 @@ export function useRouterPush(inSetup = true) {
  routerPush,
  routerBack,
  routerPushByKey,
+ routerPushByKeyWithMetaQuery,
  toLogin,
  toggleLoginModule,
  redirectFromLogin

src/layouts/base-layout/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import type { LayoutMode } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
@@ -18,38 +18,44 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { menus } = setupMixMenuContext();
+const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = setupMixMenuContext();
+
+const GlobalMenu = defineAsyncComponent(() => import('../modules/global-menu/index.vue'));
 
 const layoutMode = computed(() => {
  const vertical: LayoutMode = 'vertical';
  const horizontal: LayoutMode = 'horizontal';
  return themeStore.layout.mode.includes(vertical) ? vertical : horizontal;
 });
 
-const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
- vertical: {
- showLogo: false,
- showMenu: false,
- showMenuToggler: true
- },
- 'vertical-mix': {
- showLogo: false,
- showMenu: false,
- showMenuToggler: false
- },
- horizontal: {
- showLogo: true,
- showMenu: true,
- showMenuToggler: false
- },
- 'horizontal-mix': {
- showLogo: true,
- showMenu: true,
- showMenuToggler: false
- }
-};
-
-const headerProps = computed(() => headerPropsConfig[themeStore.layout.mode]);
+const headerProps = computed(() => {
+ const { mode, reverseHorizontalMix } = themeStore.layout;
+
+ const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
+ vertical: {
+ showLogo: false,
+ showMenu: false,
+ showMenuToggler: true
+ },
+ 'vertical-mix': {
+ showLogo: false,
+ showMenu: false,
+ showMenuToggler: false
+ },
+ horizontal: {
+ showLogo: true,
+ showMenu: true,
+ showMenuToggler: false
+ },
+ 'horizontal-mix': {
+ showLogo: true,
+ showMenu: true,
+ showMenuToggler: reverseHorizontalMix && isActiveFirstLevelMenuHasChildren.value
+ }
+ };
+
+ return headerPropsConfig[mode];
+});
 
 const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
 
@@ -62,11 +68,16 @@ const siderWidth = computed(() => getSiderWidth());
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
 function getSiderWidth() {
+ const { reverseHorizontalMix } = themeStore.layout;
  const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
 
+ if (isHorizontalMix.value && reverseHorizontalMix) {
+ return isActiveFirstLevelMenuHasChildren.value ? width : 0;
+ }
+
  let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;
 
- if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
+ if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
  w += mixChildMenuWidth;
  }
 
@@ -78,7 +89,7 @@ function getSiderCollapsedWidth() {
 
  let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
 
- if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
+ if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
  w += mixChildMenuWidth;
  }
 
@@ -116,6 +127,7 @@ function getSiderCollapsedWidth() {
  <template #sider>
  <GlobalSider />
  </template>
+ <GlobalMenu />
  <GlobalContent />
  <ThemeDrawer />
  <template #footer>

src/layouts/context/index.ts

@@ -26,10 +26,30 @@ function useMixMenu() {
  setActiveFirstLevelMenuKey(firstLevelRouteName);
  }
 
- const menus = computed(
+ const allMenus = computed<App.Global.Menu[]>(() => routeStore.menus);
+
+ const firstLevelMenus = computed<App.Global.Menu[]>(() =>
+ routeStore.menus.map(menu => {
+ const { children: _, ...rest } = menu;
+
+ return rest;
+ })
+ );
+
+ const childLevelMenus = computed<App.Global.Menu[]>(
  () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
  );
 
+ const isActiveFirstLevelMenuHasChildren = computed(() => {
+ if (!activeFirstLevelMenuKey.value) {
+ return false;
+ }
+
+ const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
+
+ return Boolean(findItem?.children?.length);
+ });
+
  watch(
  () => route.name,
  () => {
@@ -39,9 +59,12 @@ function useMixMenu() {
  );
 
  return {
+ allMenus,
+ firstLevelMenus,
+ childLevelMenus,
+ isActiveFirstLevelMenuHasChildren,
  activeFirstLevelMenuKey,
  setActiveFirstLevelMenuKey,
- getActiveFirstLevelMenuKey,
- menus
+ getActiveFirstLevelMenuKey
  };
 }

src/layouts/modules/global-header/index.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import HorizontalMenu from '../global-menu/base-menu.vue';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import GlobalSearch from '../global-search/index.vue';
-import { useMixMenuContext } from '../../context';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
 
@@ -29,29 +26,15 @@ defineProps<Props>();
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 const { isFullscreen, toggle } = useFullscreen();
-const { menus } = useMixMenuContext();
-
-const headerMenus = computed(() => {
- if (themeStore.layout.mode === 'horizontal') {
- return routeStore.menus;
- }
-
- if (themeStore.layout.mode === 'horizontal-mix') {
- return menus.value;
- }
-
- return [];
-});
 </script>
 
 <template>
  <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
  <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
- <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
+ <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
+ <div v-if="showMenu" :id="GLOBAL_HEADER_MENU_ID" class="h-full flex-y-center flex-1-hidden"></div>
  <div v-else class="h-full flex-y-center flex-1-hidden">
- <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
  <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
  </div>
  <div class="h-full flex-y-center justify-end">