fix(projects): fix mix-menu blank. fixed #389 & cache mixMenuFixed
This commit is contained in:
parent
1e14293d67
commit
93c7ff7122
@ -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>
|
||||
|
@ -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"
|
||||
|
@ -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();
|
||||
|
2
src/typings/storage.d.ts
vendored
2
src/typings/storage.d.ts
vendored
@ -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 */
|
||||
|
Loading…
Reference in New Issue
Block a user