fix(projects): fix mix-menu blank. fixed #389 & cache mixMenuFixed

src/layouts/base-layout/index.vue

@@ -18,6 +18,7 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
+const { menus } = setupMixMenuContext();
 
 const layoutMode = computed(() => {
   const vertical: LayoutMode = 'vertical';
@@ -65,7 +66,7 @@ function getSiderWidth() {
 
   let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;
 
-  if (isVerticalMix.value && appStore.mixSiderFixed) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
     w += mixChildMenuWidth;
   }
 
@@ -77,14 +78,12 @@ function getSiderCollapsedWidth() {
 
   let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
 
-  if (isVerticalMix.value && appStore.mixSiderFixed) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
     w += mixChildMenuWidth;
   }
 
   return w;
 }
-
-setupMixMenuContext();
 </script>
 
 <template>

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

@@ -21,7 +21,9 @@ const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFir
 
 const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
 
-const showDrawer = computed(() => (drawerVisible.value && menus.value.length) || appStore.mixSiderFixed);
+const hasMenus = computed(() => menus.value.length > 0);
+
+const showDrawer = computed(() => hasMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
 
 function handleSelectMixMenu(menu: App.Global.Menu) {
   setActiveFirstLevelMenuKey(menu.key);
@@ -46,7 +48,7 @@ function handleResetActiveMenu() {
     </FirstLevelMenu>
     <div
       class="relative h-full transition-width-300"
-      :style="{ width: appStore.mixSiderFixed ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+      :style="{ width: appStore.mixSiderFixed && hasMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
     >
       <DarkModeContainer
         class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"

src/store/modules/app/index.ts

@@ -1,6 +1,6 @@
 import { effectScope, onScopeDispose, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
 import { router } from '@/router';
@@ -22,7 +22,11 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
   const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
   const { bool: contentXScrollable, setBool: setContentXScrollable } = useBoolean();
   const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
-  const { bool: mixSiderFixed, setBool: setMixSiderFixed, toggle: toggleMixSiderFixed } = useBoolean();
+  const {
+    bool: mixSiderFixed,
+    setBool: setMixSiderFixed,
+    toggle: toggleMixSiderFixed
+  } = useBoolean(localStg.get('mixSiderFixed') === 'Y');
 
   /** Is mobile layout */
   const isMobile = breakpoints.smaller('sm');
@@ -107,6 +111,11 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     });
   });
 
+  // cache mixSiderFixed
+  useEventListener(window, 'beforeunload', () => {
+    localStg.set('mixSiderFixed', mixSiderFixed.value ? 'Y' : 'N');
+  });
+
   /** On scope dispose */
   onScopeDispose(() => {
     scope.stop();

src/typings/storage.d.ts

@@ -14,6 +14,8 @@ declare namespace StorageType {
     lang: App.I18n.LangType;
     /** The token */
     token: string;
+    /** Fixed sider with mix-menu */
+    mixSiderFixed: CommonType.YesOrNo;
     /** The refresh token */
     refreshToken: string;
     /** The user info */