From 79c1ae1b007daa6e472ecec88dd834d4f0a29a63 Mon Sep 17 00:00:00 2001
From: wang <1509326266@qq.com>
Date: Sat, 7 Sep 2024 15:02:05 +0800
Subject: [PATCH] fix(projects): fixed abnormal display of dynamic switching
size menu
---
src/layouts/base-layout/BaseLayout.tsx | 18 ++++++++++++++----
.../modules/global-menu/modules/hook.ts | 6 +++++-
2 files changed, 19 insertions(+), 5 deletions(-)
diff --git a/src/layouts/base-layout/BaseLayout.tsx b/src/layouts/base-layout/BaseLayout.tsx
index 70a714b..4a865eb 100644
--- a/src/layouts/base-layout/BaseLayout.tsx
+++ b/src/layouts/base-layout/BaseLayout.tsx
@@ -2,6 +2,7 @@ import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
import type { LayoutMode } from '@sa/materials';
import { configResponsive } from 'ahooks';
import './index.scss';
+import { Suspense } from 'react';
import {
getContentXScrollable,
getFullContent,
@@ -10,15 +11,16 @@ import {
setIsMobile,
setSiderCollapse
} from '@/store/slice/app';
-import { getThemeSettings } from '@/store/slice/theme';
+import { getThemeSettings, setLayoutMode } from '@/store/slice/theme';
import GlobalContent from '../modules/global-content';
import GlobalFooter from '../modules/global-footer';
import GlobalHeader from '../modules/global-header';
import GlobalSider from '../modules/global-sider';
-import ThemeDrawer from '../modules/theme-drawer';
import GlobalTab from '../modules/global-tab';
import GlobalMenu from '../modules/global-menu';
+const ThemeDrawer = lazy(() => import('../modules/theme-drawer'));
+
const LAYOUT_MODE_VERTICAL: LayoutMode = 'vertical';
const LAYOUT_MODE_HORIZONTAL: LayoutMode = 'horizontal';
const LAYOUT_MODE_VERTICAL_MIX = 'vertical-mix';
@@ -65,9 +67,13 @@ const BaseLayout = () => {
: LAYOUT_MODE_HORIZONTAL;
const headerProps = HEADER_PROPS_CONFIG[themeSettings.layout.mode];
+
const isMobile = !responsive.sm;
+
const siderVisible = themeSettings.layout.mode !== LAYOUT_MODE_HORIZONTAL;
+
const isVerticalMix = themeSettings.layout.mode === LAYOUT_MODE_VERTICAL_MIX;
+
const isHorizontalMix = themeSettings.layout.mode === LAYOUT_MODE_HORIZONTAL_MIX;
function getSiderWidth() {
@@ -109,6 +115,9 @@ const BaseLayout = () => {
useUpdateEffect(() => {
dispatch(setIsMobile(isMobile));
+ if (isMobile) {
+ dispatch(setLayoutMode('vertical'));
+ }
}, [isMobile]);
return (
@@ -157,8 +166,9 @@ const BaseLayout = () => {
reverse={themeSettings.layout.reverseHorizontalMix}
mode={themeSettings.layout.mode}
/>
-
-
+
+
+
);
};
diff --git a/src/layouts/modules/global-menu/modules/hook.ts b/src/layouts/modules/global-menu/modules/hook.ts
index 654e7e0..73958ca 100644
--- a/src/layouts/modules/global-menu/modules/hook.ts
+++ b/src/layouts/modules/global-menu/modules/hook.ts
@@ -1,11 +1,15 @@
+import { getIsMobile } from '@/store/slice/app';
+
export function useGetElementById(id: string) {
const [container, setContainers] = useState();
+ const isMobile = useAppSelector(getIsMobile);
+
useEffect(() => {
const element = document.getElementById(id);
setContainers(element);
- }, []);
+ }, [isMobile]);
return container;
}