canrd-outside / order-erp-front · Commits

Commit 82c3186309971517183fc44bfcac159612e48a7b

Authored by Vben
1 parent 3c4de9b0

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

Inline Side-by-side
Showing 12 changed files with 87 additions and 36 deletions
CHANGELOG.zh_CN.md
  View file @82c3186
... ... @@ -7,6 +7,7 @@
7 7 ### 🐛 Bug Fixes
8 8  
9 9 - 确保 CountDownInput 组件重置清空值
  10 +- 修复分割模式下在小屏幕中显示问题
10 11  
11 12 ## 2.1.0 (2021-03-15)
12 13  
... ...
package.json
  View file @82c3186
... ... @@ -118,7 +118,7 @@
118 118 "vite-plugin-style-import": "^0.8.1",
119 119 "vite-plugin-svg-icons": "^0.3.5",
120 120 "vite-plugin-theme": "^0.5.0",
121   - "vite-plugin-windicss": "0.8.3",
  121 + "vite-plugin-windicss": "0.8.4",
122 122 "vue-eslint-parser": "^7.6.0",
123 123 "yargs": "^16.2.0"
124 124 },
... ...
src/components/Application/src/AppProvider.vue
  View file @82c3186
1 1 <script lang="ts">
2   - import { defineComponent, toRefs, ref } from 'vue';
  2 + import { defineComponent, toRefs, ref, unref } from 'vue';
3 3  
4 4 import { createAppProviderContext } from './useAppContext';
5 5  
6 6 import designSetting from '/@/settings/designSetting';
7 7 import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
8 8 import { propTypes } from '/@/utils/propTypes';
  9 + import { appStore } from '/@/store/modules/app';
  10 + import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
9 11  
10 12 export default defineComponent({
11 13 name: 'AppProvider',
... ... @@ -14,18 +16,56 @@
14 16 prefixCls: propTypes.string.def(designSetting.prefixCls),
15 17 },
16 18 setup(props, { slots }) {
17   - const isMobileRef = ref(false);
  19 + const isMobile = ref(false);
  20 + const isSetState = ref(false);
18 21  
19 22 createBreakpointListen(({ screenMap, sizeEnum, width }) => {
20 23 const lgWidth = screenMap.get(sizeEnum.LG);
21 24 if (lgWidth) {
22   - isMobileRef.value = width.value - 1 < lgWidth;
  25 + isMobile.value = width.value - 1 < lgWidth;
23 26 }
  27 + handleRestoreState();
24 28 });
25 29  
26 30 const { prefixCls } = toRefs(props);
27   - createAppProviderContext({ prefixCls, isMobile: isMobileRef });
  31 + createAppProviderContext({ prefixCls, isMobile });
28 32  
  33 + function handleRestoreState() {
  34 + if (unref(isMobile)) {
  35 + if (!unref(isSetState)) {
  36 + isSetState.value = true;
  37 + const {
  38 + menuSetting: {
  39 + type: menuType,
  40 + mode: menuMode,
  41 + collapsed: menuCollapsed,
  42 + split: menuSplit,
  43 + },
  44 + } = appStore.getProjectConfig;
  45 + appStore.commitProjectConfigState({
  46 + menuSetting: {
  47 + type: MenuTypeEnum.SIDEBAR,
  48 + mode: MenuModeEnum.INLINE,
  49 + split: false,
  50 + },
  51 + });
  52 + appStore.commitBeforeMiniState({ menuMode, menuCollapsed, menuType, menuSplit });
  53 + }
  54 + } else {
  55 + if (unref(isSetState)) {
  56 + isSetState.value = false;
  57 + const { menuMode, menuCollapsed, menuType, menuSplit } = appStore.getBeforeMiniState;
  58 + appStore.commitProjectConfigState({
  59 + menuSetting: {
  60 + type: menuType,
  61 + mode: menuMode,
  62 + collapsed: menuCollapsed,
  63 + split: menuSplit,
  64 + },
  65 + });
  66 + }
  67 + }
  68 + }
29 69 return () => slots.default?.();
30 70 },
31 71 });
... ...
src/components/Menu/src/components/MenuItemContent.vue
  View file @82c3186
1 1 <template>
2   - <span :class="`${prefixCls}-wrapper`">
  2 + <span :class="`${prefixCls}- flex items-center `">
