From ade5d806c74d04758fcd646e9eb7457b4a09cd02 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 14 Nov 2024 16:29:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E5=86=99=E7=81=B0?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=92=8C=E8=89=B2=E5=BC=B1=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E6=8C=82=E8=BD=BD=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  7 +++++--
 src/hooks/useGreyAndColorWeakness.ts | 20 ++++++++++++++++++++
 src/hooks/useTheme.ts                | 13 ++++++++++---
 src/layouts/index.vue                | 23 +++--------------------
 src/styles/index.scss                |  8 ++++++++
 5 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/hooks/useGreyAndColorWeakness.ts

diff --git a/src/App.vue b/src/App.vue
index 28d27abe..54b68cc6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import { useTheme } from "@/hooks/useTheme"
+import { useGreyAndColorWeakness } from "@/hooks/useGreyAndColorWeakness"
 import { ElNotification } from "element-plus"
-// 将 Element Plus 的语言设置为中文
-import zhCn from "element-plus/es/locale/lang/zh-cn"
+import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
 
 const { initTheme } = useTheme()
+const { initGreyAndColorWeakness } = useGreyAndColorWeakness()
 
 /** 初始化主题 */
 initTheme()
+/** 初始化灰色模式和色弱模式 */
+initGreyAndColorWeakness()
 
 /** 作者小心思 */
 ElNotification({
diff --git a/src/hooks/useGreyAndColorWeakness.ts b/src/hooks/useGreyAndColorWeakness.ts
new file mode 100644
index 00000000..63474393
--- /dev/null
+++ b/src/hooks/useGreyAndColorWeakness.ts
@@ -0,0 +1,20 @@
+import { watchEffect } from "vue"
+import { useSettingsStore } from "@/store/modules/settings"
+
+const GREY_MODE = "grey-mode"
+const COLOR_WEAKNESS = "color-weakness"
+const classList = document.documentElement.classList
+
+/** 初始化 */
+const initGreyAndColorWeakness = () => {
+  const settingsStore = useSettingsStore()
+  watchEffect(() => {
+    settingsStore.showGreyMode ? classList.add(GREY_MODE) : classList.remove(GREY_MODE)
+    settingsStore.showColorWeakness ? classList.add(COLOR_WEAKNESS) : classList.remove(COLOR_WEAKNESS)
+  })
+}
+
+/** 灰色模式和色弱模式 hook */
+export function useGreyAndColorWeakness() {
+  return { initGreyAndColorWeakness }
+}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 0ca28a24..5dd55ca1 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -37,8 +37,14 @@ const setTheme = (value: ThemeName) => {
 }
 
 /** 在 html 根元素上挂载 class */
-const setHtmlRootClassName = (value: ThemeName) => {
-  document.documentElement.className = value
+const addHtmlClass = (value: ThemeName) => {
+  document.documentElement.classList.add(value)
+}
+
+/** 在 html 根元素上移除其他主题 class */
+const removeHtmlClass = (value: ThemeName) => {
+  const otherThemeNameList = themeList.map((item) => item.name).filter((name) => name !== value)
+  document.documentElement.classList.remove(...otherThemeNameList)
 }
 
 /** 初始化 */
@@ -46,7 +52,8 @@ const initTheme = () => {
   // watchEffect 来收集副作用
   watchEffect(() => {
     const value = activeThemeName.value
-    setHtmlRootClassName(value)
+    removeHtmlClass(value)
+    addHtmlClass(value)
     setActiveThemeName(value)
   })
 }
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 4774fefd..0fab2d33 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, watchEffect } from "vue"
+import { watchEffect } from "vue"
 import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
 import useResize from "./hooks/useResize"
@@ -19,14 +19,7 @@ const { setWatermark, clearWatermark } = useWatermark()
 const { isMobile } = useDevice()
 const { isLeft, isTop, isLeftTop } = useLayoutMode()
 const settingsStore = useSettingsStore()
-const { showSettings, showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
-
-const classes = computed(() => {
-  return {
-    showGreyMode: showGreyMode.value,
-    showColorWeakness: showColorWeakness.value
-  }
-})
+const { showSettings, showTagsView, showWatermark } = storeToRefs(settingsStore)
 
 //#region 隐藏标签栏时删除其高度，是为了让 Logo 组件高度和 Header 区域高度始终一致
 const cssVarName = "--v3-tagsview-height"
@@ -43,7 +36,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div :class="classes">
+  <div>
     <!-- 左侧模式 -->
     <LeftMode v-if="isLeft || isMobile" />
     <!-- 顶部模式 -->
@@ -56,13 +49,3 @@ watchEffect(() => {
     </RightPanel>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.showGreyMode {
-  filter: grayscale(1);
-}
-
-.showColorWeakness {
-  filter: invert(0.8);
-}
-</style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0204c4a9..c730ffd1 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -22,6 +22,14 @@
 
 html {
   height: 100%;
+  // 灰色模式
+  &.grey-mode {
+    filter: grayscale(1);
+  }
+  // 色弱模式
+  &.color-weakness {
+    filter: invert(0.8);
+  }
 }
 
 body {