From fee1872b46007d7d57bdf96148a2f35156451446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Fri, 7 Mar 2025 15:52:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=E5=A4=84=E7=90=86=E4=B8=8B?=
 =?UTF-8?q?=E7=BA=BFvillaCard=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewPost/tp-parser.vue    |  14 +-
 src/components/viewPost/tp-villaCard.vue | 211 +++++++++++++++++++++++
 2 files changed, 219 insertions(+), 6 deletions(-)
 create mode 100644 src/components/viewPost/tp-villaCard.vue

diff --git a/src/components/viewPost/tp-parser.vue b/src/components/viewPost/tp-parser.vue
index 386176b7..8aa31602 100644
--- a/src/components/viewPost/tp-parser.vue
+++ b/src/components/viewPost/tp-parser.vue
@@ -20,6 +20,7 @@ import TpTexts from "./tp-texts.vue";
 import TpUid from "./tp-uid.vue";
 import TpUnknown from "./tp-unknown.vue";
 import TpVideo from "./tp-video.vue";
+import TpVillaCard from "./tp-villaCard.vue";
 import TpVod from "./tp-vod.vue";
 import TpVote from "./tp-vote.vue";
 
@@ -92,15 +93,16 @@ function getParsedText(data: TpTextType): Array<TpTextType> {
 function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base): Component {
   if (tp.children) return TpTexts;
   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 ("game_user_info" in tp.insert) return TpUid;
-  if ("custom_emoticon" in tp.insert) return TpEmoticon;
   if ("backup_text" in tp.insert) return TpBackupText;
-  if ("link_card" in tp.insert) return TpLinkCard;
+  if ("custom_emoticon" in tp.insert) return TpEmoticon;
   if ("divider" in tp.insert) return TpDivider;
+  if ("game_user_info" in tp.insert) return TpUid;
+  if ("image" in tp.insert) return TpImage;
+  if ("link_card" in tp.insert) return TpLinkCard;
   if ("mention" in tp.insert) return TpMention;
+  if ("video" in tp.insert) return TpVideo;
+  if ("villa_card" in tp.insert) return TpVillaCard;
+  if ("vod" in tp.insert) return TpVod;
   if ("vote" in tp.insert) return TpVote;
   return TpUnknown;
 }
diff --git a/src/components/viewPost/tp-villaCard.vue b/src/components/viewPost/tp-villaCard.vue
new file mode 100644
index 00000000..46894865
--- /dev/null
+++ b/src/components/viewPost/tp-villaCard.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="tp-vc-box">
+    <div class="tp-vc-lock">
+      <img src="/source/UI/empty.webp" alt="empty" />
+      <span>该功能已下线</span>
+    </div>
+    <div class="tp-vc-cover">
+      <TMiImg :src="props.data.insert.villa_card.villa_cover" :ori="true" alt="bg" />
+    </div>
+    <div class="tp-vc-info">
+      <div class="tp-vci-top">
+        <div class="tp-vc-name">{{ props.data.insert.villa_card.villa_name }}</div>
+        <span>|</span>
+        <div class="tp-vc-owner">
+          <TMiImg alt="topIcon" :src="props.data.insert.villa_card.owner_avatar_url" :ori="true" />
+          <span>{{ props.data.insert.villa_card.owner_nickname }}</span>
+        </div>
+      </div>
+      <div class="tp-vc-tags">
+        <div class="tp-vc-tag">
+          <v-icon>mdi-account-group</v-icon>
+          <span>{{ props.data.insert.villa_card.villa_member_num }}</span>
+        </div>
+        <div
+          v-for="(tag, index) in props.data.insert.villa_card?.tag_list"
+          :key="index"
+          class="tp-vc-tag"
+        >
+          <v-icon>mdi-tag</v-icon>
+          <span>{{ tag }}</span>
+        </div>
+      </div>
+      <span class="tp-vc-desc">{{ props.data.insert.villa_card.villa_introduce }}</span>
+    </div>
+    <div class="tp-vc-icon">
+      <TMiImg alt="icon" :src="props.data.insert.villa_card.villa_avatar_url" :ori="true" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
+
+type VillaRoom = {
+  room_id: string;
+  room_name: string;
+  sender_avatar_list: Array<string>;
+  sender_num: string;
+};
+type TpVillaCard = {
+  insert: {
+    villa_card: {
+      villa_id: string;
+      villa_name: string;
+      villa_avatar_url: string;
+      villa_cover: string;
+      owner_uid: string;
+      owner_nickname: string;
+      owner_avatar_url: string;
+      villa_introduce?: string;
+      tag_list?: string[];
+      villa_member_num: string;
+      is_official?: boolean;
+      is_available: boolean;
+      hot_member_avatar?: string[];
+      hot_room?: VillaRoom;
+    };
+  };
+};
+type TpVillaCardProps = { data: TpVillaCard };
+
+const props = defineProps<TpVillaCardProps>();
+console.warn("tpVillaCard[Deprecated]", props.data.insert);
+</script>
+<style lang="css" scoped>
+.tp-vc-box {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: 120px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 10px;
+  margin: 10px auto;
+}
+
+.tp-vc-lock {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(1px);
+  background: var(--common-shadow-t-2);
+  color: var(--tgc-od-red);
+  font-family: var(--font-title);
+
+  img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.tp-vc-cover {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  opacity: 0.3;
+
+  img {
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.tp-vc-info {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 8px;
+  background: var(--box-bg-1);
+  opacity: 0.3;
+  row-gap: 4px;
+}
+
+.tp-vci-top {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 28px;
+}
+
+.tp-vc-name {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.tp-vc-owner {
+  display: flex;
+  color: var(--common-text-title);
+  column-gap: 4px;
+}
+
+.tp-vc-owner img {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+}
+
+.tp-vc-owner span {
+  color: var(--common-text-title);
+  font-family: var(--box-text-1);
+  font-size: 20px;
+}
+
+.tp-vc-tags {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tp-vc-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  border-radius: 5px;
+  background: var(--box-bg-2);
+  color: var(--tgc-pink-1);
+  column-gap: 2px;
+  font-family: var(--font-title);
+  font-size: 12px;
+}
+
+.tp-vc-desc {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  border-radius: 5px;
+  margin-top: auto;
+  background: var(--box-bg-2);
+  color: var(--box-text-1);
+}
+
+.tp-vc-icon {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  opacity: 0.3;
+
+  img {
+    height: 100%;
+    object-fit: contain;
+  }
+}
+</style>