From 6baf92a81578aeebb557e5f24b14874aa8afc712 Mon Sep 17 00:00:00 2001
From: pany <panyang@mafengwo.com>
Date: Thu, 21 Mar 2024 09:54:36 +0800
Subject: [PATCH] =?UTF-8?q?Revert=20"Revert=20"feat=EF=BC=9A=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E5=8A=A8=E7=94=BB""?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 54e86ab517494b81b4bb2cf51d572351a194fb95.
---
 src/components/ThemeSwitch/index.vue | 18 ++++++++++++++++--
 src/styles/index.scss                | 17 +++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/ThemeSwitch/index.vue b/src/components/ThemeSwitch/index.vue
index cece2944..2ccc564c 100644
--- a/src/components/ThemeSwitch/index.vue
+++ b/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>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index fb4938ee..9d98741a 100644
--- a/src/styles/index.scss
+++ b/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);