refactor: setting

public/serverConfig.json

@@ -7,6 +7,9 @@
   "Locale": "zh",
   "Layout": "vertical",
   "Theme": "default",
+  "Grey": false,
+  "Weak": false,
+  "HideTabs": false,
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
     "baiduKey": "wTHbkkEweiFqZLKunMIjcrb2RcqNXkhc",

src/layout/components/appMain.vue

@@ -17,6 +17,8 @@ const props = defineProps({
 const keepAlive: Boolean = ref(
   getCurrentInstance().appContext.config.globalProperties.$config?.KeepAlive
 );
+const instance =
+  getCurrentInstance().appContext.app.config.globalProperties.$storage;
 
 const transitions = computed(() => {
   return route => {
@@ -24,6 +26,13 @@ const transitions = computed(() => {
   };
 });
 
+const hideTabs = computed(() => {
+  return instance?.sets.hideTabs;
+});
+const layout = computed(() => {
+  return instance?.layout.layout === "vertical";
+});
+
 const transitionMain = defineComponent({
   render() {
     return h(
@@ -62,6 +71,12 @@ const transitionMain = defineComponent({
 <template>
   <section
     :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+    :style="[
+      hideTabs && layout ? 'padding-top: 48px;' : '',
+      !hideTabs && layout ? 'padding-top: 85px;' : '',
+      hideTabs && !layout ? 'padding-top: 62px' : '',
+      !hideTabs && !layout ? 'padding-top: 98px;' : ''
+    ]"
   >
     <router-view>
       <template #default="{ Component, route }">

src/layout/components/setting/index.vue

@@ -5,6 +5,7 @@ import {
   unref,
   watch,
   computed,
+  nextTick,
   useCssModule,
   getCurrentInstance
 } from "vue";
@@ -72,32 +73,12 @@ const markValue = ref(storageLocal.getItem("showModel") || "smart");
 
 const logoVal = ref(storageLocal.getItem("logoVal") || "1");
 
-const localOperate = (key: string, value?: any, model?: string): any => {
-  model && model === "set"
-    ? storageLocal.setItem(key, value)
-    : storageLocal.getItem(key);
-};
-
 const settings = reactive({
-  greyVal: storageLocal.getItem("greyVal"),
-  weekVal: storageLocal.getItem("weekVal"),
-  tagsVal: storageLocal.getItem("tagsVal")
+  greyVal: instance.sets.grey,
+  weakVal: instance.sets.weak,
+  tabsVal: instance.sets.hideTabs
 });
 
-settings.greyVal === null
-  ? localOperate("greyVal", false, "set")
-  : document.querySelector("html")?.setAttribute("class", "html-grey");
-
-settings.weekVal === null
-  ? localOperate("weekVal", false, "set")
-  : document.querySelector("html")?.setAttribute("class", "html-weakness");
-
-if (settings.tagsVal === null) {
-  localOperate("tagsVal", false, "set");
-  settings.tagsVal = false;
-}
-window.document.body.setAttribute("data-show-tag", settings.tagsVal);
-
 function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
   const targetEl = target || document.body;
   let { className } = targetEl;
@@ -108,35 +89,52 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
 // 灰色模式设置
 const greyChange = ({ value }): void => {
   toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
-  value
-    ? localOperate("greyVal", true, "set")
-    : localOperate("greyVal", false, "set");
+  instance.sets = {
+    grey: value,
+    weak: instance.sets.weak,
+    hideTabs: instance.sets.hideTabs
+  };
 };
 
 // 色弱模式设置
 const weekChange = ({ value }): void => {
   toggleClass(
-    settings.weekVal,
+    settings.weakVal,
     "html-weakness",
     document.querySelector("html")
   );
-  value
-    ? localOperate("weekVal", true, "set")
-    : localOperate("weekVal", false, "set");
+  instance.sets = {
+    grey: instance.sets.grey,
+    weak: value,
+    hideTabs: instance.sets.hideTabs
+  };
 };
 
 const tagsChange = () => {
-  let showVal = settings.tagsVal;
-  showVal
-    ? storageLocal.setItem("tagsVal", true)
-    : storageLocal.setItem("tagsVal", false);
+  let showVal = settings.tabsVal;
+  instance.sets = {
+    grey: instance.sets.grey,
+    weak: instance.sets.weak,
+    hideTabs: showVal
+  };
   emitter.emit("tagViewsChange", showVal);
 };
 
+//初始化项目配置
+nextTick(() => {
+  settings.greyVal &&
+    document.querySelector("html")?.setAttribute("class", "html-grey");
+  settings.weakVal &&
+    document.querySelector("html")?.setAttribute("class", "html-weakness");
+  settings.tabsVal && tagsChange();
+});
+
 // 清空缓存并返回登录页
 function onReset() {
   storageLocal.clear();
   storageSession.clear();
+  toggleClass(false, "html-grey", document.querySelector("html"));
+  toggleClass(false, "html-weakness", document.querySelector("html"));
   router.push("/login");
 }
 
@@ -271,7 +269,7 @@ function setLayoutThemeColor(theme: string) {
       <li>
         <span>色弱模式</span>
         <el-switch
-          v-model="settings.weekVal"
+          v-model="settings.weakVal"
           inline-prompt
           inactive-color="#a6a6a6"
           active-text="开"
@@ -283,7 +281,7 @@ function setLayoutThemeColor(theme: string) {
       <li>
         <span>隐藏标签页</span>
         <el-switch
-          v-model="settings.tagsVal"
+          v-model="settings.tabsVal"
           inline-prompt
           inactive-color="#a6a6a6"
           active-text="开"

src/layout/components/tag/index.vue

@@ -447,7 +447,6 @@ onBeforeMount(() => {
   emitter.on("tagViewsChange", key => {
     if (unref(showTags) === key) return;
     showTags.value = key;
-    window.document.body.setAttribute("data-show-tag", key);
   });
 
   // 改变标签风格

src/layout/index.vue

@@ -57,6 +57,15 @@ const layout = computed(() => {
       theme: instance.$config?.Theme ?? "default"
     };
   }
+  // 灰色模式、色弱模式、隐藏标签页
+  if (!instance.$storage.sets) {
+    // eslint-disable-next-line
+    instance.$storage.sets = {
+      grey: instance.$config?.Grey ?? false,
+      weak: instance.$config?.Weak ?? false,
+      hideTabs: instance.$config?.HideTabs ?? false
+    };
+  }
   return instance.$storage?.layout.layout;
 });
 
@@ -80,6 +89,10 @@ const set: setType = reactive({
       withoutAnimation: set.sidebar.withoutAnimation,
       mobile: set.device === "mobile"
     };
+  }),
+
+  hideTabs: computed(() => {
+    return instance.$storage?.sets.hideTabs;
   })
 });
 
@@ -144,7 +157,14 @@ const layoutHeader = defineComponent({
   render() {
     return h(
       "div",
-      { class: { "fixed-header": set.fixedHeader } },
+      {
+        class: { "fixed-header": set.fixedHeader },
+        style: [
+          set.hideTabs && layout.value.includes("horizontal")
+            ? "box-shadow: 0 1px 4px rgb(0 21 41 / 8%);"
+            : ""
+        ]
+      },
       {
         default: () => [
           !hiddenSideBar.value && layout.value.includes("vertical")

src/layout/types.ts

@@ -47,6 +47,7 @@ export interface setType {
     withoutAnimation: boolean;
     mobile: boolean;
   };
+  hideTabs: boolean;
 }
 
 export type childrenType = {

src/style/sidebar.scss

@@ -640,35 +640,3 @@ body[layout="horizontal"] {
     transition: none !important;
   }
 }
-
-// vertical模式下不隐藏标签页
-body[layout="vertical"][data-show-tag="false"] {
-  .fixed-header + .app-main {
-    padding-top: 85px;
-  }
-}
-
-// vertical模式下隐藏标签页
-body[layout="vertical"][data-show-tag="true"] {
-  .fixed-header + .app-main {
-    padding-top: 48px;
-  }
-}
-
-// horizontal模式下不隐藏标签页
-body[layout="horizontal"][data-show-tag="false"] {
-  .fixed-header + .app-main {
-    padding-top: 98px;
-  }
-}
-
-// horizontal模式下隐藏标签页
-body[layout="horizontal"][data-show-tag="true"] {
-  .fixed-header {
-    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
-  }
-
-  .fixed-header + .app-main {
-    padding-top: 62px;
-  }
-}

src/utils/storage/responsive.ts

@@ -33,6 +33,14 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
         layout: config.Layout ?? "vertical",
         theme: config.Theme ?? "default"
       }
+    },
+    sets: {
+      type: Object,
+      default: Storage.getData(undefined, "sets") ?? {
+        grey: config.Grey,
+        weak: config.Weak,
+        hideTabs: config.HideTabs
+      }
     }
   });
 };

types/global.d.ts

@@ -91,6 +91,9 @@ declare global {
     Locale?: string;
     Layout?: string;
     Theme?: string;
+    Grey?: boolean;
+    Weak?: boolean;
+    HideTabs?: boolean;
     MapConfigure?: {
       amapKey?: string;
       baiduKey?: string;