Initial commit: One Pipe System

完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/utils/theme/animation.ts

@@ -0,0 +1,51 @@
+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)
+  }
+}