♻️ 帖子文本解析部分重构

src/components/overlay/to-achiInfo.vue

@@ -103,7 +103,6 @@ function onCancel() {
   visible.value = false;
 }
 
-// todo 存在 bug，点击成就标题时可能会没有效果
 async function searchDirect(word: string): Promise<void> {
   await TGLogger.Info(`[ToAchiInfo][${props.data?.id}][Search] 查询 ${word}`);
   search.value = word;

src/components/post/tp-backupText.vue

@@ -47,7 +47,6 @@ interface TpBackupText {
 
 interface TpBackupTextProps {
   data: TpBackupText;
-  next: unknown;
 }
 
 const props = defineProps<TpBackupTextProps>();

src/components/post/tp-divider.vue

@@ -21,7 +21,6 @@ interface TpDivider {
 
 interface TpDividerProps {
   data: TpDivider;
-  next: unknown;
 }
 
 const props = defineProps<TpDividerProps>();

src/components/post/tp-image.vue

@@ -29,7 +29,6 @@ export interface TpImage {
 }
 interface TpImageProps {
   data: TpImage;
-  next: unknown;
 }
 
 const props = defineProps<TpImageProps>();

src/components/post/tp-linkCard.vue

@@ -39,7 +39,6 @@ interface TpLinkCard {
 
 interface TpLinkCardProps {
   data: TpLinkCard;
-  next: unknown;
 }
 
 const props = defineProps<TpLinkCardProps>();

src/components/post/tp-mention.vue

@@ -22,7 +22,6 @@ interface TpMention {
 
 interface TpMentionProps {
   data: TpMention;
-  next: unknown;
 }
 
 const props = defineProps<TpMentionProps>();

src/components/post/tp-parser.vue

@@ -1,10 +1,9 @@
 <template>
   <component
-    v-for="(tp, index) in props.data"
+    v-for="(tp, index) in getParsedData(props.data)"
     :key="index"
     :is="getTpName(tp)"
     :data="tp"
-    :next="getTpNext(index)"
   />
 </template>
 <script lang="ts" setup>
@@ -13,7 +12,8 @@ import TpDivider from "./tp-divider.vue";
 import TpImage from "./tp-image.vue";
 import TpLinkCard from "./tp-linkCard.vue";
 import TpMention from "./tp-mention.vue";
-import TpText from "./tp-text.vue";
+import TpText, { type TpText as TpTextType } from "./tp-text.vue";
+import TpTexts from "./tp-texts.vue";
 import TpUnknown from "./tp-unknown.vue";
 import TpVideo from "./tp-video.vue";
 import TpVod from "./tp-vod.vue";
@@ -25,7 +25,65 @@ interface TpParserProps {
 
 const props = defineProps<TpParserProps>();
 
+function getParsedData(data: TGApp.Plugins.Mys.SctPost.Base[]): TGApp.Plugins.Mys.SctPost.Base[] {
+  const res: TGApp.Plugins.Mys.SctPost.Base[] = [];
+  let child: TGApp.Plugins.Mys.SctPost.Base[] = [];
+  let cur: TGApp.Plugins.Mys.SctPost.Base | undefined;
+  for (const tp of data) {
+    const tpName = getTpName(tp);
+    if (tpName !== TpText) {
+      cur = tp;
+      child = [];
+      res.push(cur);
+      continue;
+    }
+    if (tp.insert === "\n") {
+      child.push(tp);
+      cur = {
+        insert: "",
+        attributes: tp.attributes,
+        children: child,
+      };
+      res.push(cur);
+      child = [];
+      continue;
+    }
+    const parsedText = getParsedText(tp);
+    for (const text of parsedText) {
+      child.push(text);
+      if (text.insert === "\n") {
+        cur = {
+          insert: "",
+          attributes: text.attributes,
+          children: child,
+        };
+        res.push(cur);
+        child = [];
+      }
+    }
+  }
+  return res;
+}
+
+function getParsedText(data: TpTextType): TpTextType[] {
+  if (data.insert.includes("\n") && data.insert !== "\n") {
+    const splits = data.insert.split("\n");
+    const res = [];
+    for (let i = 0; i < splits.length; i++) {
+      if (splits[i] !== "") {
+        res.push({ insert: splits[i], attributes: data.attributes });
+      }
+      if (i !== splits.length - 1) {
+        res.push({ insert: "\n", attributes: data.attributes });
+      }
+    }
+    return res;
+  }
+  return [data];
+}
+
 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) {
@@ -47,11 +105,4 @@ function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base) {
   }
   return TpUnknown;
 }
-
-function getTpNext(index: number) {
-  if (index + 1 >= props.data.length) {
-    return undefined;
-  }
-  return props.data[index + 1];
-}
 </script>

src/components/post/tp-text.vue

@@ -17,18 +17,10 @@
     v-for="(emoji, indexE) in emojis"
     :data="emoji"
     :key="indexE"
-    :next="indexE === emojis.length - 1 ? undefined : next"
   />
-  <TpText
-    v-else-if="mode == 'texts'"
-    v-for="(text, indexT) in texts"
-    :data="text"
-    :key="indexT"
-    :next="indexT === texts.length - 1 ? next : undefined"
-  />
-  <div v-else :style="getTextStyle()" class="tp-text-span">
+  <span v-else :style="getTextStyle()">
     {{ props.data.insert }}
-  </div>
+  </span>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, StyleValue, toRaw } from "vue";
@@ -39,7 +31,7 @@ import { parseLink, parsePost } from "../../utils/linkParser";
 import { isColorSimilar } from "../../utils/toolFunc";
 import showSnackbar from "../func/snackbar";
 
-interface TpText {
+export interface TpText {
   insert: string;
   attributes?: {
     header?: number;
@@ -52,14 +44,12 @@ interface TpText {
 
 interface TpTextProps {
   data: TpText;
-  next: TGApp.Plugins.Mys.SctPost.Base | undefined;
 }
 
 const props = defineProps<TpTextProps>();
 const mode = ref<string>("text");
 const localEmojis = ref(localStorage.getItem("emojis"));
 const emojis = ref<TpText[]>([]);
-const texts = ref<TpText[]>([]);
 const router = useRouter();
 
 console.log("tpText", JSON.stringify(props.data.insert), toRaw(props.data)?.attributes);
@@ -81,45 +71,16 @@ onMounted(async () => {
     emojis.value = res.map((i) => ({ insert: i, attributes: props.data.attributes }));
     return;
   }
-  if (props.data.insert.includes("\n") && props.data.insert !== "\n") {
-    mode.value = "texts";
-    const splits = props.data.insert.split("\n");
-    const temp = [];
-    for (let i = 0; i < splits.length; i++) {
-      if (splits[i] !== "") {
-        temp.push({ insert: splits[i], attributes: props.data.attributes });
-      }
-      if (i !== splits.length - 1) {
-        temp.push({ insert: "\n", attributes: props.data.attributes });
-      }
-    }
-    texts.value = temp;
-    return;
-  }
   mode.value = "text";
 });
 
 // 解析文本样式
 function getTextStyle(): StyleValue {
   const style = <Array<StyleValue>>[];
-  let data: TpText;
-  if (props.data.insert === "\n") {
-    return "display: inline";
-  }
-  if (typeof props.next?.insert === "string" && props.next.insert.includes("\n")) {
-    data = {
-      insert: props.data.insert,
-      attributes: {
-        ...props.data.attributes,
-        ...props.next.attributes,
-      },
-    };
-  } else {
-    data = props.data;
-  }
+  const data: TpText = props.data;
+  style.push("white-space: pre-wrap");
   if (data.attributes) {
     const ruleBold: StyleValue = "fontFamily: var(--font-title)";
-    const headerFontSizes = ["2rem", "1.75rem", "1.5rem", "1.25rem", "1rem", "0.75rem"];
     if (data.attributes.bold) {
       style.push(ruleBold);
     }
@@ -131,21 +92,6 @@ function getTextStyle(): StyleValue {
       const ruleColor: StyleValue = `color: ${colorGet}`;
       style.push(ruleColor);
     }
-    if (data.attributes.align) {
-      const ruleAlign: StyleValue = `textAlign: ${data.attributes.align}`;
-      if (data.attributes.align !== "center") style.push("display: inline");
-      else style.push(ruleAlign);
-    }
-    if (data.attributes.header) {
-      const ruleHeader: StyleValue = `fontSize: ${headerFontSizes[data.attributes.header - 1]}`;
-      style.push(ruleHeader);
-      style.push(ruleBold);
-    }
-    if (!data.attributes.align && !data.attributes.header) {
-      style.push("display: inline");
-    }
-  } else {
-    style.push("display: inline");
   }
   return style;
 }
@@ -211,7 +157,7 @@ function getEmojiName() {
 </script>
 <style lang="css" scoped>
 .tp-text-link {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #00c3ff;
@@ -231,10 +177,4 @@ function getEmojiName() {
   height: 45px;
   margin: 0 5px;
 }
-
-.tp-text-span {
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
 </style>

src/components/post/tp-texts.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :style="getLineStyle()" class="tp-texts">
+    <TpText v-for="(text, indexT) in props.data.children" :data="text" :key="indexT" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, StyleValue, toRaw } from "vue";
+
+import TpText, { type TpText as TpTextType } from "./tp-text.vue";
+
+interface TpTexts extends TpTextType {
+  children: TpTextType[];
+}
+
+interface TpTextsProps {
+  data: TpTexts;
+}
+
+const props = defineProps<TpTextsProps>();
+
+if (props.data.attributes) {
+  console.warn("TpTexts", props.data.attributes);
+}
+
+function getLineStyle(): StyleValue {
+  const style = <Array<StyleValue>>[];
+  if (props.data.attributes === undefined) {
+    return style;
+  }
+  const ruleBold: StyleValue = "fontFamily: var(--font-title)";
+  const headerFontSizes = ["2rem", "1.75rem", "1.5rem", "1.25rem", "1rem", "0.75rem"];
+  if (props.data.attributes.align) {
+    const ruleAlign: StyleValue = `textAlign: ${props.data.attributes.align}`;
+    if (props.data.attributes.align !== "center") style.push("display: inline");
+    else style.push(ruleAlign);
+  }
+  if (props.data.attributes.header) {
+    const ruleHeader: StyleValue = `fontSize: ${headerFontSizes[props.data.attributes.header - 1]}`;
+    style.push(ruleHeader);
+    style.push(ruleBold);
+  }
+  return style;
+}
+</script>
+<style lang="css" scoped>
+.tp-texts {
+  white-space: pre-wrap;
+}
+</style>

src/components/post/tp-unknown.vue

@@ -10,7 +10,6 @@ import TGLogger from "../../utils/TGLogger";
 
 interface TpUnknownProps {
   data: TGApp.Plugins.Mys.SctPost.Empty;
-  next?: unknown;
 }
 
 const props = defineProps<TpUnknownProps>();

src/components/post/tp-video.vue

@@ -38,7 +38,6 @@ interface TpVideo {
 
 interface TpVideoProps {
   data: TpVideo;
-  next: unknown;
 }
 
 const props = defineProps<TpVideoProps>();

src/components/post/tp-vod.vue

@@ -43,7 +43,6 @@ interface TpVod {
 
 interface TpVodProps {
   data: TpVod;
-  next: unknown;
 }
 
 const props = defineProps<TpVodProps>();

src/components/post/tp-vote.vue

@@ -36,7 +36,6 @@ interface TpVote {
 
 interface TpVoteProps {
   data: TpVote;
-  next: unknown;
 }
 
 interface TpVoteInfo {

src/plugins/Mys/types/SctPost.d.ts

@@ -1,27 +1,29 @@
 /**
  * @file plugins/Mys/types/SctPost.d.ts
  * @description Mys 插件 结构化帖子类型声明文件
- * @since Beta v0.3.7
+ * @since Beta v0.4.5
  */
 
 /**
  * @description 结构化帖子类型命名空间
- * @since Beta v0.3.7
+ * @since Beta v0.4.5
  * @namespace TGApp.Plugins.Mys.SctPost
  * @memberof TGApp.Plugins.Mys
  */
 declare namespace TGApp.Plugins.Mys.SctPost {
   /**
    * @description 帖子结构化数据-基础类型
-   * @since Beta v0.3.4
+   * @since Beta v0.4.5
    * @interface Base
    * @property {unknown} insert - 帖子内容
    * @property {unknown} attributes - 帖子属性
+   * @property {Base[]} children - 子帖子
    * @return Base
    */
   interface Base {
     insert: any;
     attributes?: any;
+    children?: Base[];
   }
 
   /**