mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
139 lines
4.1 KiB
Vue
139 lines
4.1 KiB
Vue
<template>
|
|
<TSwitchTheme />
|
|
<div class="taj-page">
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<template #title>
|
|
<div class="taj-title">活动列表 JSON</div>
|
|
</template>
|
|
<template #text>
|
|
<div class="taj-box">
|
|
<vue-json-pretty
|
|
:data="JSON.parse(JSON.stringify(jsonList))"
|
|
:show-icon="true"
|
|
:show-length="true"
|
|
:show-line="true"
|
|
:show-line-number="true"
|
|
:show-double-quotes="true"
|
|
:show-key-value-space="true"
|
|
:collapsed-on-click-brackets="true"
|
|
:deep="2"
|
|
:theme="jsonTheme"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</v-expansion-panel>
|
|
<v-expansion-panel>
|
|
<template #title>
|
|
<div class="taj-title">活动内容 JSON</div>
|
|
</template>
|
|
<template #text>
|
|
<div class="taj-box">
|
|
<vue-json-pretty
|
|
:data="JSON.parse(JSON.stringify(jsonContent))"
|
|
:show-icon="true"
|
|
:show-length="true"
|
|
:show-line="true"
|
|
:show-line-number="true"
|
|
:show-double-quotes="true"
|
|
:show-key-value-space="true"
|
|
:collapsed-on-click-brackets="true"
|
|
:deep="2"
|
|
:theme="jsonTheme"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</v-expansion-panel>
|
|
<v-expansion-panel>
|
|
<template #title>
|
|
<div class="taj-title">解析 JSON</div>
|
|
</template>
|
|
<template #text>
|
|
<div class="taj-box">
|
|
<vue-json-pretty
|
|
:data="JSON.parse(JSON.stringify(parsedJson))"
|
|
:show-icon="true"
|
|
:show-length="true"
|
|
:show-line="true"
|
|
:show-line-number="true"
|
|
:show-double-quotes="true"
|
|
:show-key-value-space="true"
|
|
:collapsed-on-click-brackets="true"
|
|
:deep="2"
|
|
:theme="jsonTheme"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import TSwitchTheme from "@comp/app/t-switchTheme.vue";
|
|
import showLoading from "@comp/func/loading.js";
|
|
import { storeToRefs } from "pinia";
|
|
import { computed, onMounted, shallowRef } from "vue";
|
|
import VueJsonPretty from "vue-json-pretty";
|
|
import "vue-json-pretty/lib/styles.css";
|
|
import { useRoute } from "vue-router";
|
|
|
|
import { useAppStore } from "@/store/modules/app.js";
|
|
import Hk4eApi, { type AnnoLang, AnnoServer } from "@/web/request/hk4eReq.js";
|
|
import parseAnnoContent from "@/web/utils/annoParser.js";
|
|
|
|
// 数据
|
|
const route = useRoute();
|
|
const annoId = Number(route.params.anno_id);
|
|
const region = <AnnoServer>route.params.region;
|
|
const lang = <AnnoLang>route.params.lang;
|
|
const { theme } = storeToRefs(useAppStore());
|
|
const jsonList = shallowRef<TGApp.BBS.Announcement.AnnoSingle>();
|
|
const jsonContent = shallowRef<TGApp.BBS.Announcement.ContentItem>();
|
|
const parsedJson = shallowRef<Array<TGApp.Plugins.Mys.SctPost.Base>>();
|
|
const jsonTheme = computed<"dark" | "light">(() => (theme.value === "dark" ? "dark" : "light"));
|
|
|
|
onMounted(async () => {
|
|
await showLoading.start("正在获取公告数据");
|
|
if (!annoId) {
|
|
await showLoading.empty("未找到数据");
|
|
return;
|
|
}
|
|
await showLoading.update(`公告ID: ${annoId}`);
|
|
const listData = await Hk4eApi.anno.list(region, lang);
|
|
for (const listItem of listData.list) {
|
|
for (const single of listItem.list) {
|
|
if (single.ann_id === annoId) {
|
|
jsonList.value = single;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
jsonContent.value = await Hk4eApi.anno.content(annoId, region, lang);
|
|
parsedJson.value = parseAnnoContent(jsonContent.value);
|
|
await showLoading.end();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.taj-page {
|
|
width: 800px;
|
|
margin: 0 auto;
|
|
font-family: var(--font-text);
|
|
}
|
|
|
|
.taj-title {
|
|
color: var(--common-text-title);
|
|
font-family: var(--font-title);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.taj-box {
|
|
border-radius: 4px;
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|