🐛 修复 mention 类型渲染异常

BTMuli · Apr 26, 2024 · abb0a6e · abb0a6e
1 parent c89dfae
commit abb0a6e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/src/components/post/tp-mention.vue b/src/components/post/tp-mention.vue
@@ -11,7 +11,7 @@ import TGClient from "../../utils/TGClient";
 import showConfirm from "../func/confirm";
 import showSnackbar from "../func/snackbar";
 
-interface TpMention {
+export interface TpMention {
   insert: {
     mention: {
       uid: string;

diff --git a/src/components/post/tp-parser.vue b/src/components/post/tp-parser.vue
@@ -31,6 +31,11 @@ function getParsedData(data: TGApp.Plugins.Mys.SctPost.Base[]): TGApp.Plugins.My
   let cur: TGApp.Plugins.Mys.SctPost.Base | undefined;
   for (const tp of data) {
     const tpName = getTpName(tp);
+    // 单独处理 TpMention
+    if (tpName === TpMention) {
+      child.push(tp);
+      continue;
+    }
     if (tpName !== TpText) {
       cur = tp;
       child = [];

diff --git a/src/components/post/tp-texts.vue b/src/components/post/tp-texts.vue
@@ -1,15 +1,21 @@
 <template>
   <div :style="getLineStyle()" class="tp-texts">
-    <TpText v-for="(text, index) in props.data.children" :data="text" :key="index" />
+    <component
+      :is="getComp(text)"
+      v-for="(text, index) in props.data.children"
+      :data="text"
+      :key="index"
+    />
   </div>
 </template>
 <script lang="ts" setup>
 import { StyleValue } from "vue";
 
+import TpMention, { type TpMention as TpMentionType } from "./tp-mention.vue";
 import TpText, { type TpText as TpTextType } from "./tp-text.vue";
 
 interface TpTexts extends TpTextType {
-  children: TpTextType[];
+  children: (TpTextType | TpMentionType)[];
 }
 
 interface TpTextsProps {
@@ -18,6 +24,13 @@ interface TpTextsProps {
 
 const props = defineProps<TpTextsProps>();
 
+function getComp(text: TpTextType | TpMentionType): string {
+  if (typeof text.insert === "string") {
+    return TpText;
+  }
+  return TpMention;
+}
+
 function getLineStyle(): StyleValue {
   const style = <Array<StyleValue>>[];
   if (props.data.attributes === undefined) {