Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-31 06:29:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 修复主题切换响应异常

Browse Source
This commit is contained in:
目棃
2024-12-11 23:10:31 +08:00
parent 7108741400
commit bb217cf7a8
6 changed files with 1314 additions and 1385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/app/t-switchTheme.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="switch-box" :title="themeGet === 'default' ? '切换到深色模式' : '切换到浅色模式'">
<div class="switch-box" :title="theme === 'default' ? '切换到深色模式' : '切换到浅色模式'">
<div class="switch-btn" @click="switchTheme()">
<v-icon>
{{ themeGet === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
{{ theme === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
</v-icon>
</div>
</div>
@@ -10,35 +10,30 @@
<script lang="ts" setup>
import { event } from "@tauri-apps/api";
import { Event, UnlistenFn } from "@tauri-apps/api/event";
import { computed, onMounted, onUnmounted, shallowRef } from "vue";
import { storeToRefs } from "pinia";
import { onMounted, onUnmounted } from "vue";
import { useAppStore } from "../../store/modules/app.js";
const { theme } = storeToRefs(useAppStore());
const appStore = useAppStore();
const themeGet = computed<string>({
get: () => appStore.theme,
set: (v: string) => (appStore.theme = v),
});
const themeListener = shallowRef<UnlistenFn | null>(null);
let themeListener: UnlistenFn | null = null;
onMounted(async () => (themeListener.value = await listenOnTheme()));
onMounted(async () => {
themeListener = event.listen("readTheme", (e: Event<string>) => {
theme.value = e.payload === "default" ? "default" : "dark";
});
});
async function switchTheme(): Promise<void> {
appStore.changeTheme();
await event.emit("readTheme", themeGet.value);
}
async function listenOnTheme(): Promise<UnlistenFn> {
return await event.listen("readTheme", (e: Event<string>) => {
const theme = e.payload;
themeGet.value = theme === "default" ? "default" : "dark";
});
await event.emit("readTheme", theme.value);
}
onUnmounted(() => {
if (themeListener.value !== null) {
themeListener.value();
themeListener.value = null;
if (themeListener !== null) {
themeListener();
themeListener = null;
}
});
</script>