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

CHANGELOG.zh_CN.md

@@ -7,6 +7,7 @@
 ### 🐛 Bug Fixes
 
 - 确保 CountDownInput 组件重置清空值
+- 修复分割模式下在小屏幕中显示问题
 
 ## 2.1.0 (2021-03-15)
 

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"
   },

src/components/Application/src/AppProvider.vue

 <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?.();
     },
   });

src/components/Menu/src/components/MenuItemContent.vue

 <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>

src/hooks/event/useBreakpoint.ts

@@ -60,6 +60,7 @@ export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void)
       getWindowWidth();
       resizeFn();
     },
+    // wait: 100,
   });
 
   getWindowWidth();

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,
       };
     },

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 };
 }
 
 /**

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',

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

src/store/modules/app.ts

 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;

src/store/types.ts

+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;
+}

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: