Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

♻️ 代码规范化

Browse Source
This commit is contained in:
目棃
2024-04-12 12:56:23 +08:00
parent d9cdea9670
commit 2aa0df5246
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,13 +9,12 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { event } from "@tauri-apps/api"; import { event } from "@tauri-apps/api";
import { computed, onMounted } from "vue"; import { UnlistenFn } from "@tauri-apps/api/helpers/event";
import { computed, onMounted, onUnmounted } from "vue";
import { useAppStore } from "../../store/modules/app"; import { useAppStore } from "../../store/modules/app";
// store
const appStore = useAppStore(); const appStore = useAppStore();
// theme
const themeGet = computed({ const themeGet = computed({
get() { get() {
return appStore.theme; return appStore.theme;
@@ -24,9 +23,10 @@ const themeGet = computed({
appStore.theme = value; appStore.theme = value;
}, },
}); });
let themeListener: UnlistenFn;
onMounted(async () => { onMounted(async () => {
await listenOnTheme(); themeListener = await listenOnTheme();
}); });
async function switchTheme(): Promise<void> { async function switchTheme(): Promise<void> {
@@ -34,12 +34,18 @@ async function switchTheme(): Promise<void> {
await event.emit("readTheme", themeGet.value); await event.emit("readTheme", themeGet.value);
} }
async function listenOnTheme(): Promise<void> { async function listenOnTheme(): Promise<UnlistenFn> {
await event.listen("readTheme", (e) => { return await event.listen<string>("readTheme", (e) => {
const theme = <string>e.payload; const theme = e.payload;
themeGet.value = theme === "default" ? "default" : "dark"; themeGet.value = theme === "default" ? "default" : "dark";
}); });
} }
onUnmounted(() => {
if (themeListener) {
themeListener();
}
});
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.switch-box { .switch-box {