fix(menu): make sure the menu is displayed properly on the small screen close #336

src/components/Application/src/AppProvider.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { defineComponent, toRefs, ref } from 'vue';
+  import { defineComponent, toRefs, ref, unref } from 'vue';
 
   import { createAppProviderContext } from './useAppContext';
 
   import designSetting from '/@/settings/designSetting';
   import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
   import { propTypes } from '/@/utils/propTypes';
+  import { appStore } from '/@/store/modules/app';
+  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 
   export default defineComponent({
     name: 'AppProvider',
@@ -14,18 +16,56 @@
       prefixCls: propTypes.string.def(designSetting.prefixCls),
     },
     setup(props, { slots }) {
-      const isMobileRef = ref(false);
+      const isMobile = ref(false);
+      const isSetState = ref(false);
 
       createBreakpointListen(({ screenMap, sizeEnum, width }) => {
         const lgWidth = screenMap.get(sizeEnum.LG);
         if (lgWidth) {
-          isMobileRef.value = width.value - 1 < lgWidth;
+          isMobile.value = width.value - 1 < lgWidth;
         }
+        handleRestoreState();
       });
 
       const { prefixCls } = toRefs(props);
-      createAppProviderContext({ prefixCls, isMobile: isMobileRef });
+      createAppProviderContext({ prefixCls, isMobile });
 
+      function handleRestoreState() {
+        if (unref(isMobile)) {
+          if (!unref(isSetState)) {
+            isSetState.value = true;
+            const {
+              menuSetting: {
+                type: menuType,
+                mode: menuMode,
+                collapsed: menuCollapsed,
+                split: menuSplit,
+              },
+            } = appStore.getProjectConfig;
+            appStore.commitProjectConfigState({
+              menuSetting: {
+                type: MenuTypeEnum.SIDEBAR,
+                mode: MenuModeEnum.INLINE,
+                split: false,
+              },
+            });
+            appStore.commitBeforeMiniState({ menuMode, menuCollapsed, menuType, menuSplit });
+          }
+        } else {
+          if (unref(isSetState)) {
+            isSetState.value = false;
+            const { menuMode, menuCollapsed, menuType, menuSplit } = appStore.getBeforeMiniState;
+            appStore.commitProjectConfigState({
+              menuSetting: {
+                type: menuType,
+                mode: menuMode,
+                collapsed: menuCollapsed,
+                split: menuSplit,
+              },
+            });
+          }
+        }
+      }
       return () => slots.default?.();
     },
   });