mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
97 lines
3.0 KiB
Vue
97 lines
3.0 KiB
Vue
<!-- eslint-disable vue/no-v-html -->
|
|
<!-- todo 优化显示样式 -->
|
|
<template>
|
|
<TSwitchTheme />
|
|
<TShareBtn
|
|
v-show="!loadingEmpty"
|
|
v-model="annoRef"
|
|
v-model:loading="loadShare"
|
|
:title="annoTitle"
|
|
/>
|
|
<ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" :empty="loadingEmpty" />
|
|
<div class="anno-body">
|
|
<div class="anno-title">
|
|
{{ annoData.title }}
|
|
</div>
|
|
<div class="anno-subtitle">
|
|
{{ annoData.subtitle }}
|
|
</div>
|
|
<img v-if="annoData.banner !== ''" :src="annoBanner" alt="cover" class="anno-img" />
|
|
<div class="anno-content" v-html="annoHtml" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
// vue
|
|
import { ref, onMounted, watch } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import ToLoading from "../components/overlay/to-loading.vue";
|
|
import TSwitchTheme from "../components/app/t-switchTheme.vue";
|
|
import TShareBtn from "../components/main/t-shareBtn.vue";
|
|
// tauri
|
|
import { appWindow } from "@tauri-apps/api/window";
|
|
// utils
|
|
import TGRequest from "../web/request/TGRequest";
|
|
import TGUtils from "../web/utils/TGUtils";
|
|
import { saveImgLocal } from "../utils/TGShare";
|
|
|
|
// loading
|
|
const loading = ref<boolean>(true);
|
|
const loadShare = ref<boolean>(false);
|
|
const loadingTitle = ref<string>("正在加载");
|
|
const loadingSub = ref<string>();
|
|
const loadingEmpty = ref<boolean>(false);
|
|
|
|
// share
|
|
const annoRef = ref<HTMLElement>(<HTMLElement>{});
|
|
const annoTitle = ref<string>("");
|
|
|
|
// 数据
|
|
const annoId = Number(useRoute().params.anno_id);
|
|
const annoData = ref<TGApp.BBS.Announcement.ContentItem>(<TGApp.BBS.Announcement.ContentItem>{});
|
|
const annoHtml = ref<string>();
|
|
const annoBanner = ref<string>();
|
|
|
|
onMounted(async () => {
|
|
await appWindow.show();
|
|
// 检查数据
|
|
if (!annoId) {
|
|
loadingEmpty.value = true;
|
|
loadingTitle.value = "未找到数据";
|
|
return;
|
|
}
|
|
// 获取数据
|
|
loadingTitle.value = "正在获取数据...";
|
|
loading.value = true;
|
|
try {
|
|
annoData.value = await TGRequest.Anno.getContent(annoId);
|
|
loadingTitle.value = "正在渲染数据...";
|
|
annoHtml.value = await TGUtils.Anno.parseContent(annoData.value.content);
|
|
if (annoData.value.banner !== "") annoBanner.value = await saveImgLocal(annoData.value.banner);
|
|
annoTitle.value = `Anno_${annoId}`;
|
|
await appWindow.setTitle(`Anno_${annoId} ${annoData.value.title}`);
|
|
annoRef.value = <HTMLElement>document.querySelector(".anno-body");
|
|
} catch (error) {
|
|
console.error(error);
|
|
loadingEmpty.value = true;
|
|
loadingTitle.value = "公告不存在或解析失败";
|
|
await appWindow.setTitle(`Anno_${annoId} Parsing Error`);
|
|
return;
|
|
}
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 200);
|
|
});
|
|
|
|
watch(loadShare, (value) => {
|
|
if (value) {
|
|
loadingTitle.value = "正在生成分享图片";
|
|
loadingSub.value = `${annoTitle.value}.png`;
|
|
loading.value = true;
|
|
} else {
|
|
loadingSub.value = "";
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="css" src="../assets/css/anno-parser.css" scoped></style>
|