mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
121 lines
3.7 KiB
Vue
121 lines
3.7 KiB
Vue
<template>
|
||
<TSwitchTheme />
|
||
<TPinWin />
|
||
<TShareBtn v-model="annoRef" :title="annoTitle" />
|
||
<div class="anno-body" v-if="annoData">
|
||
<div class="anno-info">AnnoID: {{ annoId }} | Render by TeyvatGuide v{{ appVersion }}</div>
|
||
<div class="anno-title">{{ annoData.title }}</div>
|
||
<div class="anno-subtitle">{{ parseText(annoData.subtitle) }}</div>
|
||
<div class="anno-content">
|
||
<TaParser :data="annoData" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { app, webviewWindow } from "@tauri-apps/api";
|
||
import { ref, onMounted } from "vue";
|
||
import { useRoute } from "vue-router";
|
||
|
||
import TaParser from "../components/anno/ta-parser.vue";
|
||
import TPinWin from "../components/app/t-pinWin.vue";
|
||
import TShareBtn from "../components/app/t-shareBtn.vue";
|
||
import TSwitchTheme from "../components/app/t-switchTheme.vue";
|
||
import showLoading from "../components/func/loading.js";
|
||
import { useAppStore } from "../store/modules/app.js";
|
||
import TGLogger from "../utils/TGLogger.js";
|
||
import { createTGWindow } from "../utils/TGWindow.js";
|
||
import Hk4eApi, { AnnoLang, AnnoServer } from "../web/request/hk4eReq.js";
|
||
|
||
const annoRef = ref<HTMLElement>(<HTMLElement>{});
|
||
const annoTitle = ref<string>("");
|
||
|
||
// 数据
|
||
const route = useRoute();
|
||
const annoId = Number(route.params.anno_id);
|
||
const region = <AnnoServer>route.params.region;
|
||
const lang = <AnnoLang>route.params.lang;
|
||
const appVersion = ref<string>();
|
||
const annoData = ref<TGApp.BBS.Announcement.ContentItem | undefined>();
|
||
|
||
onMounted(async () => {
|
||
showLoading.start("正在加载公告数据...");
|
||
appVersion.value = await app.getVersion();
|
||
if (!annoId || !region) {
|
||
showLoading.empty("未找到数据", "公告不存在或解析失败");
|
||
await TGLogger.Error("[t-anno.vue] 未找到数据");
|
||
return;
|
||
}
|
||
showLoading.update("正在获取数据...", `公告ID:${annoId}`);
|
||
try {
|
||
annoData.value = await Hk4eApi.anno.content(annoId, region, lang);
|
||
showLoading.update("正在渲染数据...", `公告ID：${annoId}`);
|
||
annoTitle.value = `Anno_${annoId}`;
|
||
await webviewWindow
|
||
.getCurrentWebviewWindow()
|
||
.setTitle(`Anno_${annoId} ${annoData.value.title}`);
|
||
annoRef.value = <HTMLElement>document.querySelector(".anno-body");
|
||
} catch (error) {
|
||
if (error instanceof Error)
|
||
await TGLogger.Error(`[t-anno.vue][${annoId}] ${error.name}：${error.message}`);
|
||
else console.error(error);
|
||
showLoading.empty("未找到数据", "公告不存在或解析失败");
|
||
await webviewWindow.getCurrentWebviewWindow().setTitle(`Anno_${annoId} Parsing Error`);
|
||
return;
|
||
}
|
||
// 打开 json
|
||
const isDev = useAppStore().devMode ?? false;
|
||
if (isDev) await createAnnoJson(annoId, region, lang);
|
||
showLoading.end();
|
||
});
|
||
|
||
function parseText(title: string): string {
|
||
const div = document.createElement("div");
|
||
div.innerHTML = title;
|
||
return div.innerText;
|
||
}
|
||
|
||
async function createAnnoJson(annoId: number, region: AnnoServer, lang: AnnoLang): Promise<void> {
|
||
const jsonPath = `/anno_detail_json/${region}/${annoId}/${lang}`;
|
||
const jsonTitle = `Anno_${region}_${annoId}_${lang}_JSON`;
|
||
await createTGWindow(jsonPath, "Dev_JSON", jsonTitle, 960, 720, false, false);
|
||
}
|
||
</script>
|
||
<style lang="css" scoped>
|
||
.anno-info {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: space-between;
|
||
border-bottom: 1px dashed var(--common-shadow-2);
|
||
margin-bottom: 10px;
|
||
color: var(--box-text-4);
|
||
font-family: var(--font-title);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.anno-body {
|
||
width: 800px;
|
||
margin: 0 auto;
|
||
font-family: var(--font-text);
|
||
}
|
||
|
||
.anno-title,
|
||
.anno-subtitle {
|
||
color: var(--common-text-title);
|
||
font-family: var(--font-title);
|
||
}
|
||
|
||
.anno-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.anno-subtitle {
|
||
font-size: 16px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.anno-content {
|
||
line-height: 2;
|
||
}
|
||
</style>
|