perf: 优化 useTheme 逻辑

pany-ang · pany-ang · commit 97d1e288a9d5 · 2025-02-22T18:10:18.000+08:00
diff --git a/src/common/components/ThemeSwitch/index.vue b/src/common/components/ThemeSwitch/index.vue
@@ -1,24 +1,8 @@
 <script lang="ts" setup>
-import type { ThemeName } from "@@/composables/useTheme"
 import { useTheme } from "@@/composables/useTheme"
 import { MagicStick } from "@element-plus/icons-vue"
 
 const { themeList, activeThemeName, setTheme } = useTheme()
-
-function handleChangeTheme({ clientX, clientY }: MouseEvent, themeName: ThemeName) {
-  const maxRadius = Math.hypot(
-    Math.max(clientX, window.innerWidth - clientX),
-    Math.max(clientY, window.innerHeight - clientY)
-  )
-  const style = document.documentElement.style
-  style.setProperty("--v3-theme-x", `${clientX}px`)
-  style.setProperty("--v3-theme-y", `${clientY}px`)
-  style.setProperty("--v3-theme-r", `${maxRadius}px`)
-  const handler = () => {
-    setTheme(themeName)
-  }
-  document.startViewTransition ? document.startViewTransition(handler) : handler()
-}
 </script>
 
 <template>
@@ -36,7 +20,7 @@ function handleChangeTheme({ clientX, clientY }: MouseEvent, themeName: ThemeNam
           v-for="(theme, index) in themeList"
           :key="index"
           :disabled="activeThemeName === theme.name"
-          @click="(e: MouseEvent) => handleChangeTheme(e, theme.name)"
+          @click="(e: MouseEvent) => setTheme(e, theme.name)"
         >
           <span>{{ theme.title }}</span>
         </el-dropdown-item>
diff --git a/src/common/composables/useTheme.ts b/src/common/composables/useTheme.ts
@@ -1,4 +1,5 @@
 import { getActiveThemeName, setActiveThemeName } from "@@/utils/cache/local-storage"
+import { setCssVar } from "@@/utils/css"
 
 const DEFAULT_THEME_NAME = "normal"
 
@@ -32,8 +33,18 @@ const themeList: ThemeList[] = [
 const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)
 
 /** 设置主题 */
-function setTheme(value: ThemeName) {
-  activeThemeName.value = value
+function setTheme({ clientX, clientY }: MouseEvent, value: ThemeName) {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY)
+  )
+  setCssVar("--v3-theme-x", `${clientX}px`)
+  setCssVar("--v3-theme-y", `${clientY}px`)
+  setCssVar("--v3-theme-r", `${maxRadius}px`)
+  const handler = () => {
+    activeThemeName.value = value
+  }
+  document.startViewTransition ? document.startViewTransition(handler) : handler()
 }
 
 /** 在 html 根元素上挂载 class */
