fix(projects): fixed abnormal display of dynamic switching size menu

mufeng889 · Sep 7, 2024 · 79c1ae1 · 79c1ae1
1 parent e01410a
commit 79c1ae1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git 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}
       />
-
-      <ThemeDrawer />
+      <Suspense fallback={null}>
+        <ThemeDrawer />
+      </Suspense>
     </AdminLayout>
   );
 };

diff --git 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<HTMLElement | null>();
 
+  const isMobile = useAppSelector(getIsMobile);
+
   useEffect(() => {
     const element = document.getElementById(id);
 
     setContainers(element);
-  }, []);
+  }, [isMobile]);
 
   return container;
 }