feat: 新增哀悼模式和色弱模式

Author: hooray

src/settings.default.ts

@@ -2,6 +2,8 @@
 const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   app: {
     colorScheme: 'light',
+    enableMournMode: false,
+    enableColorAmblyopiaMode: false,
     enablePermission: false,
   },
   menu: {

src/store/modules/settings.ts

@@ -37,6 +37,23 @@ export 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)

src/types/global.d.ts

@@ -14,6 +14,16 @@ declare namespace Settings {
      * @可选值 `'dark'` 暗黑模式
      */
     colorScheme?: '' | 'light' | 'dark'
+    /**
+     * 是否开启哀悼模式
+     * @默认值 `false`
+     */
+    enableMournMode?: boolean
+    /**
+     * 是否开启色弱模式
+     * @默认值 `false`
+     */
+    enableColorAmblyopiaMode?: boolean
     /**
      * 是否开启权限功能
      * @默认值 `false`

src/views/components/AppSetting/index.vue

@@ -244,6 +244,21 @@ function handleCopy() {
       </div>
       <HToggle v-model="settingsStore.settings.app.enablePermission" />
     </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>
     <template v-if="isSupported" #footer>
       <HButton block @click="handleCopy">
         <SvgIcon name="i-ep:document-copy" />