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

fantastic-admin · Jun 28, 2024 · 456ef83 · 456ef83
1 parent 90b5880
commit 456ef83
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -16,6 +16,16 @@ declare namespace Settings {
      * @可选值 `'dark'` 暗黑模式
      */
     colorScheme?: '' | 'light' | 'dark'
+    /**
+     * 是否开启哀悼模式
+     * @默认值 `false`
+     */
+    enableMournMode?: boolean
+    /**
+     * 是否开启色弱模式
+     * @默认值 `false`
+     */
+    enableColorAmblyopiaMode?: boolean
     /**
      * 是否开启权限功能
      * @默认值 `false`