Revert "Revert "feat：主题切换动画""

This reverts commit 54e86ab517494b81b4bb2cf51d572351a194fb95.

src/components/ThemeSwitch/index.vue

@@ -1,12 +1,25 @@
 <script lang="ts" setup>
-import { useTheme } from "@/hooks/useTheme"
+import { type ThemeName, useTheme } from "@/hooks/useTheme"
 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()
+  }
+}
 </script>
 
 <template>
-  <el-dropdown trigger="click" @command="setTheme">
+  <el-dropdown trigger="click">
     <div>
       <el-tooltip effect="dark" content="主题模式" placement="bottom">
         <el-icon :size="20">
@@ -21,6 +34,7 @@ const { themeList, activeThemeName, setTheme } = useTheme()
           :key="index"
           :disabled="activeThemeName === theme.name"
           :command="theme.name"
+          @click="(e) => onChangeTheme(e, theme.name)"
         >
           <span>{{ theme.title }}</span>
         </el-dropdown-item>

src/styles/index.scss

@@ -20,6 +20,23 @@ 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);