perf: layout

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));
+  useAppStoreHook().setLayout(layout);
-  toggleClass(false, isSelect, unref(dom));
 }
 </script>
 
@@ -147,7 +194,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) {
         <li
           :class="dataTheme.layout === 'vertical-dark' ? $style.isSelect : ''"
           ref="verticalDarkDom"
-          @click="setTheme('vertical', 'dark', verticalDarkDom)"
+          @click="setTheme('vertical', 'dark')"
         >
           <div></div>
           <div></div>
@@ -163,7 +210,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) {
         <li
           :class="dataTheme.layout === 'vertical-light' ? $style.isSelect : ''"
           ref="verticalLightDom"
-          @click="setTheme('vertical', 'light', verticalLightDom)"
+          @click="setTheme('vertical', 'light')"
         >
           <div></div>
           <div></div>
@@ -179,7 +226,7 @@ function setTheme(layout: string, theme: string, dom: HTMLElement) {
         <li
           :class="dataTheme.layout === 'horizontal-dark' ? $style.isSelect : ''"
           ref="horizontalDarkDom"
-          @click="setTheme('horizontal', 'dark', horizontalDarkDom)"
+          @click="setTheme('horizontal', 'dark')"
         >
           <div></div>
           <div></div>
@@ -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')"
         >
           <div></div>
           <div></div>

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(() => {
 </script>
 
 <template>
-  <div :class="['app-wrapper', set.classes]">
+  <div :class="['app-wrapper', set.classes]" v-resize>
     <div
       v-show="
         set.device === 'mobile' &&

src/layout/types.ts

@@ -27,6 +27,21 @@ export type tagsViewsType = {
   };
 };
 
+export interface setType {
+  sidebar: {
+    opened: boolean;
+    withoutAnimation: boolean;
+  };
+  device: string;
+  fixedHeader: boolean;
+  classes: {
+    hideSidebar: boolean;
+    openSidebar: boolean;
+    withoutAnimation: boolean;
+    mobile: boolean;
+  };
+}
+
 export const routerArrays: Array<RouteConfigs> = [
   {
     path: "/welcome",

src/store/modules/app.ts

@@ -8,6 +8,7 @@ interface AppState {
     opened: boolean;
     withoutAnimation: boolean;
   };
+  layout: string;
   device: string;
 }
 
@@ -20,6 +21,9 @@ export const useAppStore = defineStore({
         : true,
       withoutAnimation: false
     },
+    layout:
+      storageLocal.getItem("responsive-layout")?.layout.match(/(.*)-/)[1] ??
+      "vertical",
     device: deviceDetection() ? "mobile" : "desktop"
   }),
   getters: {
@@ -56,6 +60,9 @@ export const useAppStore = defineStore({
     },
     toggleDevice(device) {
       this.TOGGLE_DEVICE(device);
+    },
+    setLayout(layout) {
+      this.layout = layout;
     }
   }
 });

tsconfig.json

@@ -16,7 +16,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "allowJs": false,
-    "resolveJsonModule": true, // 包含导入的模块。json的扩展
+    "resolveJsonModule": true,
     "lib": ["dom", "esnext"],
     "incremental": true,
     "paths": {