From 7feb1d515f997d1f8b11e574b8894abff2cdc7c5 Mon Sep 17 00:00:00 2001
From: Defined <39450947+imaginarykhy@users.noreply.github.com>
Date: Thu, 8 Dec 2022 18:06:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=B8=8B=E5=A2=9E=E5=8A=A0=E7=81=B0=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E3=80=81=E8=89=B2=E5=BC=B1=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/layout.ts                     |  8 +++++++-
 src/layout/components/Settings/index.vue |  8 ++++++++
 src/layout/index.vue                     | 19 ++++++++++++++++++-
 src/store/modules/settings.ts            | 14 +++++++++++++-
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/config/layout.ts b/src/config/layout.ts
index 2046c3d..fe86923 100644
--- a/src/config/layout.ts
+++ b/src/config/layout.ts
@@ -14,6 +14,10 @@ interface ILayoutSettings {
   showThemeSwitch: boolean
   /** 是否显示全屏按钮 */
   showScreenfull: boolean
+  /** 是否显示灰色模式 */
+  showGreyMode: boolean
+  /** 是否显示色弱模式 */
+  showColorWeakness: boolean
 }
 
 const layoutSettings: ILayoutSettings = {
@@ -23,7 +27,9 @@ const layoutSettings: ILayoutSettings = {
   showSidebarLogo: true,
   showNotify: true,
   showThemeSwitch: true,
-  showScreenfull: true
+  showScreenfull: true,
+  showGreyMode: false,
+  showColorWeakness: false
 }
 
 export default layoutSettings
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 4b7a2ba..c474079 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -32,6 +32,14 @@ const settingsStore = useSettingsStore()
         <span>显示全屏按钮</span>
         <el-switch v-model="settingsStore.showScreenfull" class="drawer-switch" />
       </div>
+      <div class="drawer-item">
+        <span>显示灰色模式</span>
+        <el-switch v-model="settingsStore.showGreyMode" class="drawer-switch" />
+      </div>
+      <div class="drawer-item">
+        <span>显示色弱模式</span>
+        <el-switch v-model="settingsStore.showColorWeakness" class="drawer-switch" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index e8dfbd6..e5dbaf8 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -16,9 +16,12 @@ const classObj = computed(() => {
     hideSidebar: !appStore.sidebar.opened,
     openSidebar: appStore.sidebar.opened,
     withoutAnimation: appStore.sidebar.withoutAnimation,
-    mobile: appStore.device === DeviceType.Mobile
+    mobile: appStore.device === DeviceType.Mobile,
+    showGreyMode: showGreyMode.value,
+    showColorWeakness: showColorWeakness.value
   }
 })
+
 const showSettings = computed(() => {
   return settingsStore.showSettings
 })
@@ -28,6 +31,12 @@ const showTagsView = computed(() => {
 const fixedHeader = computed(() => {
   return settingsStore.fixedHeader
 })
+const showGreyMode = computed(() => {
+  return settingsStore.showGreyMode
+})
+const showColorWeakness = computed(() => {
+  return settingsStore.showColorWeakness
+})
 const handleClickOutside = () => {
   appStore.closeSidebar(false)
 }
@@ -59,6 +68,14 @@ const handleClickOutside = () => {
   width: 100%;
 }
 
+.showGreyMode {
+  filter: grayscale(1);
+}
+
+.showColorWeakness {
+  filter: invert(0.8);
+}
+
 .drawer-bg {
   background-color: #000;
   opacity: 0.3;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 55a75cc..8ce2138 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -10,6 +10,18 @@ export const useSettingsStore = defineStore("settings", () => {
   const showNotify = ref<boolean>(layoutSettings.showNotify)
   const showThemeSwitch = ref<boolean>(layoutSettings.showThemeSwitch)
   const showScreenfull = ref<boolean>(layoutSettings.showScreenfull)
+  const showGreyMode = ref<boolean>(layoutSettings.showGreyMode)
+  const showColorWeakness = ref<boolean>(layoutSettings.showColorWeakness)
 
-  return { fixedHeader, showSettings, showTagsView, showSidebarLogo, showNotify, showThemeSwitch, showScreenfull }
+  return {
+    fixedHeader,
+    showSettings,
+    showTagsView,
+    showSidebarLogo,
+    showNotify,
+    showThemeSwitch,
+    showScreenfull,
+    showGreyMode,
+    showColorWeakness
+  }
 })