refactor: 重构

src/components/ThemeSwitch/index.vue

@@ -4,17 +4,20 @@ import { MagicStick } from "@element-plus/icons-vue"
 
 const { themeList, activeThemeName, setTheme } = useTheme()
 
-const onChangeTheme = (event: MouseEvent, themeName: ThemeName) => {
-  document.documentElement.style.setProperty("--x", event.clientX + "px")
-  document.documentElement.style.setProperty("--y", event.clientY + "px")
-  const handler = () => setTheme(themeName)
-  // @ts-ignore
-  if (document.startViewTransition) {
-    // @ts-ignore
-    document.startViewTransition(handler)
-  } else {
-    handler()
+const handleChangeTheme = ({ clientX, clientY }: MouseEvent, themeName: ThemeName) => {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY)
+  )
+  const style = document.documentElement.style
+  style.setProperty("--v3-theme-x", clientX + "px")
+  style.setProperty("--v3-theme-y", clientY + "px")
+  style.setProperty("--v3-theme-r", maxRadius + "px")
+  const handler = () => {
+    setTheme(themeName)
   }
+  // @ts-expect-error
+  document.startViewTransition ? document.startViewTransition(handler) : handler()
 }
 </script>
 
@@ -33,8 +36,11 @@ const onChangeTheme = (event: MouseEvent, themeName: ThemeName) => {
           v-for="(theme, index) in themeList"
           :key="index"
           :disabled="activeThemeName === theme.name"
-          :command="theme.name"
-          @click="(e) => onChangeTheme(e, theme.name)"
+          @click="
+            (e) => {
+              handleChangeTheme(e, theme.name)
+            }
+          "
         >
           <span>{{ theme.title }}</span>
         </el-dropdown-item>

src/styles/index.scss

@@ -10,6 +10,8 @@
 @import "./theme/register.scss";
 // mixin
 @import "./mixins.scss";
+// View Transition
+@import "./view-transition.scss";
 
 // 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
 .app-container {
@@ -20,23 +22,6 @@ html {
   height: 100%;
 }
 
-::view-transition-old(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-::view-transition-new(root) {
-  mix-blend-mode: normal;
-  animation: wave 0.7s ease-in;
-}
-@keyframes wave {
-  from {
-    clip-path: circle(0% at var(--x) var(--y));
-  }
-  to {
-    clip-path: circle(150% at var(--x) var(--y));
-  }
-}
-
 body {
   height: 100%;
   background-color: var(--v3-body-bg-color);

src/styles/view-transition.scss

@@ -0,0 +1,20 @@
+/** 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+） */
+
+::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation: 0.5s ease-in clip-animation;
+  mix-blend-mode: normal;
+}
+
+@keyframes clip-animation {
+  from {
+    clip-path: circle(0 at var(--v3-theme-x) var(--v3-theme-y));
+  }
+  to {
+    clip-path: circle(var(--v3-theme-r) at var(--v3-theme-x) var(--v3-theme-y));
+  }
+}