From 97d1e288a9d534926e166a3a822d4319f8d6d7b4 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Sat, 22 Feb 2025 18:10:18 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20useTheme=20?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/components/ThemeSwitch/index.vue | 18 +-----------------
 src/common/composables/useTheme.ts          | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/common/components/ThemeSwitch/index.vue b/src/common/components/ThemeSwitch/index.vue
index 27099b8..c910b4f 100644
--- 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
index 7ebf4a5..ec0c12f 100644
--- 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 */