🌱 公告解析重构

src/App.vue

@@ -308,7 +308,7 @@ onUnmounted(() => {
   if (urlListener) urlListener();
 });
 </script>
-<style lang="css">
+<style lang="css" scoped>
 .app-container {
   height: 100%;
   background: var(--app-page-bg);

src/components/anno/ta-parser.vue

@@ -1 +1,30 @@
-<!-- todo 公告解析 -->
+<template>
+  <component
+    v-for="(ta, index) in parseAnnoContent(props.data)"
+    :key="index"
+    :is="getTaName(ta)"
+    :data="ta"
+  />
+</template>
+<script lang="ts" setup>
+import { parseAnnoContent } from "../../web/utils/annoParser.js";
+import TpBackupText from "../post/tp-backupText.vue";
+import TpImage from "../post/tp-image.vue";
+import TpText from "../post/tp-text.vue";
+import TpTexts from "../post/tp-texts.vue";
+import TpUnknown from "../post/tp-unknown.vue";
+
+interface TaParserProps {
+  data: TGApp.BBS.Announcement.ContentItem;
+}
+
+const props = defineProps<TaParserProps>();
+
+function getTaName(ta: TGApp.Plugins.Mys.SctPost.Base) {
+  if (ta.children) return TpTexts;
+  if (typeof ta.insert === "string") return TpText;
+  if ("image" in ta.insert) return TpImage;
+  if ("backup_text" in ta.insert) return TpBackupText;
+  return TpUnknown;
+}
+</script>

src/components/post/tp-image.vue

@@ -28,6 +28,7 @@ export interface TpImage {
     align?: "center"; // 待补充
   };
 }
+
 interface TpImageProps {
   data: TpImage;
 }
@@ -66,6 +67,7 @@ function getImageTitle(): string {
 function getImageUrl(): string {
   const img = props.data.insert.image;
   const append = "?x-oss-process=image/format,png";
+  console.log("getImageUrl", img, append);
   if (img.endsWith(".gif")) return img;
   return img + append;
 }

src/components/post/tp-parser.vue

@@ -89,25 +89,15 @@ function getParsedText(data: TpTextType): TpTextType[] {
 
 function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base) {
   if (tp.children) return TpTexts;
-  if (typeof tp.insert === "string") {
-    return TpText;
-  } else if ("image" in tp.insert) {
-    return TpImage;
-  } else if ("vod" in tp.insert) {
-    return TpVod;
-  } else if ("video" in tp.insert) {
-    return TpVideo;
-  } else if ("backup_text" in tp.insert) {
-    return TpBackupText;
-  } else if ("link_card" in tp.insert) {
-    return TpLinkCard;
-  } else if ("divider" in tp.insert) {
-    return TpDivider;
-  } else if ("mention" in tp.insert) {
-    return TpMention;
-  } else if ("vote" in tp.insert) {
-    return TpVote;
-  }
+  if (typeof tp.insert === "string") return TpText;
+  if ("image" in tp.insert) return TpImage;
+  if ("vod" in tp.insert) return TpVod;
+  if ("video" in tp.insert) return TpVideo;
+  if ("backup_text" in tp.insert) return TpBackupText;
+  if ("link_card" in tp.insert) return TpLinkCard;
+  if ("divider" in tp.insert) return TpDivider;
+  if ("mention" in tp.insert) return TpMention;
+  if ("vote" in tp.insert) return TpVote;
   return TpUnknown;
 }
 </script>

src/views/t-anno-json.vue

@@ -9,7 +9,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { webviewWindow } from "@tauri-apps/api";
 import { ref, onMounted, reactive } from "vue";
 import JsonViewer from "vue-json-viewer";
 import { useRoute } from "vue-router";

src/views/t-anno.vue

@@ -9,33 +9,34 @@
     :title="annoTitle"
   />
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" :empty="loadingEmpty" />
-  <div class="anno-body">
+  <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>
-    <img v-if="annoData.banner !== ''" :src="annoBanner" alt="cover" class="anno-img" />
-    <div class="anno-content" v-html="annoHtml" />
+    <!--    <div class="anno-content" v-html="annoHtml" />-->
+    <div class="anno-content">
+      <TaParser :data="annoData" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { app, webviewWindow } from "@tauri-apps/api";
 import { ref, onMounted, watch, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
 
+import TaParser from "../components/anno/ta-parser.vue";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
 import TShareBtn from "../components/main/t-shareBtn.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
 import { useAppStore } from "../store/modules/app.js";
 import TGLogger from "../utils/TGLogger.js";
-import { saveImgLocal } from "../utils/TGShare.js";
 import { createTGWindow } from "../utils/TGWindow.js";
 import { AnnoLang, AnnoServer } from "../web/request/getAnno.js";
 import TGRequest from "../web/request/TGRequest.js";
-import TGUtils from "../web/utils/TGUtils.js";
 
 // loading
 const loading = ref<boolean>(true);
@@ -54,9 +55,7 @@ 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>(<TGApp.BBS.Announcement.ContentItem>{});
-const annoHtml = ref<string>();
-const annoBanner = ref<string>();
+const annoData = ref<TGApp.BBS.Announcement.ContentItem | undefined>();
 
 onMounted(async () => {
   appVersion.value = await app.getVersion();
@@ -72,8 +71,6 @@ onMounted(async () => {
   try {
     annoData.value = await TGRequest.Anno.getContent(annoId, region, lang);
     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 webviewWindow
       .getCurrentWebviewWindow()