From 7488ada30de0763b854de98d625771ead5901718 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 22 Apr 2023 21:09:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(theme):=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=85=A8=E5=B1=80=E5=93=8D=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 14 +++++++++++++-
 src/components/t-sidebar.vue     | 19 +++++++++++++++----
 src/components/t-switchTheme.vue | 18 +++++++++++++++---
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e9079c5e..6eb18fd2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@ import { onMounted, ref } from "vue";
 import TSidebar from "./components/t-sidebar.vue";
 import TBackTop from "./components/t-backTop.vue";
 // tauri
-import { fs, window, app } from "@tauri-apps/api";
+import { fs, window, app, event } from "@tauri-apps/api";
 // store
 import { useAppStore } from "./store/modules/app";
 // utils
@@ -45,6 +45,7 @@ const theme = ref(appStore.theme as string);
 onMounted(async () => {
   // 获取当前主题
   document.documentElement.className = theme.value;
+  await listenOnTheme();
   // 获取当前窗口
   const win = window.getCurrent();
   isMain.value = win.label === "tauri-genshin";
@@ -55,6 +56,17 @@ onMounted(async () => {
   }
 });
 
+// 监听主题变化
+async function listenOnTheme () {
+  await event.listen("readTheme", (e) => {
+    const themeGet = e.payload as string;
+    if (theme.value !== themeGet) {
+      theme.value = themeGet;
+      document.documentElement.className = theme.value;
+    }
+  });
+}
+
 async function checkLoad () {
   if (appStore.loading) {
     console.info("数据已加载！");
diff --git a/src/components/t-sidebar.vue b/src/components/t-sidebar.vue
index 61307bf3..b923c648 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -139,7 +139,9 @@
 
 <script lang="ts" setup>
 // vue
-import { computed, ref } from "vue";
+import { computed, ref, onMounted } from "vue";
+// tauri
+import { event } from "@tauri-apps/api";
 // store
 import { useAppStore } from "../store/modules/app";
 
@@ -174,11 +176,20 @@ function collapse () {
   appStore.sidebar.collapse = rail.value;
 }
 
-function switchTheme () {
-  appStore.changeTheme();
-  document.documentElement.className = themeGet.value;
+onMounted(async () => {
+  await listenOnTheme();
+});
+
+async function listenOnTheme () {
+  await event.listen("readTheme", (e) => {
+    const theme = e.payload as string;
+    themeGet.value = theme === "default" ? "default" : "dark";
+  });
 }
 
+async function switchTheme () {
+  await event.emit("readTheme", themeGet.value === "default" ? "dark" : "default");
+}
 </script>
 
 <style lang="css" scoped>
diff --git a/src/components/t-switchTheme.vue b/src/components/t-switchTheme.vue
index 2d9cd606..2635acc9 100644
--- a/src/components/t-switchTheme.vue
+++ b/src/components/t-switchTheme.vue
@@ -9,7 +9,9 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
+// tauri
+import { event } from "@tauri-apps/api";
 // store
 import { useAppStore } from "../store/modules/app";
 
@@ -25,11 +27,21 @@ const themeGet = computed({
   },
 });
 
-function swithcTheme () {
+onMounted(async () => {
+  await listenOnTheme();
+});
+
+async function swithcTheme () {
   appStore.changeTheme();
-  document.documentElement.className = themeGet.value;
+  await event.emit("readTheme", themeGet.value);
 }
 
+async function listenOnTheme () {
+  await event.listen("readTheme", (e) => {
+    const theme = e.payload as string;
+    themeGet.value = theme === "default" ? "default" : "dark";
+  });
+}
 </script>
 <style lang="css" scoped>
 .switch-box {