222e5bb11a
完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { useCommon } from '@/composables/useCommon'
|
|
import { useTheme } from '@/composables/useTheme'
|
|
import { SystemThemeEnum } from '@/enums/appEnum'
|
|
import { useSettingStore } from '@/store/modules/setting'
|
|
const { LIGHT, DARK } = SystemThemeEnum
|
|
|
|
/**
|
|
* 主题切换动画
|
|
* @param e 鼠标点击事件
|
|
*/
|
|
export const themeAnimation = (e: any) => {
|
|
const x = e.clientX
|
|
const y = e.clientY
|
|
// 计算鼠标点击位置距离视窗的最大圆半径
|
|
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
|
|
|
|
// 设置CSS变量
|
|
document.documentElement.style.setProperty('--x', x + 'px')
|
|
document.documentElement.style.setProperty('--y', y + 'px')
|
|
document.documentElement.style.setProperty('--r', endRadius + 'px')
|
|
|
|
if (document.startViewTransition) {
|
|
document.startViewTransition(() => toggleTheme())
|
|
} else {
|
|
toggleTheme()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 切换主题
|
|
*/
|
|
const toggleTheme = () => {
|
|
useTheme().switchThemeStyles(useSettingStore().systemThemeType === LIGHT ? DARK : LIGHT)
|
|
useCommon().refresh()
|
|
}
|
|
|
|
/**
|
|
* 提升暗黑主题下页面刷新视觉体验
|
|
* @param addClass 是否添加 class
|
|
*/
|
|
export const setThemeTransitionClass = (addClass: boolean) => {
|
|
const el = document.getElementsByTagName('body')[0]
|
|
|
|
if (addClass) {
|
|
el.setAttribute('class', 'theme-change')
|
|
} else {
|
|
setTimeout(() => {
|
|
el.removeAttribute('class')
|
|
}, 300)
|
|
}
|
|
}
|