From cdbca16c87d81449f8e28d52ce7f5be64f2b6043 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Tue, 13 Sep 2022 21:18:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/u-theme/index.vue       | 49 ++++++++++++++++++++------
 src/layout/Header/index.vue            |  9 +++--
 src/layout/Sidebar/components/Menu.vue |  2 +-
 src/layout/index.vue                   |  5 +--
 src/store/modules/setting.ts           | 10 +++++-
 5 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/components/u-theme/index.vue b/src/components/u-theme/index.vue
index cfb6c30..a6d4640 100644
--- a/src/components/u-theme/index.vue
+++ b/src/components/u-theme/index.vue
@@ -14,6 +14,18 @@
     </div>
     <el-drawer
         v-model="drawer" title="主题配置" size="300px">
+      <div class="theme-item">
+        <label>导航栏布局</label>
+        <el-select
+            v-model="layout"
+            placeholder="请选择"
+            style="width: 150px"
+            @change="(val) => changeSwitch('mode',val)"
+        >
+          <el-option label="纵向" value="vertical"></el-option>
+          <el-option label="横向" value="horizontal"></el-option>
+        </el-select>
+      </div>
       <div class="theme-item">
         <label>主题颜色</label>
         <el-color-picker v-model="primary" :predefine="predefineColor" @change="changePrimary" />
@@ -23,16 +35,12 @@
         <switch-dark></switch-dark>
       </div>
       <div class="theme-item">
-        <label>导航栏布局</label>
-        <el-select
-          v-model="layout"
-          placeholder="请选择"
-          style="width: 150px"
-          @change="(val) => changeSwitch('mode',val)"
-        >
-          <el-option label="纵向" value="vertical"></el-option>
-          <el-option label="横向" value="horizontal"></el-option>
-        </el-select>
+        <label>灰色模式</label>
+        <el-switch v-model="gray" @change="(val) => changeGrayWeak('gray',val)" />
+      </div>
+      <div class="theme-item">
+        <label>色弱模式</label>
+        <el-switch v-model="weak" @change="(val) => changeGrayWeak('weak',val)" />
       </div>
       <div class="theme-item">
         <label>标签栏</label>
@@ -42,6 +50,14 @@
         <label>侧边栏 Logo</label>
         <el-switch v-model="showLogo" @change="(val) => changeSwitch('showLogo',val)" />
       </div>
+      <div class="theme-item">
+        <label>保持一个子菜单的展开</label>
+        <el-switch v-model="uniqueOpened" @change="(val) => changeSwitch('uniqueOpened',val)" />
+      </div>
+      <div class="theme-item">
+        <label>固定header</label>
+        <el-switch v-model="fixedHeader" @change="(val) => changeSwitch('fixedHeader',val)" />
+      </div>
     </el-drawer>
   </div>
 </template>
@@ -57,7 +73,11 @@
   const layout = ref(SettingStore.themeConfig.mode)
   const showTag = ref(SettingStore.themeConfig.showTag)
   const showLogo = ref(SettingStore.themeConfig.showLogo)
+  const uniqueOpened = ref(SettingStore.themeConfig.uniqueOpened)
   const primary = ref(SettingStore.themeConfig.primary)
+  const fixedHeader = ref(SettingStore.themeConfig.fixedHeader)
+  const gray = ref(SettingStore.themeConfig.gray)
+  const weak = ref(SettingStore.themeConfig.weak)
 
   const drawer = computed({
     get() {
@@ -105,6 +125,15 @@
     changeSwitch('primary',val)
   }
 
+  // 修改灰色模式
+  const changeGrayWeak = (type,val)=>{
+    const body = document.documentElement as HTMLElement;
+    if (!val) return body.setAttribute("style", "");
+    if (type === "gray") body.setAttribute("style", "filter: grayscale(1)");
+    if (type === "weak") body.setAttribute("style", "filter: invert(80%)");
+    changeSwitch(type,val)
+  }
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/Header/index.vue b/src/layout/Header/index.vue
index 05c6771..02131a0 100644
--- a/src/layout/Header/index.vue
+++ b/src/layout/Header/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="m-layout-header"
+    :class="[SettingStore.themeConfig.fixedHeader&&'zb-fixed-header']"
     :style="{ left: `${mode === 'horizontal' ? 0 : isCollapse ? '60' : '210'}px` }"
   >
     <div
@@ -148,13 +149,15 @@
       }
     }
   }
-  .m-layout-header {
+  .zb-fixed-header{
     position: fixed;
     top: 0;
-    background: white;
     left: 0;
-    z-index: 9;
     right: 0;
+    z-index: 9;
+  }
+  .m-layout-header {
+    background: white;
     transition: left 0.3s;
     flex-shrink: 0;
     box-sizing: border-box;
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
index c9c630e..5f648d3 100644
--- a/src/layout/Sidebar/components/Menu.vue
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -1,10 +1,10 @@
 <template>
   <el-menu
     :default-active="activeMenu"
-    active-text-color="#ffd04b"
     background-color="#304156"
     text-color="#fff"
     :mode="mode"
+    :unique-opened="SettingStore.themeConfig.uniqueOpened"
     :collapse-transition="false"
     class="el-menu-vertical-demo"
     :collapse="isCollapse"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 062ab45..fccf469 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,10 +8,7 @@
         hideSliderLayout: mode === 'horizontal',
       }"
     >
-      <div
-          :style="{
-        height:`${showTag?80:50}px`
-      }"></div>
+      <div :style="{ height:`${showTag?80:50}px`  }" v-if="SettingStore.themeConfig.fixedHeader"></div>
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
         <u-main />
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 04750fd..3e7b7db 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -31,7 +31,15 @@ export const useSettingStore = defineStore({
             // 主题颜色
             primary:PRIMARY_COLOR,
             // element组件大小
-            globalComSize:'default'
+            globalComSize:'default',
+            // 是否只保持一个子菜单的展开
+            uniqueOpened:true,
+            // 固定header
+            fixedHeader:true,
+            // 灰色模式
+            gray:false,
+            // 色弱模式
+            weak:false
         },
     }),
     getters: {},