From 907c6dd1c220a88e92c2af5c1d2178e935504cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
 <codingzhang@126.com>
Date: Sat, 22 Feb 2025 22:11:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                          |  1 +
 frontend/src/assets/base.css                  | 31 ++----
 frontend/src/assets/main.css                  |  2 +-
 .../src/components/DarkSwitch/DarkSwitch.vue  | 98 +++++++++++++++++++
 frontend/src/main.ts                          |  3 +
 frontend/src/stores/themeConfig.ts            | 27 ++++-
 frontend/src/types/common/ThemeConfig.ts      | 10 ++
 frontend/src/views/MainView.vue               | 22 ++---
 8 files changed, 156 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/DarkSwitch/DarkSwitch.vue
 create mode 100644 frontend/src/types/common/ThemeConfig.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 531a186..c47a011 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,6 +9,7 @@ const themeConfigStore = useThemeConfigStore()
 
 <template>
   {{ themeConfigStore.elConfig.size }}
+  {{ themeConfigStore.themeConfig.themeMode }}
   <el-config-provider :size="themeConfigStore.elConfig.size" :z-index="themeConfigStore.elConfig.zIndex"
     :button="{ autoInsertSpace: true }" :locale="locale">
     <MainView />
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
index 8816868..5e664be 100644
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -1,26 +1,3 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
 /* semantic color variables for this project */
 :root {
   --color-background: var(--vt-c-white);
@@ -84,3 +61,11 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.light body {
+}
+
+.dark body {
+  background-color: black;
+  color: white;
+}
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 79a2e46..8004d24 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4,7 +4,7 @@ a,
 .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+  /* transition: 0.4s; */
   padding: 3px;
 }
 
