From 8da8843fd0d4a9652dad594b929a2519ca3b9e0f Mon Sep 17 00:00:00 2001
From: cc <cc@qq.com>
Date: Sun, 14 May 2023 16:35:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=A2=9E=E5=8A=A0=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E8=BF=87=E6=B8=A1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                      |  3 +-
 src/components/common/dark-mode-switch.vue | 48 ++++++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index eb5941b5..9e955890 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -70,5 +70,6 @@
   },
   "[vue]": {
     "editor.defaultFormatter": "Vue.volar"
-  }
+  },
+  "i18n-ally.localesPaths": ["src/locales", "src/locales/lang"]
 }
diff --git a/src/components/common/dark-mode-switch.vue b/src/components/common/dark-mode-switch.vue
index 9fa01fe6..3342c484 100644
--- a/src/components/common/dark-mode-switch.vue
+++ b/src/components/common/dark-mode-switch.vue
@@ -34,9 +34,51 @@ const darkMode = computed({
   }
 });
 
-function handleSwitch() {
-  darkMode.value = !darkMode.value;
+function handleSwitch(event: MouseEvent) {
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+  // @ts-expect-error: Transition API
+  if (!document.startViewTransition) {
+    darkMode.value = !darkMode.value;
+    return;
+  }
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(() => {
+    darkMode.value = !darkMode.value;
+  });
+  transition.ready.then(() => {
+    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
+    document.documentElement.animate(
+      {
+        clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
+      },
+      {
+        duration: 300,
+        easing: 'ease-in',
+        pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
+      }
+    );
+  });
 }
 </script>
 
-<style scoped></style>
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 9999;
+}
+::view-transition-new(root) {
+  z-index: 1;
+}
+.dark::view-transition-old(root) {
+  z-index: 1;
+}
+.dark::view-transition-new(root) {
+  z-index: 9999;
+}
+</style>