3 3 <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon`" />
4 4 {{ getI18nName }}
5 5 </span>
... ...
src/hooks/event/useBreakpoint.ts
  View file @82c3186
... ... @@ -60,6 +60,7 @@ export function createBreakpointListen(fn?: (opt: CreateCallbackParams) =&gt; void)
60 60 getWindowWidth();
61 61 resizeFn();
62 62 },
  63 + // wait: 100,
63 64 });
64 65  
65 66 getWindowWidth();
... ...
src/layouts/default/sider/LayoutSider.vue
  View file @82c3186
... ... @@ -11,10 +11,9 @@
11 11 collapsible
12 12 :class="getSiderClass"
13 13 :width="getMenuWidth"
14   - :collapsed="getIsMobile ? false : getCollapsed"
  14 + :collapsed="getCollapsed"
15 15 :collapsedWidth="getCollapsedWidth"
16 16 :theme="getMenuTheme"
17   - @collapse="onCollapseChange"
18 17 @breakpoint="onBreakpointChange"
19 18 v-bind="getTriggerAttr"
20 19 >
... ... @@ -66,7 +65,7 @@
66 65  
67 66 useDragLine(sideRef, dragBarRef);
68 67  
69   - const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
  68 + const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
70 69  
71 70 const getMode = computed(() => {
72 71 return unref(getSplit) ? MenuModeEnum.INLINE : null;
... ... @@ -121,7 +120,6 @@
121 120 onBreakpointChange,
122 121 getMode,
123 122 getSplitType,
124   - onCollapseChange,
125 123 getShowTrigger,
126 124 };
127 125 },
... ...
src/layouts/default/sider/useLayoutSider.ts
  View file @82c3186
... ... @@ -11,31 +11,19 @@ import { useDebounce } from &#39;/@/hooks/core/useDebounce&#39;;
11 11 * Handle related operations of menu events
12 12 */
13 13 export function useSiderEvent() {
14   - const initRef = ref(false);
15 14 const brokenRef = ref(false);
16   - const collapseRef = ref(true);
17 15  
18   - const { setMenuSetting, getCollapsed, getMiniWidthNumber } = useMenuSetting();
  16 + const { getMiniWidthNumber } = useMenuSetting();
19 17  
20 18 const getCollapsedWidth = computed(() => {
21 19 return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
22 20 });
23 21  
24   - function onCollapseChange(val: boolean) {
25   - if (initRef.value) {
26   - collapseRef.value = val;
27   - setMenuSetting({ collapsed: val });
28   - } else {
29   - !unref(getCollapsed) && setMenuSetting({ collapsed: val });
30   - }
31   - initRef.value = true;
32   - }
33   -
34 22 function onBreakpointChange(broken: boolean) {
35 23 brokenRef.value = broken;
36 24 }
37 25  
38   - return { getCollapsedWidth, onCollapseChange, onBreakpointChange };
  26 + return { getCollapsedWidth, onBreakpointChange };
39 27 }
40 28  
41 29 /**
... ...
src/settings/designSetting.ts
  View file @82c3186
... ... @@ -31,8 +31,8 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
31 31  
32 32 // sider preset color
33 33 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
34   - '#001529',
35 34 '#273352',
  35 + '#001529',
36 36 '#ffffff',
37 37 '#191b24',
38 38 '#191a23',
... ...
src/settings/projectSetting.ts
  View file @82c3186
... ... @@ -8,6 +8,7 @@ import {
8 8 RouterTransitionEnum,
9 9 SettingButtonPositionEnum,
10 10 } from '/@/enums/appEnum';
  11 +import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './designSetting';
11 12 import { primaryColor, themeMode } from '../../build/config/themeConfig';
12 13  
13 14 // ! You need to clear the browser cache after the change
... ... @@ -51,7 +52,7 @@ const setting: ProjectConfig = {
51 52 // Header configuration
52 53 headerSetting: {
53 54 // header bg color
54   - bgColor: '#ffffff',
  55 + bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
55 56 // Fixed at the top
56 57 fixed: true,
57 58 // Whether to show top
... ... @@ -74,7 +75,7 @@ const setting: ProjectConfig = {
74 75 // Menu configuration
75 76 menuSetting: {
76 77 // sidebar menu bg color
77   - bgColor: '#001529',
  78 + bgColor: SIDE_BAR_BG_COLOR_LIST[0],
78 79 // Whether to fix the left menu
79 80 fixed: true,
80 81 // Menu collapse
... ...
src/store/modules/app.ts
  View file @82c3186
1 1 import type { ProjectConfig } from '/#/config';
  2 +import type { BeforeMiniState } from '../types';
2 3  
3 4 import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators';
4 5 import store from '/@/store';
... ... @@ -30,10 +31,17 @@ export default class App extends VuexModule {
30 31 // set main overflow hidden
31 32 private lockMainScrollState = false;
32 33  
  34 + // When the window shrinks, remember some states, and restore these states when the window is restored
  35 + private beforeMiniState: BeforeMiniState = {};
  36 +
33 37 get getPageLoading() {
34 38 return this.pageLoadingState;
35 39 }
36 40  
  41 + get getBeforeMiniState() {
  42 + return this.beforeMiniState;
  43 + }
  44 +
37 45 get getLockMainScrollState() {
38 46 return this.lockMainScrollState;
39 47 }
... ... @@ -48,6 +56,11 @@ export default class App extends VuexModule {
48 56 }
49 57  
50 58 @Mutation
  59 + commitBeforeMiniState(state: BeforeMiniState): void {
  60 + this.beforeMiniState = state;
  61 + }
  62 +
  63 + @Mutation
51 64 commitLockMainScrollState(lock: boolean): void {
52 65 this.lockMainScrollState = lock;
53 66 }
... ...
src/store/types.ts
  View file @82c3186
  1 +import { MenuModeEnum, MenuTypeEnum } from '../enums/menuEnum';
  2 +
1 3 export interface LockInfo {
2 4 pwd: string | undefined;
3 5 isLock: boolean;
... ... @@ -13,3 +15,10 @@ export interface UserInfo {
13 15 // 介绍
14 16 desc?: string;
15 17 }
  18 +
  19 +export interface BeforeMiniState {
  20 + menuCollapsed?: boolean;
  21 + menuSplit?: boolean;
  22 + menuMode?: MenuModeEnum;
  23 + menuType?: MenuTypeEnum;
  24 +}
... ...
yarn.lock
  View file @82c3186
... ... @@ -2379,10 +2379,10 @@
2379 2379 dependencies:
2380 2380 vue-demi latest
2381 2381  
2382   -"@windicss/plugin-utils@0.8.3":
2383   - version "0.8.3"
2384   - resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.8.3.tgz#b694121cb1b4e022c1ebb97d2507d292ca1ce293"
2385   - integrity sha512-Tk0/EOwRnfi3KzvYJwfDyrImbHRXd7jMUw0MsAJWee0pzHre5Se7IM8/8SrcafJ29aL3v9KcB/qd/uBD8TBmow==
  2382 +"@windicss/plugin-utils@0.8.4":
  2383 + version "0.8.4"
  2384 + resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.8.4.tgz#6613bad52cea86a260a040c37069234baac377ae"
  2385 + integrity sha512-i79nEGkC+1Cj+Trtn5SL/bBn1IYqj/N3T6xYHaRnTKJY3mGdsn7ypxvGditBVkGUw0dTZUiHX0nONHLGqQVW7g==
2386 2386 dependencies:
2387 2387 fast-glob "^3.2.5"
2388 2388 micromatch "^4.0.2"
... ... @@ -11626,12 +11626,12 @@ vite-plugin-theme@^0.5.0:
11626 11626 tinycolor2 "^1.4.2"
11627 11627 ts-jest "^26.5.3"
11628 11628  
11629   -vite-plugin-windicss@0.8.3:
11630   - version "0.8.3"
11631   - resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.8.3.tgz#81944473f642a4d4da81f9f8d77012e73095e4a3"
11632   - integrity sha512-VhiYUBIexKD1Il1dxV6yB4SN+ufza3HWhKK7IFFGrf4gj2JqSX9MNUdS2jPOEInyJszw+fT7WrHj1hsYd7ROJA==
  11629 +vite-plugin-windicss@0.8.4:
  11630 + version "0.8.4"
  11631 + resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.8.4.tgz#d064822f2b9e6e2a5385c3fc0fdcf302e2ee545d"
  11632 + integrity sha512-pgAZ7NDnDKYwNUJTy/j0jerh0JRqehu/dEDjM+AKChPD65o6G0WzbpVuHLSkiBcqUzDNHdRU0CodlL4DoCYE3w==
11633 11633 dependencies:
11634   - "@windicss/plugin-utils" "0.8.3"
  11634 + "@windicss/plugin-utils" "0.8.4"
11635 11635 windicss "^2.4.5"
11636 11636  
11637 11637 vite@2.1.1:
... ...