diff --git a/frontend/src/components/DarkSwitch/DarkSwitch.vue b/frontend/src/components/DarkSwitch/DarkSwitch.vue
new file mode 100644
index 0000000..ac59fc9
--- /dev/null
+++ b/frontend/src/components/DarkSwitch/DarkSwitch.vue
@@ -0,0 +1,98 @@
+<template>
+  <ElSwitch v-model="themeConfig.themeMode" :active-icon="Moon" active-value="dark" :inactive-icon="Sunny"
+    inactive-value="light" inline-prompt @click="_toggleDark($event)" />
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeMount } from 'vue'
+import { storeToRefs } from 'pinia'
+import { ElSwitch } from 'element-plus'
+import { Moon, Sunny } from '@element-plus/icons-vue'
+import { useThemeConfigStore } from '@/stores/themeConfig'
+import { useDark, useToggle } from '@vueuse/core'
+
+const themeConfigStore = useThemeConfigStore()
+
+const { themeConfig } = storeToRefs(themeConfigStore)
+
+const isDark = useDark()
+
+onBeforeMount(() => {
+  if (themeConfig.value.themeMode === 'auto') {
+
+  } else {
+    if (themeConfig.value.themeMode === 'dark') {
+      isDark.value = true
+    } else {
+      isDark.value = false
+    }
+  }
+  const root = document.documentElement
+  root.classList.add(isDark.value ? 'dark' : 'light')
+})
+
+const _toggleDark = async (event: MouseEvent) => {
+  if (typeof document.startViewTransition === 'function') {
+    const x = event.clientX
+    const y = event.clientY
+    const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+    nextTick(async () => {
+      let _isDark: boolean
+      const transition = document.startViewTransition(() => {
+        const root = document.documentElement
+        _isDark = root.classList.contains('dark')
+        root.classList.remove(_isDark ? 'dark' : 'light')
+        root.classList.add(_isDark ? 'light' : 'dark')
+      })
+      await transition.ready.then(() => {
+        const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+        // console.log('_isDark', _isDark)
+        document.documentElement.animate(
+          {
+            // clipPath: _isDark ? [...clipPath].reverse() : clipPath,
+            clipPath: clipPath,
+          },
+          {
+            duration: 500,
+            easing: 'ease-in',
+            // pseudoElement: _isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
+            pseudoElement: '::view-transition-new(root)',
+          }
+        )
+      })
+
+    })
+  } else {
+    const toggleDark = useToggle(themeConfig.value.isDark)
+    await toggleDark()
+  }
+}
+</script>
+
+<style>
+/* 注意这里不加 scope, 是全局样式 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+::view-transition-old(root) {
+  z-index: 999;
+}
+
+::view-transition-new(root) {
+  z-index: 1;
+}
+
+.dark,
+.light {
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 999;
+  }
+}
+</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9442666..a16d91b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -8,6 +8,9 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
 import router from './router'
 
+// element-plus 深色模式
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
 const app = createApp(App)
 
 // 导入 vue-i18n 模块
diff --git a/frontend/src/stores/themeConfig.ts b/frontend/src/stores/themeConfig.ts
index e9e9f46..49e39c2 100644
--- a/frontend/src/stores/themeConfig.ts
+++ b/frontend/src/stores/themeConfig.ts
@@ -1,20 +1,41 @@
-import { ref } from 'vue'
+import { computed, ref, type WritableComputedRef } from 'vue'
 import { defineStore } from 'pinia'
+import type { ElConfigSize, ThemeMode } from '@/types/common/ThemeConfig';
+import { useDark } from '@vueuse/core';
 
 export const useThemeConfigStore = defineStore('themeConfig', () => {
   // refer: https://element-plus.org/zh-CN/component/config-provider.html
   const elConfig = ref<{
     // 全局组件大小
-    size: "" | "small" | "default" | "large";
+    size: ElConfigSize;
     // 全局初始化 zIndex 的值
     zIndex?: number;
   }>({
     size: 'small',
-    zIndex: 3000,
+    // zIndex: 3000,
+  })
+
+  const themeConfig = ref<{
+    themeMode: ThemeMode,
+    // updateThemeMode: Function,
+    getCurrentThemeMode: Function,
+  }>({
+    themeMode: 'auto',
+    // updateThemeMode: (themeMode: ThemeMode) => {
+    //   themeConfig.value.themeMode = themeMode
+    // },
+    getCurrentThemeMode: () => {
+      if (themeConfig.value.themeMode === 'auto') {
+        return ''
+      }
+      return themeConfig.value.themeMode
+    },
   })
 
   return {
     elConfig,
+
+    themeConfig,
   }
 }, {
   // 启用持久化
diff --git a/frontend/src/types/common/ThemeConfig.ts b/frontend/src/types/common/ThemeConfig.ts
new file mode 100644
index 0000000..e70afdf
--- /dev/null
+++ b/frontend/src/types/common/ThemeConfig.ts
@@ -0,0 +1,10 @@
+
+/**
+ * element-plus config
+ */
+export type ElConfigSize = '' | 'small' | 'default' | 'large'
+
+/**
+ * theme config
+ */
+export type ThemeMode = 'auto' | 'light' | 'dark'
diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 8bbb778..847509d 100644
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -1,20 +1,20 @@
 <template>
   <RouterView />
 
-  <header>
-    <div class="wrapper">
-      <ElButton @click="() => themeConfigStore.elConfig.size = 'small'">哈哈哈</ElButton>
-      <ElButton @click="() => themeConfigStore.elConfig.size = 'default'">哈哈哈</ElButton>
-      <ElButton @click="() => themeConfigStore.elConfig.size = 'large'">哈哈哈</ElButton>
-      <nav>
-        <!-- <RouterLink to="/">Home</RouterLink> -->
-        <!-- <RouterLink to="/about">About</RouterLink> -->
-      </nav>
-    </div>
-  </header>
+  <DarkSwitch />
+  <div class="wrapper">
+    <ElButton @click="() => themeConfigStore.elConfig.size = 'small'">哈哈哈</ElButton>
+    <ElButton @click="() => themeConfigStore.elConfig.size = 'default'">哈哈哈</ElButton>
+    <ElButton @click="() => themeConfigStore.elConfig.size = 'large'">哈哈哈</ElButton>
+    <nav>
+      <!-- <RouterLink to="/">Home</RouterLink> -->
+      <!-- <RouterLink to="/about">About</RouterLink> -->
+    </nav>
+  </div>
 </template>
 
 <script setup lang="ts">
+import DarkSwitch from '@/components/DarkSwitch/DarkSwitch.vue';
 import { useThemeConfigStore } from '@/stores/themeConfig';
 import { ElButton } from 'element-plus';
 import { RouterLink, RouterView } from 'vue-router'