Merge pull request #599 from lijiahong123/fix/theme_switch_comp_optimization

fix: 修复主题switch状态不统一的问题

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>

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>
 

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>