From 82c3186309971517183fc44bfcac159612e48a7b Mon Sep 17 00:00:00 2001
From: Vben <anncwb@126.com>
Date: Wed, 17 Mar 2021 21:08:46 +0800
Subject: [PATCH] fix(menu): make sure the menu is displayed properly on the
 small screen close #336

---
 CHANGELOG.zh_CN.md                            |  1 +
 package.json                                  |  2 +-
 .../Application/src/AppProvider.vue           | 48 +++++++++++++++++--
 .../Menu/src/components/MenuItemContent.vue   |  2 +-
 src/hooks/event/useBreakpoint.ts              |  1 +
 src/layouts/default/sider/LayoutSider.vue     |  6 +--
 src/layouts/default/sider/useLayoutSider.ts   | 16 +------
 src/settings/designSetting.ts                 |  2 +-
 src/settings/projectSetting.ts                |  5 +-
 src/store/modules/app.ts                      | 13 +++++
 src/store/types.ts                            |  9 ++++
 yarn.lock                                     | 18 +++----
 12 files changed, 87 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 1e0c34d1..e6fd83b2 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -7,6 +7,7 @@
 ### 🐛 Bug Fixes
 
 - 确保 CountDownInput 组件重置清空值
+- 修复分割模式下在小屏幕中显示问题
 
 ## 2.1.0 (2021-03-15)
 
diff --git a/package.json b/package.json
index f610d8e2..764ab462 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,7 @@
     "vite-plugin-style-import": "^0.8.1",
     "vite-plugin-svg-icons": "^0.3.5",
     "vite-plugin-theme": "^0.5.0",
-    "vite-plugin-windicss": "0.8.3",
+    "vite-plugin-windicss": "0.8.4",
     "vue-eslint-parser": "^7.6.0",
     "yargs": "^16.2.0"
   },
diff --git a/src/components/Application/src/AppProvider.vue b/src/components/Application/src/AppProvider.vue
index 354a1bf1..35e6867e 100644
--- a/src/components/Application/src/AppProvider.vue
+++ b/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?.();
     },
   });
