📝 更新系统gif描述

web/src/store/index.js

@@ -114,32 +114,24 @@ const useStore = defineStore({
     setTheme(isDark, animate = true) {
       // $store.setThemeConfig({ isDark: val })
       const html = document.documentElement
+      let setAttribute = () => {
+        if (isDark) html.setAttribute('class', 'dark')
+        else html.setAttribute('class', '')
+        localStorage.setItem('isDark', isDark)
+        this.$patch({ isDark })
+      }
       if(animate) {
         let transition = document.startViewTransition(() => {
-        // 在 startViewTransition 中修改 DOM 状态产生动画
           document.documentElement.classList.toggle('dark')
         })
         transition.ready.then(() => {
-        // 由于我们要从鼠标点击的位置开始做动画，所以我们需要先获取到鼠标的位置
-        // 假设 'e' 是从某个事件监听器传入的事件对象
-
-          // 窗口中心点
-          // const screenWidth = window.innerWidth
-          // const screenHeight = window.innerHeight
-          // const centerX = screenWidth / 2
-          // const centerY = screenHeight / 2
           const centerX = 0
           const centerY = 0
-
-          // 现在 centerX 和 centerY 包含了屏幕中心的坐标
-          console.log('Screen center X:', centerX, 'Screen center Y:', centerY)
-
-          // 计算半径，以鼠标点击的位置为圆心，到四个角的距离中最大的那个作为半径
           const radius = Math.hypot(
-            Math.max(centerX, innerWidth - centerX),
-            Math.max(centerY, innerHeight - centerY)
+            Math.max(centerX, window.innerWidth - centerX),
+            Math.max(centerY, window.innerHeight - centerY)
           )
-
+          console.log('radius: ', innerWidth, innerHeight, radius)
           // 自定义动画
           document.documentElement.animate(
             {
@@ -153,12 +145,10 @@ const useStore = defineStore({
               pseudoElement: '::view-transition-new(root)'
             }
           )
-
-          if (isDark) html.setAttribute('class', 'dark')
-          else html.setAttribute('class', '')
-          localStorage.setItem('isDark', isDark)
-          this.$patch({ isDark })
+          setAttribute()
         })
+      } else {
+        setAttribute()
       }
     },
     setDefaultTheme() {