From 11178d8fd509c0d9ac33e4b41ae7301aabbcbf29 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Mon, 11 Oct 2021 15:14:00 +0800 Subject: [PATCH] perf: layout --- src/layout/components/setting/index.vue | 63 +++++++++++++++++++++---- src/layout/index.vue | 49 +++++++++++-------- src/layout/types.ts | 15 ++++++ src/store/modules/app.ts | 7 +++ tsconfig.json | 2 +- 5 files changed, 108 insertions(+), 28 deletions(-) diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 1b56d372f..3c0ad7122 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -4,8 +4,17 @@ import panel from "../panel/index.vue"; import { useRouter } from "vue-router"; import { emitter } from "/@/utils/mitt"; import { templateRef } from "@vueuse/core"; +import { debounce } from "/@/utils/debounce"; +import { useAppStoreHook } from "/@/store/modules/app"; import { storageLocal, storageSession } from "/@/utils/storage"; -import { reactive, ref, unref, useCssModule, getCurrentInstance } from "vue"; +import { + reactive, + ref, + unref, + watch, + useCssModule, + getCurrentInstance +} from "vue"; const router = useRouter(); const { isSelect } = useCssModule(); @@ -124,13 +133,51 @@ function logoChange() { emitter.emit("logoChange", unref(logoVal)); } -function setTheme(layout: string, theme: string, dom: HTMLElement) { +function setFalse(Doms): any { + Doms.forEach(v => { + toggleClass(false, isSelect, unref(v)); + }); +} + +watch(instance, ({ layout }) => { + switch (layout["layout"]) { + case "vertical-dark": + toggleClass(true, isSelect, unref(verticalDarkDom)); + debounce( + setFalse([verticalLightDom, horizontalDarkDom, horizontalLightDom]), + 50 + ); + break; + case "vertical-light": + toggleClass(true, isSelect, unref(verticalLightDom)); + debounce( + setFalse([verticalDarkDom, horizontalDarkDom, horizontalLightDom]), + 50 + ); + break; + case "horizontal-dark": + toggleClass(true, isSelect, unref(horizontalDarkDom)); + debounce( + setFalse([verticalDarkDom, verticalLightDom, horizontalLightDom]), + 50 + ); + break; + case "horizontal-light": + toggleClass(true, isSelect, unref(horizontalLightDom)); + debounce( + setFalse([verticalDarkDom, verticalLightDom, horizontalDarkDom]), + 50 + ); + break; + } +}); + +function setTheme(layout: string, theme: string) { dataTheme.value.layout = `${layout}-${theme}`; window.document.body.setAttribute("data-layout", layout); window.document.body.setAttribute("data-theme", theme); instance.layout = { layout: `${layout}-${theme}` }; - toggleClass(true, isSelect, unref(dom)); - toggleClass(false, isSelect, unref(dom)); + useAppStoreHook().setLayout(layout); } @@ -147,7 +194,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) {
  • @@ -163,7 +210,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) {
  • @@ -179,7 +226,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) {
  • @@ -197,7 +244,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) { dataTheme.layout === 'horizontal-light' ? $style.isSelect : '' " ref="horizontalLightDom" - @click="setTheme('horizontal', 'light', horizontalLightDom)" + @click="setTheme('horizontal', 'light')" >
    diff --git a/src/layout/index.vue b/src/layout/index.vue index 3f20cfba1..ec84b50cf 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -31,15 +31,19 @@ import { unref, reactive, computed, - watchEffect, onMounted, + watchEffect, + useCssModule, onBeforeMount, - useCssModule + getCurrentInstance } from "vue"; +import { setType } from "./types"; import options from "/@/settings"; import { useI18n } from "vue-i18n"; +import { emitter } from "/@/utils/mitt"; import { toggleClass } from "/@/utils/operate"; import { useEventListener } from "@vueuse/core"; +import { storageLocal } from "/@/utils/storage"; import { useAppStoreHook } from "/@/store/modules/app"; import fullScreen from "/@/assets/svg/full_screen.svg"; import exitScreen from "/@/assets/svg/exit_screen.svg"; @@ -52,28 +56,21 @@ import setting from "./components/setting/index.vue"; import Vertical from "./components/sidebar/vertical.vue"; import Horizontal from "./components/sidebar/horizontal.vue"; -interface setInter { - sidebar: any; - device: string; - fixedHeader: boolean; - classes: any; -} - -const pureApp = useAppStoreHook(); const pureSetting = useSettingStoreHook(); const { hiddenMainContainer } = useCssModule(); -const WIDTH = ref(992); +const instance = + getCurrentInstance().appContext.app.config.globalProperties.$storage; let containerHiddenSideBar = ref(options.hiddenSideBar); -const set: setInter = reactive({ +const set: setType = reactive({ sidebar: computed(() => { - return pureApp.sidebar; + return useAppStoreHook().sidebar; }), device: computed(() => { - return pureApp.device; + return useAppStoreHook().device; }), fixedHeader: computed(() => { @@ -91,9 +88,23 @@ const set: setInter = reactive({ }); const handleClickOutside = (params: boolean) => { - pureApp.closeSideBar({ withoutAnimation: params }); + useAppStoreHook().closeSideBar({ withoutAnimation: params }); }; +function setTheme(layoutModel: string) { + let { layout } = storageLocal.getItem("responsive-layout"); + let theme = layout.match(/-(.*)/)[1]; + window.document.body.setAttribute("data-layout", layoutModel); + window.document.body.setAttribute("data-theme", theme); + instance.layout = { layout: `${layoutModel}-${theme}` }; +} + +// 监听容器 +emitter.on("resize", ({ detail }) => { + let { width } = detail; + width <= 670 ? setTheme("vertical") : setTheme(useAppStoreHook().layout); +}); + watchEffect(() => { if (set.device === "mobile" && !set.sidebar.opened) { handleClickOutside(false); @@ -102,13 +113,13 @@ watchEffect(() => { const $_isMobile = () => { const rect = document.body.getBoundingClientRect(); - return rect.width - 1 < WIDTH.value; + return rect.width - 1 < 992; }; const $_resizeHandler = () => { if (!document.hidden) { const isMobile = $_isMobile(); - pureApp.toggleDevice(isMobile ? "mobile" : "desktop"); + useAppStoreHook().toggleDevice(isMobile ? "mobile" : "desktop"); if (isMobile) { handleClickOutside(true); } @@ -136,7 +147,7 @@ function onFullScreen() { onMounted(() => { const isMobile = $_isMobile(); if (isMobile) { - pureApp.toggleDevice("mobile"); + useAppStoreHook().toggleDevice("mobile"); handleClickOutside(true); } toggleClass( @@ -152,7 +163,7 @@ onBeforeMount(() => {