From c4526f72b1c59e4eabff797a99b0479c2dcd8b6e Mon Sep 17 00:00:00 2001
From: nevlf <48950326+nevlf@users.noreply.github.com>
Date: Thu, 21 Mar 2024 10:00:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=20(#176)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: pany <panyang@mafengwo.com>
---
 src/components/ThemeSwitch/index.vue | 26 +++++++++++++++++++++++---
 src/styles/index.scss                |  2 ++
 src/styles/view-transition.scss      | 20 ++++++++++++++++++++
 3 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 src/styles/view-transition.scss

diff --git a/src/components/ThemeSwitch/index.vue b/src/components/ThemeSwitch/index.vue
index cece294..12a6635 100644
--- a/src/components/ThemeSwitch/index.vue
+++ b/src/components/ThemeSwitch/index.vue
@@ -1,12 +1,28 @@
 <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 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>
 
 <template>
-  <el-dropdown trigger="click" @command="setTheme">
+  <el-dropdown trigger="click">
     <div>
       <el-tooltip effect="dark" content="主题模式" placement="bottom">
         <el-icon :size="20">
@@ -20,7 +36,11 @@ const { themeList, activeThemeName, setTheme } = useTheme()
           v-for="(theme, index) in themeList"
           :key="index"
           :disabled="activeThemeName === theme.name"
-          :command="theme.name"
+          @click="
+            (e) => {
+              handleChangeTheme(e, theme.name)
+            }
+          "
         >
           <span>{{ theme.title }}</span>
         </el-dropdown-item>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index fb4938e..cbb6149 100644
--- a/src/styles/index.scss
+++ b/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 {
diff --git a/src/styles/view-transition.scss b/src/styles/view-transition.scss
new file mode 100644
index 0000000..debaac8
--- /dev/null
+++ b/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));
+  }
+}