🌱 完成 mention,backupText,linkCard 类型的解析组件化

src/components/post/tp-backupText.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="props.data.insert.lottery" @click="toLottery()" class="mys-post-link">
+    <v-icon size="small">mdi-gift</v-icon>
+    <span>{{ props.data.insert.lottery.toast }}</span>
+  </div>
+  <div v-else-if="props.data.insert.fold" class="mys-post-div">
+    <details class="mys-post-details">
+      <summary>
+        <TpParser :data="JSON.parse(props.data.insert.fold.title)" />
+      </summary>
+      <TpParser :data="JSON.parse(props.data.insert.fold.content)" />
+    </details>
+  </div>
+  <TpUnknown v-else :data="<TGApp.Plugins.Mys.SctPost.Empty>props.data" />
+</template>
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
+
+import TpParser from "./tp-parser.vue";
+import TpUnknown from "./tp-unknown.vue";
+
+interface TpBackupText {
+  insert: {
+    backup_text: string;
+    fold?: {
+      title: string;
+      content: string;
+    };
+    lottery?: {
+      id: string;
+      toast: string;
+    };
+  };
+}
+
+interface TpBackupTextProps {
+  data: TpBackupText;
+}
+
+const props = defineProps<TpBackupTextProps>();
+const router = useRouter();
+
+async function toLottery() {
+  if (!props.data.insert.lottery) return;
+  await router.push({
+    name: "抽奖详情",
+    params: {
+      lottery_id: props.data.insert.lottery.id,
+    },
+  });
+}
+</script>

src/components/post/tp-linkCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="mys-post-link-card-cover">
+      <img :src="props.data.insert.link_card.cover" alt="cover" />
+    </div>
+    <div class="mys-post-link-card-content">
+      <div class="mys-post-link-card-title">
+        {{ props.data.insert.link_card.title }}
+      </div>
+      <div v-if="props.data.insert.link_card.price" class="mys-post-link-card-price">
+        {{ props.data.insert.link_card.price }}
+      </div>
+      <div @click="toLink()" class="mys-post-link-card-btn">
+        {{ props.data.insert.link_card.button_text ?? "详情" }} >
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
+
+import { isMysPost } from "../../plugins/Mys/utils/parsePost";
+
+interface TpLinkCard {
+  insert: {
+    link_card: {
+      link_type: number;
+      origin_url: string;
+      landing_url: string;
+      cover: string;
+      title: string;
+      card_id: string;
+      card_status: number;
+      market_price: string;
+      price?: string;
+      button_text?: string;
+      landing_url_type: number;
+    };
+  };
+}
+
+interface TpLinkCardProps {
+  data: TpLinkCard;
+}
+
+const props = defineProps<TpLinkCardProps>();
+const router = useRouter();
+
+async function toLink() {
+  const link = props.data.insert.link_card.landing_url;
+  if (isMysPost(link)) {
+    await router.push({
+      name: "帖子详情",
+      params: {
+        post_id: link.split("/").pop(),
+      },
+    });
+  } else {
+    window.open(link);
+  }
+}
+</script>

src/components/post/tp-mention.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="mys-post-link" @click="toLink()">
+    <v-icon size="small">mdi-account-circle-outline</v-icon>
+    <span>{{ props.data.insert.mention.nickname }}</span>
+  </span>
+</template>
+<script lang="ts" setup>
+interface TpMention {
+  insert: {
+    mention: {
+      uid: string;
+      nickname: string;
+    };
+  };
+}
+
+interface TpMentionProps {
+  data: TpMention;
+}
+
+const props = defineProps<TpMentionProps>();
+
+function toLink() {
+  const prefix = "https://www.miyoushe.com/ys/accountCenter/postList?id=";
+  window.open(prefix + props.data.insert.mention.uid);
+}
+</script>