From c46ff1d2e0bfdddfee22660aff8a854b157e9886 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 27 Aug 2023 01:53:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         | 23 ++++++++++++++++-
 src/components/BaseButton.vue       |  2 +-
 src/components/IconWrapper.vue      |  2 +-
 src/components/Modal/Statistics.vue |  2 +-
 src/components/Toolbar/Toolbar.vue  |  6 ++---
 src/components/Type.vue             |  5 ++--
 src/hooks/useTheme.ts               | 18 +++++++++++++
 src/hooks/useThemeColor.ts          | 39 -----------------------------
 src/stores/base.ts                  |  4 +--
 src/types.ts                        |  1 +
 10 files changed, 51 insertions(+), 51 deletions(-)
 create mode 100644 src/hooks/useTheme.ts
 delete mode 100644 src/hooks/useThemeColor.ts

diff --git a/src/App.vue b/src/App.vue
index 9dcdc931..64b6bd2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,11 +5,32 @@ import Type from "@/components/Type.vue";
 import Side from "@/components/Side.vue";
 import Statistics from "@/components/Modal/Statistics.vue";
 import Backgorund from "@/components/Backgorund.vue";
+import {onMounted} from "vue";
+import {useBaseStore} from "@/stores/base.ts";
 
+const store = useBaseStore()
+// 查询当前系统主题颜色
+const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
+// 监听系统主题变化
+match.addEventListener('change', followSystem)
+
+function followSystem() {
+  if (store.theme === 'auto') {
+    const theme = match.matches ? 'dark' : 'light'
+    document.documentElement.setAttribute('data-theme', theme)
+    // document.documentElement.setAttribute('data-theme', 'dark')
+    localStorage.setItem('appearance', theme)
+  }
+}
+
+onMounted(() => {
+  store.init()
+  followSystem()
+})
 </script>
 
 <template>
-<!--    <Backgorund/>-->
+  <Backgorund/>
   <div class="main-page">
     <div class="center">
       <Toolbar/>
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 5f87e4a0..b48f4a0a 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -47,7 +47,7 @@ defineEmits(['click'])
     font-size: 16rem;
     color: white;
 
-    ::v-deep a {
+    :deep(a) {
       color: white;
     }
   }
diff --git a/src/components/IconWrapper.vue b/src/components/IconWrapper.vue
index a5bb0747..b2284e13 100644
--- a/src/components/IconWrapper.vue
+++ b/src/components/IconWrapper.vue
@@ -33,7 +33,7 @@ $w: 20rem;
     color: white;
   }
 
-  ::v-deep svg {
+  :deep(svg) {
     width: $w;
     height: $w;
   }
diff --git a/src/components/Modal/Statistics.vue b/src/components/Modal/Statistics.vue
index ecb43175..5ccf46cd 100644
--- a/src/components/Modal/Statistics.vue
+++ b/src/components/Modal/Statistics.vue
@@ -6,7 +6,7 @@ import Ring from "@/components/Ring.vue";
 import Tooltip from "@/components/Tooltip.vue";
 import Fireworks from "@/components/Fireworks.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {DictType} from "@/types.js";
+import {DictType} from "@/types.ts";
 
 const store = useBaseStore()
 
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index ddc3eb69..6d45b1f2 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -13,7 +13,7 @@ import {
   Bug,
   UploadOne
 } from "@icon-park/vue-next"
-import useThemeColor from "@/hooks/useThemeColor.ts"
+import useTheme from "@/hooks/useTheme.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import SettingModal from "@/components/Toolbar/SettingModal.vue"
 import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
@@ -32,7 +32,7 @@ import IconEyeSlash from '~icons/heroicons/eye-slash-solid'
 import IconRepeat from '~icons/tabler/repeat'
 import IconRepeatOff from '~icons/tabler/repeat-off'
 
-const {appearance, toggle} = useThemeColor()
+const { toggle} = useTheme()
 const store = useBaseStore()
 const showFeedbackModal = $ref(false)
 const showSettingModal = $ref(false)
@@ -51,7 +51,7 @@ function t() {
     <div class="options">
       <Tooltip title="切换主题">
         <IconWrapper>
-          <moon v-if="appearance === 'dark'"
+          <moon v-if="store.theme === 'dark'"
                 @click="toggle"/>
           <sun-one v-else @click="toggle"/>
         </IconWrapper>
diff --git a/src/components/Type.vue b/src/components/Type.vue
index 8cf2a22a..d557b889 100644
--- a/src/components/Type.vue
+++ b/src/components/Type.vue
@@ -20,7 +20,7 @@ import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
 import DictModal from "@/components/Modal/DictModal.vue"
 import Backgorund from "@/components/Backgorund.vue"
 import Statistics from "@/components/Modal/Statistics.vue";
-import useThemeColor from "@/hooks/useThemeColor";
+import useTheme from "@/hooks/useTheme.ts";
 import Tooltip from "@/components/Tooltip.vue";
 import Toolbar from "@/components/Toolbar/Toolbar.vue"
 import {KeyboardOne} from "@icon-park/vue-next";
@@ -54,7 +54,6 @@ const restWord = $computed(() => {
   return store.word.name.slice(input.length + wrong.length)
 })
 onMounted(() => {
-  store.init()
   window.addEventListener('keydown', onKeyDown)
   window.addEventListener('keyup', onKeyUp)
 })
@@ -183,7 +182,7 @@ const progress = $computed(() => {
   return ((store.currentDict.wordIndex / store.chapter.length) * 100)
 })
 
-const {appearance, toggle} = useThemeColor()
+const { toggle} = useTheme()
 
 function format(val: number, suffix: string = '') {
   return val === -1 ? '-' : (val + suffix)
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 00000000..afd1b4ec
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,18 @@
+import {useBaseStore} from "@/stores/base.ts";
+
+export default function useTheme() {
+  const store = useBaseStore()
+
+  function toggle() {
+    if (store.theme === 'auto') {
+      store.theme = 'dark'
+    } else {
+      store.theme = store.theme === 'light' ? 'dark' : 'light'
+    }
+    document.documentElement.setAttribute('data-theme', store.theme)
+  }
+
+  return {
+    toggle
+  }
+}
diff --git a/src/hooks/useThemeColor.ts b/src/hooks/useThemeColor.ts
deleted file mode 100644
index 6cda94de..00000000
--- a/src/hooks/useThemeColor.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// 获取主题变量
-import {ref, watchEffect} from "vue";
-
-let appearance = ref<string>(localStorage.getItem('appearance') || 'auto')
-// 查询当前系统主题颜色
-const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
-// 监听系统主题变化
-match.addEventListener('change', followSystem)
-
-function followSystem() {
-  const theme = match.matches ? 'dark' : 'light'
-  document.documentElement.setAttribute('data-theme', theme)
-  // document.documentElement.setAttribute('data-theme', 'dark')
-}
-
-watchEffect(() => {
-// 如果主题变量为 auto, 则跟随系统主题
-  if (appearance.value === 'auto') {
-    followSystem()
-  } else {
-    document.documentElement.setAttribute('data-theme', appearance.value)
-  }
-})
-
-function toggle() {
-  if (appearance.value === 'auto') {
-    appearance.value = match.matches ? 'light' : 'dark'
-  } else {
-    appearance.value = appearance.value === 'light' ? 'dark' : 'light'
-  }
-}
-
-export default function useThemeColor() {
-
-  return {
-    appearance,
-    toggle
-  }
-}
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 9ff7c769..6aa8de5f 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -121,7 +121,8 @@ export const useBaseStore = defineStore('base', {
         value2: 50,
         value3: 1,
         value4: false,
-      }
+      },
+      theme: 'auto'
     }
   },
   getters: {
@@ -203,7 +204,6 @@ export const useBaseStore = defineStore('base', {
         })
       }
       this.dict.wordIndex = 0
-      this.dictModalIsOpen2 = false
     },
     async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) {
       console.log('changeDict', dict)
diff --git a/src/types.ts b/src/types.ts
index b827f4d9..fb15d525 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -144,6 +144,7 @@ export interface State {
   sideIsOpen: boolean,
   statModalIsOpen: boolean,
   isDictation: boolean,
+  theme: string,
   setting: {
     showToolbar: boolean,
     show: boolean,