Merge pull request #1950 from Azir-11/beta

优化主题模式相关内容

web/src/components/commandMenu/index.vue

@@ -90,11 +90,11 @@
     const quickArr = [
       {
         label: '亮色主题',
-        func: () => changeMode('light')
+        func: () => changeMode(false)
       },
       {
         label: '暗色主题',
-        func: () => changeMode('dark')
+        func: () => changeMode(true)
       },
       {
         label: '退出登录',
@@ -135,12 +135,8 @@
     dialogVisible.value = false
   }
 
-  const changeMode = (e) => {
-    if (e === null) {
-      appStore.toggleTheme(false)
-      return
-    }
-    appStore.toggleTheme(true)
+  const changeMode = (darkMode) => {
+    appStore.toggleTheme(darkMode)
   }
 
   const close = () => {

web/src/hooks/charts.js

@@ -7,7 +7,7 @@ import { useAppStore } from '@/pinia'
 export default function useChartOption(sourceOption) {
   const appStore = useAppStore()
   const isDark = computed(() => {
-    return appStore.theme === 'dark'
+    return appStore.isDark
   })
   const chartOption = computed(() => {
     return sourceOption(isDark.value)

web/src/pathInfo.json

@@ -64,4 +64,4 @@
   "/src/plugin/announcement/form/info.vue": "InfoForm",
   "/src/plugin/announcement/view/info.vue": "Info",
   "/src/plugin/email/view/index.vue": "Email"
-}
+}

web/src/pinia/modules/app.js

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { ref, watchEffect, reactive } from 'vue'
 import { setBodyPrimaryColor } from '@/utils/format'
+import { useDark, usePreferredDark } from '@vueuse/core'
+
 export const useAppStore = defineStore('app', () => {
   const device = ref('')
   const config = reactive({
@@ -16,14 +18,17 @@ export const useAppStore = defineStore('app', () => {
     side_mode: 'normal'
   })
 
-  const theme = ref('auto')
+  const isDark = useDark({
+    selector: 'html',
+    attribute: 'class',
+    valueDark: 'dark',
+    valueLight: 'light',
+  })
 
-  const toggleTheme = (dark) => {
-    if (dark) {
-      theme.value = 'dark'
-    } else {
-      theme.value = 'light'
-    }
+  const preferredDark = usePreferredDark()
+
+  const toggleTheme = (darkMode) => {
+    isDark.value = darkMode
   }
 
   const toggleWeakness = (e) => {
@@ -50,15 +55,14 @@ export const useAppStore = defineStore('app', () => {
     config.darkMode = e
   }
 
-  const toggleDarkModeAuto = () => {
-    // 处理浏览器主题
-    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    const dark = darkQuery.matches
-    toggleTheme(dark)
-    darkQuery.addEventListener('change', (e) => {
-      toggleTheme(e.matches)
-    })
-  }
+  // 监听系统主题变化
+  watchEffect(() => {
+    if (config.darkMode === 'auto') {
+      isDark.value = preferredDark.value
+      return
+    }
+    isDark.value = config.darkMode === 'dark'
+  })
 
   const toggleConfigSideWidth = (e) => {
     config.layout_side_width = e
@@ -76,54 +80,23 @@ export const useAppStore = defineStore('app', () => {
     config.show_watermark = e
   }
 
-  const toggleSideModel = (e) => {
+  const toggleSideMode = (e) => {
     config.side_mode = e
   }
 
+    // 监听色弱模式和灰色模式
   watchEffect(() => {
-    if (theme.value === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-  })
-  watchEffect(() => {
-    // 色弱模式监听处理
-    if (config.weakness) {
-      document.documentElement.classList.add('html-weakenss')
-    } else {
-      document.documentElement.classList.remove('html-weakenss')
-    }
-  })
-  watchEffect(() => {
-    // 灰色模式监听处理
-    if (config.grey) {
-      document.documentElement.classList.add('html-grey')
-    } else {
-      document.documentElement.classList.remove('html-grey')
-    }
-  })
-
-  watchEffect(() => {
-    if (config.darkMode === 'auto') {
-      toggleDarkModeAuto()
-    }
-
-    if (config.darkMode === 'dark') {
-      toggleTheme(true)
-    } else {
-      toggleTheme(false)
-    }
+    document.documentElement.classList.toggle('html-weakenss', config.weakness)
+    document.documentElement.classList.toggle('html-grey', config.grey)
   })
 
+  // 监听主题色
   watchEffect(() => {
-    setBodyPrimaryColor(config.primaryColor, theme.value)
+    setBodyPrimaryColor(config.primaryColor, isDark.value ? 'dark' : 'light')
   })
 
   return {
-    theme,
+    isDark,
     device,
     config,
     toggleTheme,
@@ -137,6 +110,6 @@ export const useAppStore = defineStore('app', () => {
     toggleConfigSideCollapsedWidth,
     toggleConfigSideItemHeight,
     toggleConfigWatermark,
-    toggleSideModel
+    toggleSideMode
   }
 })

web/src/view/dashboard/components/charts-content-numbers.vue

@@ -25,8 +25,7 @@
     }
   })
   const dotColor = computed(() => {
-    console.log(appStore.theme)
-    return appStore.theme === 'dark' ? '#333' : '#E5E8EF'
+    return appStore.isDark ? '#333' : '#E5E8EF'
   })
   const graphicFactory = (side) => {
     return {

web/src/view/layout/header/tools.vue

@@ -58,10 +58,9 @@
       effect="dark"
       content="切换主题"
       placement="bottom"
-      :disabled="appStore.theme === 'auto'"
     >
       <el-icon
-        v-if="appStore.theme === 'dark'"
+        v-if="appStore.isDark"
         class="w-8 h-8 shadow rounded-full border border-gray-600 cursor-pointer border-solid"
         @click="appStore.toggleTheme(false)"
       >

web/src/view/layout/index.vue

@@ -62,7 +62,7 @@
   import { useAppStore } from '@/pinia'
   import { storeToRefs } from 'pinia'
   const appStore = useAppStore()
-  const { config, theme, device } = storeToRefs(appStore)
+  const { config, isDark, device } = storeToRefs(appStore)
 
   defineOptions({
     name: 'GvaLayout'
@@ -75,7 +75,7 @@
 
   watchEffect(() => {
     font.color =
-      theme.value === 'dark' ? 'rgba(255,255,255, .15)' : 'rgba(0, 0, 0, .15)'
+      isDark.value ? 'rgba(255,255,255, .15)' : 'rgba(0, 0, 0, .15)'
   })
 
   const router = useRouter()

web/src/view/layout/setting/index.vue

@@ -71,7 +71,7 @@
               v-model="config.side_mode"
               :options="sideModes"
               size="default"
-              @change="appStore.toggleSideModel"
+              @change="appStore.toggleSideMode"
             />
             <!-- <el-select
               v-model="config.side_mode"