From 456ef830813f07fbaf6a218dd28805039a8ceb8d Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Fri, 28 Jun 2024 10:06:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=93=80=E6=82=BC?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=92=8C=E8=89=B2=E5=BC=B1=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/AppSetting/index.vue | 15 +++++++++++++++
 src/settings.default.ts                     |  2 ++
 src/store/modules/settings.ts               | 17 +++++++++++++++++
 src/types/global.d.ts                       | 10 ++++++++++
 4 files changed, 44 insertions(+)

diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index 7eee5bb5..ad18aba3 100755
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -327,6 +327,21 @@ function handleCopy() {
       </div>
       <HToggle v-model="settingsStore.settings.app.enableProgress" />
     </div>
+    <div class="setting-item">
+      <div class="label">
+        哀悼模式
+        <HTooltip text="该功能开启时，整站会变为灰色">
+          <SvgIcon name="i-ri:question-line" />
+        </HTooltip>
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableMournMode" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        色弱模式
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableColorAmblyopiaMode" />
+    </div>
     <div class="setting-item">
       <div class="label">
         动态标题
diff --git a/src/settings.default.ts b/src/settings.default.ts
index 6596971b..2dc82360 100755
--- a/src/settings.default.ts
+++ b/src/settings.default.ts
@@ -5,6 +5,8 @@ import type { RecursiveRequired, Settings } from '#/global'
 const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   app: {
     colorScheme: 'light',
+    enableMournMode: false,
+    enableColorAmblyopiaMode: false,
     enablePermission: false,
     enableProgress: true,
     enableDynamicTitle: false,
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index d1b7c04e..8b13e8a6 100755
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -39,6 +39,23 @@ const useSettingsStore = defineStore(
           break
       }
     }
+    watch([
+      () => settings.value.app.enableMournMode,
+      () => settings.value.app.enableColorAmblyopiaMode,
+    ], (val) => {
+      document.documentElement.style.removeProperty('filter')
+      if (val[0] && val[1]) {
+        document.documentElement.style.setProperty('filter', 'grayscale(100%) invert(80%)')
+      }
+      else if (val[0]) {
+        document.documentElement.style.setProperty('filter', 'grayscale(100%)')
+      }
+      else if (val[1]) {
+        document.documentElement.style.setProperty('filter', 'invert(80%)')
+      }
+    }, {
+      immediate: true,
+    })
 
     watch(() => settings.value.menu.mode, (val) => {
       document.body.setAttribute('data-menu-mode', val)
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 1f334bbb..15099bf0 100755
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -16,6 +16,16 @@ declare namespace Settings {
      * @可选值 `'dark'` 暗黑模式
      */
     colorScheme?: '' | 'light' | 'dark'
+    /**
+     * 是否开启哀悼模式
+     * @默认值 `false`
+     */
+    enableMournMode?: boolean
+    /**
+     * 是否开启色弱模式
+     * @默认值 `false`
+     */
+    enableColorAmblyopiaMode?: boolean
     /**
      * 是否开启权限功能
      * @默认值 `false`