✨ 添加游戏卡片类型组件

*PostID: 58244137

src/components/viewPost/tp-gameCard.vue

@@ -0,0 +1,122 @@
+<!-- 游戏卡片 -->
+<template>
+  <div class="tp-game-card-box">
+    <div class="icon">
+      <img :src="props.data.insert.reception_card.icon" alt="icon" />
+    </div>
+    <div class="info">
+      <span>{{ props.data.insert.reception_card.prompt }}</span>
+      <span>{{ props.data.insert.reception_card.custom_toast }}</span>
+    </div>
+    <v-btn class="act" @click="toGame()">
+      <span>查看</span>
+    </v-btn>
+  </div>
+</template>
+<script lang="ts" setup>
+import { openPath } from "@tauri-apps/plugin-opener";
+
+type TpGameCard = {
+  insert: {
+    backup_text: "[游戏卡片]";
+    reception_card: {
+      id: string;
+      game_id: number;
+      name: number;
+      icon: string;
+      game_reception_status: number;
+      pre_register_count: { count: string };
+      is_order: boolean;
+      prompt: string;
+      custom_toast: string;
+      pkg: {
+        android_url: string;
+        pkg_name: string;
+        pkg_version: string;
+        ios_url: string;
+        pkg_length: number;
+        pkg_md5: string;
+        pkg_version_code: number;
+        ios_version: string;
+        ios_scheme_url: string;
+      };
+      user_status: {
+        is_device_support: boolean;
+        pre_register_status: number;
+        is_order: boolean;
+        has_qualification: boolean;
+        qualify_type: number;
+      };
+    };
+  };
+};
+type TpGameCardProps = { data: TpGameCard };
+
+const props = defineProps<TpGameCardProps>();
+
+async function toGame(): Promise<void> {
+  await openPath(`https://www.miyoushe.com/ys/gameCenter/${props.data.insert.reception_card.id}`);
+}
+</script>
+<style lang="scss" scoped>
+.tp-game-card-box {
+  position: relative;
+  margin: 12px 0;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 12px;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background: var(--box-bg-1);
+  border: 1px solid var(--common-shadow-1);
+}
+
+.icon {
+  position: relative;
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.info {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  span {
+    &:first-child {
+      font-family: var(--font-title);
+      color: var(--common-text-title);
+      font-size: 20px;
+    }
+
+    &:last-child {
+      font-size: 16px;
+    }
+  }
+}
+
+.act {
+  height: 40px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+  font-family: var(--font-title);
+  margin-left: auto;
+}
+
+.dark .act {
+  border: 1px solid var(--common-shadow-2);
+}
+</style>

src/components/viewPost/tp-parser.vue

@@ -12,6 +12,7 @@ import type { Component } from "vue";
 import TpBackupText from "./tp-backupText.vue";
 import TpDivider from "./tp-divider.vue";
 import TpEmoticon from "./tp-emoticon.vue";
+import TpGameCard from "./tp-gameCard.vue";
 import TpImage from "./tp-image.vue";
 import TpLinkCard from "./tp-linkCard.vue";
 import TpMention from "./tp-mention.vue";
@@ -97,7 +98,10 @@ function getTpName(tp: TGApp.BBS.SctPost.Base): Component {
   if ("custom_emoticon" in tp.insert) return TpEmoticon;
   // game_user_info属于backup_text的一种，必须放在backup_text判断的前面
   if ("game_user_info" in tp.insert) return TpUid;
-  if ("backup_text" in tp.insert) return TpBackupText;
+  if ("backup_text" in tp.insert) {
+    if (tp.insert.backup_text === "[游戏卡片]") return TpGameCard;
+    return TpBackupText;
+  }
   if ("divider" in tp.insert) return TpDivider;
   if ("image" in tp.insert) return TpImage;
   if ("link_card" in tp.insert) return TpLinkCard;