wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-19 02:19:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化 useTheme 逻辑

Browse Source
This commit is contained in:
pany 2025-02-22 18:10:18 +08:00
parent 8d0c30b001
commit 97d1e288a9
2 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/common/components/ThemeSwitch/index.vue
View File

@ -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>

15
src/common/composables/useTheme.ts
View File

@ -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 */