diff --git a/src/components/Menu/src/components/MenuItemContent.vue b/src/components/Menu/src/components/MenuItemContent.vue
index c3ad86ab..d0359896 100644
--- a/src/components/Menu/src/components/MenuItemContent.vue
+++ b/src/components/Menu/src/components/MenuItemContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="`${prefixCls}-wrapper`">
+  <span :class="`${prefixCls}- flex items-center `">
     <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon`" />
     {{ getI18nName }}
   </span>
diff --git a/src/hooks/event/useBreakpoint.ts b/src/hooks/event/useBreakpoint.ts
index c132e758..01bbbecc 100644
--- a/src/hooks/event/useBreakpoint.ts
+++ b/src/hooks/event/useBreakpoint.ts
@@ -60,6 +60,7 @@ export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void)
       getWindowWidth();
       resizeFn();
     },
+    // wait: 100,
   });
 
   getWindowWidth();
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
index e8fb1c52..b4b5da09 100644
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -11,10 +11,9 @@
     collapsible
     :class="getSiderClass"
     :width="getMenuWidth"
-    :collapsed="getIsMobile ? false : getCollapsed"
+    :collapsed="getCollapsed"
     :collapsedWidth="getCollapsedWidth"
     :theme="getMenuTheme"
-    @collapse="onCollapseChange"
     @breakpoint="onBreakpointChange"
     v-bind="getTriggerAttr"
   >
@@ -66,7 +65,7 @@
 
       useDragLine(sideRef, dragBarRef);
 
-      const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
+      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
 
       const getMode = computed(() => {
         return unref(getSplit) ? MenuModeEnum.INLINE : null;
@@ -121,7 +120,6 @@
         onBreakpointChange,
         getMode,
         getSplitType,
-        onCollapseChange,
         getShowTrigger,
       };
     },
diff --git a/src/layouts/default/sider/useLayoutSider.ts b/src/layouts/default/sider/useLayoutSider.ts
index bdba1f0c..01617fb0 100644
--- a/src/layouts/default/sider/useLayoutSider.ts
+++ b/src/layouts/default/sider/useLayoutSider.ts
@@ -11,31 +11,19 @@ import { useDebounce } from '/@/hooks/core/useDebounce';
  * Handle related operations of menu events
  */
 export function useSiderEvent() {
-  const initRef = ref(false);
   const brokenRef = ref(false);
-  const collapseRef = ref(true);
 
-  const { setMenuSetting, getCollapsed, getMiniWidthNumber } = useMenuSetting();
+  const { getMiniWidthNumber } = useMenuSetting();
 
   const getCollapsedWidth = computed(() => {
     return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
   });
 
-  function onCollapseChange(val: boolean) {
-    if (initRef.value) {
-      collapseRef.value = val;
-      setMenuSetting({ collapsed: val });
-    } else {
-      !unref(getCollapsed) && setMenuSetting({ collapsed: val });
-    }
-    initRef.value = true;
-  }
-
   function onBreakpointChange(broken: boolean) {
     brokenRef.value = broken;
   }
 
-  return { getCollapsedWidth, onCollapseChange, onBreakpointChange };
+  return { getCollapsedWidth, onBreakpointChange };
 }
 
 /**
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
index e354d906..df0d679b 100644
--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@@ -31,8 +31,8 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
 
 // sider preset color
 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
-  '#001529',
   '#273352',
+  '#001529',
   '#ffffff',
   '#191b24',
   '#191a23',
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index db877800..11287dad 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -8,6 +8,7 @@ import {
   RouterTransitionEnum,
   SettingButtonPositionEnum,
 } from '/@/enums/appEnum';
+import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './designSetting';
 import { primaryColor, themeMode } from '../../build/config/themeConfig';
 
 // ! You need to clear the browser cache after the change
@@ -51,7 +52,7 @@ const setting: ProjectConfig = {
   // Header configuration
   headerSetting: {
     // header bg color
-    bgColor: '#ffffff',
+    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
     // Fixed at the top
     fixed: true,
     // Whether to show top
@@ -74,7 +75,7 @@ const setting: ProjectConfig = {
   // Menu configuration
   menuSetting: {
     // sidebar menu bg color
-    bgColor: '#001529',
+    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
     //  Whether to fix the left menu
     fixed: true,
     // Menu collapse
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 075d6834..a88a7ecd 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,4 +1,5 @@
 import type { ProjectConfig } from '/#/config';
+import type { BeforeMiniState } from '../types';
 
 import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators';
 import store from '/@/store';
@@ -30,10 +31,17 @@ export default class App extends VuexModule {
   // set main overflow hidden
   private lockMainScrollState = false;
 
+  // When the window shrinks, remember some states, and restore these states when the window is restored
+  private beforeMiniState: BeforeMiniState = {};
+
   get getPageLoading() {
     return this.pageLoadingState;
   }
 
+  get getBeforeMiniState() {
+    return this.beforeMiniState;
+  }
+
   get getLockMainScrollState() {
     return this.lockMainScrollState;
   }
@@ -47,6 +55,11 @@ export default class App extends VuexModule {
     this.pageLoadingState = loading;
   }
 
+  @Mutation
+  commitBeforeMiniState(state: BeforeMiniState): void {
+    this.beforeMiniState = state;
+  }
+
   @Mutation
   commitLockMainScrollState(lock: boolean): void {
     this.lockMainScrollState = lock;
diff --git a/src/store/types.ts b/src/store/types.ts
index a485641b..d2516d0e 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,3 +1,5 @@
+import { MenuModeEnum, MenuTypeEnum } from '../enums/menuEnum';
+
 export interface LockInfo {
   pwd: string | undefined;
   isLock: boolean;
@@ -13,3 +15,10 @@ export interface UserInfo {
   // 介绍
   desc?: string;
 }
+
+export interface BeforeMiniState {
+  menuCollapsed?: boolean;
+  menuSplit?: boolean;
+  menuMode?: MenuModeEnum;
+  menuType?: MenuTypeEnum;
+}
diff --git a/yarn.lock b/yarn.lock
index 1144e79a..64b4ce22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2379,10 +2379,10 @@
   dependencies:
     vue-demi latest
 
-"@windicss/plugin-utils@0.8.3":
-  version "0.8.3"
-  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.8.3.tgz#b694121cb1b4e022c1ebb97d2507d292ca1ce293"
-  integrity sha512-Tk0/EOwRnfi3KzvYJwfDyrImbHRXd7jMUw0MsAJWee0pzHre5Se7IM8/8SrcafJ29aL3v9KcB/qd/uBD8TBmow==
+"@windicss/plugin-utils@0.8.4":
+  version "0.8.4"
+  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.8.4.tgz#6613bad52cea86a260a040c37069234baac377ae"
+  integrity sha512-i79nEGkC+1Cj+Trtn5SL/bBn1IYqj/N3T6xYHaRnTKJY3mGdsn7ypxvGditBVkGUw0dTZUiHX0nONHLGqQVW7g==
   dependencies:
     fast-glob "^3.2.5"
     micromatch "^4.0.2"
@@ -11626,12 +11626,12 @@ vite-plugin-theme@^0.5.0:
     tinycolor2 "^1.4.2"
     ts-jest "^26.5.3"
 
-vite-plugin-windicss@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.8.3.tgz#81944473f642a4d4da81f9f8d77012e73095e4a3"
-  integrity sha512-VhiYUBIexKD1Il1dxV6yB4SN+ufza3HWhKK7IFFGrf4gj2JqSX9MNUdS2jPOEInyJszw+fT7WrHj1hsYd7ROJA==
+vite-plugin-windicss@0.8.4:
+  version "0.8.4"
+  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.8.4.tgz#d064822f2b9e6e2a5385c3fc0fdcf302e2ee545d"
+  integrity sha512-pgAZ7NDnDKYwNUJTy/j0jerh0JRqehu/dEDjM+AKChPD65o6G0WzbpVuHLSkiBcqUzDNHdRU0CodlL4DoCYE3w==
   dependencies:
-    "@windicss/plugin-utils" "0.8.3"
+    "@windicss/plugin-utils" "0.8.4"
     windicss "^2.4.5"
 
 vite@2.1.1: