feat: add week model

src/layout/components/setting/index.vue

@@ -4,12 +4,11 @@
     <ul class="setting">
       <li>
         <span>灰色模式</span>
-        <vxe-switch
-          v-model="greyVal"
-          open-label="开"
-          close-label="关"
-          @change="greyChange"
-        ></vxe-switch>
+        <vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
+      </li>
+      <li>
+        <span>色弱模式</span>
+        <vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
       </li>
     </ul>
   </panel>
@@ -23,6 +22,13 @@ export default {
   name: "setting",
   components: { panel },
   setup() {
+    function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+      const targetEl = target || document.body;
+      let { className } = targetEl;
+      className = className.replace(clsName, "");
+      targetEl.className = flag ? `${className} ${clsName} ` : className;
+    }
+
     const localOperate = (key: string, value?: any, model?: string): any => {
       model && model === "set"
         ? storageLocal.setItem(key, value)
@@ -31,29 +37,48 @@ export default {
 
     const settings = reactive({
       greyVal: storageLocal.getItem("greyVal"),
+      weekVal: storageLocal.getItem("weekVal")
     });
 
     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");
+
     // 灰色模式设置
     const greyChange = ({ value }): void => {
-      if (value) {
-        localOperate("greyVal", true, "set");
-        document.querySelector("html")?.setAttribute("class", "html-grey");
-      } else {
-        localOperate("greyVal", false, "set");
-        document.querySelector("html")?.removeAttribute("class");
-      }
+      toggleClass(
+        settings.greyVal,
+        "html-grey",
+        document.querySelector("html")
+      );
+      value
+        ? localOperate("greyVal", true, "set")
+        : localOperate("greyVal", false, "set");
+    };
+
+    // 色弱模式设置
+    const weekChange = ({ value }): void => {
+      toggleClass(
+        settings.weekVal,
+        "html-weakness",
+        document.querySelector("html")
+      );
+      value
+        ? localOperate("weekVal", true, "set")
+        : localOperate("weekVal", false, "set");
     };
 
     return {
       ...toRefs(settings),
       localOperate,
       greyChange,
+      weekChange
     };
-  },
+  }
 };
 </script>
 

src/style/index.scss

@@ -100,6 +100,7 @@ ul {
   top: 48px !important;
 }
 
+// 灰色模式
 .html-grey {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
@@ -111,6 +112,15 @@ ul {
     -webkit-filter: grayscale(1);
 }
 
+// 色弱模式
+.html-weakness {
+  filter: invert(80%);
+  -webkit-filter: invert(80%);
+  -moz-filter: invert(80%);
+  -ms-filter: invert(80%);
+  -o-filter: invert(80%);
+}
+
 .el-loading-mask {
   z-index: -1;
 }