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

This commit is contained in:
Soybean 2024-04-25 22:07:23 +08:00
parent 1e14293d67
commit 93c7ff7122
4 changed files with 20 additions and 8 deletions

View File

@ -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>

View File

@ -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"

View File

@ -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();

View File

@ -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 */