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

6 years ago · 82c3186309
12 changed files with 87 additions and 36 deletions
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@ -7,6 +7,7 @@
 ### 🐛 Bug Fixes

 - 确保 CountDownInput 组件重置清空值
+- 修复分割模式下在小屏幕中显示问题

 ## 2.1.0 (2021-03-15)

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

 /**
--- 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',
--- 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
--- 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;
--- 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;
+}
--- 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: