From f015fc2ff0642703ae92021643a22760bce12231 Mon Sep 17 00:00:00 2001
From: lijiahong <1471363285@qq.com>
Date: Sat, 22 Feb 2025 20:58:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98swit?=
 =?UTF-8?q?ch=E7=8A=B6=E6=80=81=E4=B8=8D=E7=BB=9F=E4=B8=80=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Setting/src/Setting.vue        | 10 ++-------
 .../ThemeSwitch/src/ThemeSwitch.vue           | 22 ++++++++++++-------
 src/views/Login/Login.vue                     | 10 ++-------
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index eb81afa..ecbe72d 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -5,7 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { useCssVar } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
-import { trim, setCssVar, getCssVar } from '@/utils'
+import { trim, setCssVar } from '@/utils'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
@@ -147,12 +147,6 @@ const clear = () => {
   storageClear()
   window.location.reload()
 }
-
-const themeChange = () => {
-  const color = getCssVar('--el-bg-color')
-  setMenuTheme(color)
-  setHeaderTheme(color)
-}
 </script>
 
 <template>
@@ -172,7 +166,7 @@ const themeChange = () => {
     <div class="text-center">
       <!-- 主题 -->
       <ElDivider>{{ t('setting.theme') }}</ElDivider>
-      <ThemeSwitch @change="themeChange" />
+      <ThemeSwitch />
 
       <!-- 布局 -->
       <ElDivider>{{ t('setting.layout') }}</ElDivider>
diff --git a/src/components/ThemeSwitch/src/ThemeSwitch.vue b/src/components/ThemeSwitch/src/ThemeSwitch.vue
index 007105e..94b02c6 100644
--- a/src/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { ElSwitch } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
+import { getCssVar } from '@/utils'
 
 const { getPrefixCls } = useDesign()
 
@@ -18,15 +19,21 @@ const CrescentMoon = useIcon({ icon: 'vi-emojione-monotone:crescent-moon', color
 const appStore = useAppStore()
 
 // 初始化获取是否是暗黑主题
-const isDark = ref(appStore.getIsDark)
+const isDark = computed({
+  get() {
+    return appStore.getIsDark
+  },
+  set(val: boolean) {
+    appStore.setIsDark(val)
+    const color = getCssVar('--el-bg-color')
+    appStore.setMenuTheme(color)
+    appStore.setHeaderTheme(color)
+    emit('change', val)
+  }
+})
 
 // 设置switch的背景颜色
 const blackColor = 'var(--el-color-black)'
-
-const themeChange = (val: boolean) => {
-  appStore.setIsDark(val)
-  emit('change', val)
-}
 </script>
 
 <template>
@@ -39,7 +46,6 @@ const themeChange = (val: boolean) => {
     :active-color="blackColor"
     :active-icon="Sun"
     :inactive-icon="CrescentMoon"
-    @change="themeChange"
   />
 </template>
 
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 132d154..081f30a 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -3,7 +3,7 @@ import { LoginForm, RegisterForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
-import { getCssVar, underlineToHump } from '@/utils'
+import { underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { ref } from 'vue'
@@ -26,12 +26,6 @@ const toRegister = () => {
 const toLogin = () => {
   isLogin.value = true
 }
-
-const themeChange = () => {
-  const color = getCssVar('--el-bg-color')
-  appStore.setMenuTheme(color)
-  appStore.setHeaderTheme(color)
-}
 </script>
 
 <template>
@@ -72,7 +66,7 @@ const themeChange = () => {
             </div>
 
             <div class="flex justify-end items-center space-x-10px">
-              <ThemeSwitch @change="themeChange" />
+              <ThemeSwitch />
               <LocaleDropdown class="lt-xl:text-white dark:text-white" />
             </div>
           </div>