package.json

@@ -16,40 +16,40 @@
     "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
-    "echarts": "^5.5.1",
+    "echarts": "^5.5.0",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.38.2",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.31",
+    "vue": "^3.4.29",
     "vue-echarts": "^6.7.3",
-    "vue-router": "^4.4.0",
+    "vue-router": "^4.3.3",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.21.2",
-    "@iconify/json": "^2.2.223",
-    "@iconify/utils": "^2.1.25",
+    "@antfu/eslint-config": "^2.21.1",
+    "@iconify/json": "^2.2.219",
+    "@iconify/utils": "^2.1.24",
     "@unocss/eslint-config": "^0.61.0",
     "@unocss/eslint-plugin": "^0.61.0",
     "@unocss/preset-rem-to-px": "^0.61.0",
     "@vitejs/plugin-vue": "^5.0.5",
-    "eslint": "^9.6.0",
+    "eslint": "^9.5.0",
     "eslint-plugin-format": "^0.1.2",
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.4.2",
+    "glob": "^10.4.1",
     "lint-staged": "^15.2.7",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.5",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.13.9",
+    "taze": "^0.13.8",
     "unocss": "^0.61.0",
     "unplugin-auto-import": "^0.17.6",
-    "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.3.2",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.3.1",
     "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-devtools": "^7.3.5"
+    "vite-plugin-vue-devtools": "^7.3.0"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

src/components/common/ToggleTheme.vue

@@ -12,33 +12,23 @@ import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
 const isDark = useDark()
-async function toggleDark({ clientX, clientY }) {
+function toggleDark({ clientX, clientY }) {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY),
+  )
+  const style = document.documentElement.style
+  style.setProperty('--circle-x', `${clientX}px`)
+  style.setProperty('--circle-y', `${clientY}px`)
+  style.setProperty('--circle-r', `${maxRadius}px`)
+
   function handler() {
     appStore.toggleDark()
     useToggle(isDark)()
   }
 
-  if (!document.startViewTransition) {
-    return handler()
-  }
-
-  const clipPath = [
-    `circle(0px at ${clientX}px ${clientY}px)`,
-    `circle(${Math.hypot(
-      Math.max(clientX, window.innerWidth - clientX),
-      Math.max(clientY, window.innerHeight - clientY),
-    )}px at ${clientX}px ${clientY}px)`,
-  ]
-
-  await document.startViewTransition(handler).ready
-
-  document.documentElement.animate(
-    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
-    {
-      duration: 500,
-      easing: 'ease-in',
-      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
-    },
-  )
+  document.startViewTransition
+    ? document.startViewTransition(handler)
+    : handler()
 }
 </script>

src/styles/global.scss

@@ -74,18 +74,21 @@ body {
 }
 
 /* 切换主题的动画效果 */
-::view-transition-old(root),
-::view-transition-new(root) {
+::view-transition-old(root) {
   animation: none;
   mix-blend-mode: normal;
 }
 
-::view-transition-old(root),
-.dark::view-transition-new(root) {
-  z-index: 1;
+::view-transition-new(root) {
+  animation: 0.5s ease-in circle-animation;
+  mix-blend-mode: normal;
 }
 
-::view-transition-new(root),
-.dark::view-transition-old(root) {
-  z-index: 9999;
+@keyframes circle-animation {
+  from {
+    clip-path: circle(0 at var(--circle-x) var(--circle-y));
+  }
+  to {
+    clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
+  }
 }