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

🧑‍💻 更换json渲染组件，渲染公告解析json

Browse Source
This commit is contained in:
目棃
2025-02-27 14:06:08 +08:00
parent 3ba72969d9
commit 6676357296
9 changed files with 166 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/userGacha/gro-echarts.vue
View File

@@ -26,7 +26,6 @@
<script lang="ts" setup>
// about import err,see:https://github.com/apache/echarts/issues/19992
import showLoading from "@comp/func/loading.js";
// @ts-expect-error no-exported-member
import { BarChart, HeatmapChart, PieChart } from "echarts/charts.js";
import {
CalendarComponent,
@@ -38,11 +37,8 @@ import {
TooltipComponent,
VisualMapComponent,
} from "echarts/components.js";
// @ts-expect-error no-exported-member
import { use } from "echarts/core.js";
// @ts-expect-error no-exported-member
import { LabelLayout } from "echarts/features.js";
// @ts-expect-error no-exported-member
import { CanvasRenderer } from "echarts/renderers.js";
import type { EChartsOption } from "echarts/types/dist/shared.js";
import { storeToRefs } from "pinia";

4
src/components/viewPost/tp-parser.vue
View File

@@ -45,7 +45,9 @@ function getParsedData(data: SctPostDataArr): SctPostDataArr {
res.push(cur);
continue;
}
if (typeof tp.insert === "string") {
tp.insert = tp.insert.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
}
if (tp.insert === "\n") {
child.push(tp);
cur = { insert: "", attributes: tp.attributes, children: child };
@@ -53,7 +55,7 @@ function getParsedData(data: SctPostDataArr): SctPostDataArr {
child = [];
continue;
}
const parsedText = getParsedText(tp);
const parsedText = getParsedText(<TpTextType>tp);
let check = 0;
for (let i = 0; i < parsedText.length; i++) {
const text = parsedText[i];

2
src/components/viewPost/tp-texts.vue
View File

@@ -11,7 +11,6 @@
'tp-texts-header6': props.data.attributes && props.data.attributes.header === 6,
}"
:title="getTitle()"
:style="{ textAlign: props.data.attributes?.align }"
>
<component
:is="getComp(text)"
@@ -53,6 +52,7 @@ function getTitle(): string {
line-break: anywhere;
white-space: pre-wrap;
word-break: break-all;
text-align: v-bind("props.data.attributes?.align");
&.tp-inline {
display: inline;

1
src/utils/gachaCharts.ts
View File

@@ -5,7 +5,6 @@
*/
import TSUserGacha from "@Sqlite/modules/userGacha.js";
// @ts-expect-error no-export-member
import type { BarSeriesOption } from "echarts/charts.js";
import type { EChartsOption, XAXisOption } from "echarts/types/dist/shared.js";

112
src/views/t-anno-json.vue
View File

@@ -1,28 +1,96 @@
<template>
<TSwitchTheme />
<div class="anno-json">
<div class="anno-title">活动列表 JSON</div>
<JsonViewer :value="jsonList" copyable boxed />
<div class="anno-title">活动内容 JSON</div>
<JsonViewer :value="jsonContent" copyable boxed />
<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 { onMounted, shallowRef } from "vue";
import JsonViewer from "vue-json-viewer";
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("正在获取公告数据");
@@ -41,32 +109,30 @@ onMounted(async () => {
}
}
jsonContent.value = await Hk4eApi.anno.content(annoId, region, lang);
parsedJson.value = parseAnnoContent(jsonContent.value);
await showLoading.end();
});
</script>
<style lang="css" scoped>
.anno-json {
padding: 20px;
border-radius: 20px;
<style lang="scss" scoped>
.taj-page {
width: 800px;
margin: 0 auto;
font-family: var(--font-text);
}
.anno-title {
width: 100%;
margin: 10px 0;
color: #546d8b;
.taj-title {
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
font-weight: 600;
text-align: right;
}
.jv-container {
background: var(--box-bg-2) !important;
}
.jv-key,
.jv-array {
color: var(--box-text-4) !important;
.taj-box {
border-radius: 4px;
position: relative;
width: 100%;
padding: 12px;
box-sizing: border-box;
max-width: 100%;
}
</style>

8
src/views/t-anno.vue
View File

@@ -3,7 +3,9 @@
<TPinWin />
<TShareBtn selector=".anno-body" :title="`Anno_${route.params.anno_id}`" />
<div class="anno-body" v-if="annoData">
<div class="anno-info">AnnoID: {{ annoId }} | Render by TeyvatGuide v{{ appVersion }}</div>
<div class="anno-info" @click="createAnnoJson">
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">
@@ -57,7 +59,7 @@ onMounted(async () => {
return;
}
const isDev = useAppStore().devMode ?? false;
if (isDev) await createAnnoJson(annoId, region, lang);
if (isDev) await createAnnoJson();
await showLoading.end();
});
@@ -67,7 +69,7 @@ function parseText(title: string): string {
return div.innerText;
}
async function createAnnoJson(annoId: number, region: AnnoServer, lang: AnnoLang): Promise<void> {
async function createAnnoJson(): 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);

88
src/views/t-post-json.vue
View File

@@ -1,10 +1,50 @@
<template>
<TSwitchTheme />
<div class="post-json">
<div class="post-title">帖子返回内容 JSON</div>
<JsonViewer :value="jsonData" copyable boxed />
<div class="post-title" v-show="!isEmpty">结构化内容解析</div>
<JsonViewer v-if="!isEmpty" :value="parseData" copyable boxed />
<div class="tpj-page">
<v-expansion-panels>
<v-expansion-panel>
<template #title>
<div class="tpj-title">帖子返回内容 JSON</div>
</template>
<template #text>
<div class="tpj-box">
<vue-json-pretty
:data="JSON.parse(JSON.stringify(jsonData))"
: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="tpj-title">帖子解析内容 JSON</div>
</template>
<template #text>
<div class="tpj-box">
<vue-json-pretty
:data="parseData"
: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>
@@ -13,18 +53,22 @@ import showLoading from "@comp/func/loading.js";
import showSnackbar from "@comp/func/snackbar.js";
import Mys from "@Mys/index.js";
import { storeToRefs } from "pinia";
import { onMounted, ref, shallowRef } from "vue";
import JsonViewer from "vue-json-viewer";
import { computed, onMounted, ref, 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 { useUserStore } from "@/store/modules/user.js";
import TGLogger from "@/utils/TGLogger.js";
const { theme } = storeToRefs(useAppStore());
const { cookie } = storeToRefs(useUserStore());
const postId = Number(useRoute().params.post_id);
const isEmpty = ref<boolean>(false);
const jsonData = shallowRef<TGApp.Plugins.Mys.Post.FullData>();
const parseData = shallowRef<Array<TGApp.Plugins.Mys.SctPost.Base>>();
const jsonTheme = computed<"dark" | "light">(() => (theme.value === "dark" ? "dark" : "light"));
onMounted(async () => {
await showLoading.start(`正在获取帖子数据`);
@@ -57,29 +101,27 @@ onMounted(async () => {
await showLoading.end();
});
</script>
<style lang="css" scoped>
.post-json {
padding: 20px;
border-radius: 20px;
<style lang="scss" scoped>
.tpj-page {
width: 800px;
margin: 0 auto;
font-family: var(--font-text);
}
.post-title {
width: 100%;
margin: 10px 0;
color: #546d8b;
.tpj-title {
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
font-weight: 600;
text-align: right;
}
.jv-container {
background: var(--box-bg-2) !important;
}
.jv-key,
.jv-array {
color: var(--box-text-4) !important;
.tpj-box {
border-radius: 4px;
position: relative;
width: 100%;
padding: 12px;
box-sizing: border-box;
max-width: 100%;
background: var(--box-bg-1);
}
</style>

15
src/vite-env.d.ts vendored
View File

@@ -13,21 +13,6 @@ declare module "*.vue" {
export default component;
}
/**
* @description vue-json-viewer
* @package vue-json-viewer
* @version 3.0.4
*/
declare module "vue-json-viewer" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{
value: any;
copyable: boolean;
boxed: boolean;
}>;
export default component;
}
declare type ImportMeta = { readonly env: { MODE: string } };
declare interface TauriProcessEnv extends NodeJS.ProcessEnv {

3
tsconfig.json
View File

@@ -13,7 +13,7 @@
"esModuleInterop": true,
"lib": ["DOM", "ESNext"],
"skipLibCheck": true,
"types": ["vite/client", "node", "color-convert", "js-md5", "uuid", "src/vite-env"],
"types": ["vite/client", "node", "color-convert", "js-md5", "uuid"],
"allowSyntheticDefaultImports": true,
"composite": true,
"baseUrl": ".",
@@ -30,6 +30,7 @@
"*.yml",
"*.yaml",
"package.json",
"src/vite-env.d.ts",
"src/**/*.d.ts",
"src/**/*.ts",
"src/**/*.vue",