chore: update deps

package.json

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

src/components/common/ToggleTheme.vue

@@ -12,23 +12,33 @@ import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
 const isDark = useDark()
-function toggleDark({ clientX, clientY }) {
+async 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)()
   }
 
-  document.startViewTransition
+  if (!document.startViewTransition) {
-    ? document.startViewTransition(handler)
+    return handler()
-    : 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)`,
+    },
+  )
 }
 </script>

src/styles/global.scss

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