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

src/components/userGacha/gro-echarts.vue

@@ -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";

src/components/viewPost/tp-parser.vue

@@ -45,7 +45,9 @@ function getParsedData(data: SctPostDataArr): SctPostDataArr {
       res.push(cur);
       continue;
     }
-    tp.insert = tp.insert.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    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];

src/components/viewPost/tp-texts.vue

@@ -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;

src/utils/gachaCharts.ts

@@ -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";
 

src/views/t-anno-json.vue

@@ -1,28 +1,96 @@
 <template>
   <TSwitchTheme />
-  <div class="anno-json">
+  <div class="taj-page">
-    <div class="anno-title">活动列表 JSON</div>
+    <v-expansion-panels>
-    <JsonViewer :value="jsonList" copyable boxed />
+      <v-expansion-panel>
-    <div class="anno-title">活动内容 JSON</div>
+        <template #title>
-    <JsonViewer :value="jsonContent" copyable boxed />
+          <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 { storeToRefs } from "pinia";
-import JsonViewer from "vue-json-viewer";
+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>
+<style lang="scss" scoped>
-.anno-json {
+.taj-page {
-  padding: 20px;
+  width: 800px;
-  border-radius: 20px;
+  margin: 0 auto;
   font-family: var(--font-text);
 }
 
-.anno-title {
+.taj-title {
-  width: 100%;
+  color: var(--common-text-title);
-  margin: 10px 0;
-  color: #546d8b;
   font-family: var(--font-title);
   font-size: 20px;
   font-weight: 600;
-  text-align: right;
 }
 
-.jv-container {
+.taj-box {
-  background: var(--box-bg-2) !important;
+  border-radius: 4px;
-}
+  position: relative;
-
+  width: 100%;
-.jv-key,
+  padding: 12px;
-.jv-array {
+  box-sizing: border-box;
-  color: var(--box-text-4) !important;
+  max-width: 100%;
 }
 </style>

src/views/t-anno.vue

@@ -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);

src/views/t-post-json.vue

@@ -1,10 +1,50 @@
 <template>
   <TSwitchTheme />
-  <div class="post-json">
+  <div class="tpj-page">
-    <div class="post-title">帖子返回内容 JSON</div>
+    <v-expansion-panels>
-    <JsonViewer :value="jsonData" copyable boxed />
+      <v-expansion-panel>
-    <div class="post-title" v-show="!isEmpty">结构化内容解析</div>
+        <template #title>
-    <JsonViewer v-if="!isEmpty" :value="parseData" copyable boxed />
+          <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 { computed, onMounted, ref, shallowRef } from "vue";
-import JsonViewer from "vue-json-viewer";
+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>
+<style lang="scss" scoped>
-.post-json {
+.tpj-page {
-  padding: 20px;
+  width: 800px;
-  border-radius: 20px;
+  margin: 0 auto;
   font-family: var(--font-text);
 }
 
-.post-title {
+.tpj-title {
-  width: 100%;
+  color: var(--common-text-title);
-  margin: 10px 0;
-  color: #546d8b;
   font-family: var(--font-title);
   font-size: 20px;
   font-weight: 600;
-  text-align: right;
 }
 
-.jv-container {
+.tpj-box {
-  background: var(--box-bg-2) !important;
+  border-radius: 4px;
-}
+  position: relative;
-
+  width: 100%;
-.jv-key,
+  padding: 12px;
-.jv-array {
+  box-sizing: border-box;
-  color: var(--box-text-4) !important;
+  max-width: 100%;
+  background: var(--box-bg-1);
 }
 </style>

src/vite-env.d.ts

@@ -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 {

tsconfig.json

@@ -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",