✨ feat(theme): 主题切换全局响应

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("数据已加载！");

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>

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 {