🌱 初步完成大别野卡片的解析、渲染

src/assets/css/post-parser.css

@@ -172,12 +172,131 @@
   text-decoration: none;
 }
 
+/* 表情包 */
 :deep(.mys-post-emoji) {
   width: 45px;
   height: 45px;
   margin: 0 5px;
 }
 
+/* 大别野卡片 */
+:deep(.mys-post-villa-card) {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 800px;
+  height: auto;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 20px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 10px;
+  gap: 10px;
+}
+
+:deep(.mys-post-villa-card-bg-before) {
+  position: absolute;
+  z-index: 2;
+  top: 120px;
+  right: 0;
+  width: 100%;
+  height: calc(100% - 120px);
+  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 80px, #ffffff);
+}
+
+:deep(.mys-post-villa-card-bg) {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-position-y: 10px;
+  object-fit: cover;
+}
+
+:deep(.mys-post-villa-card-top) {
+  z-index: 3;
+  display: flex;
+  width: 100%;
+  height: 100px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+:deep(.mys-post-villa-card-icon) {
+  width: 80px;
+  height: 80px;
+  border-radius: 5px;
+}
+
+:deep(.mys-post-villa-card-content) {
+  display: flex;
+  height: 100px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+:deep(.mys-post-villa-card-title) {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+:deep(.mys-post-villa-card-desc) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+:deep(.mys-post-villa-card-desc-icon) {
+  width: 20px;
+  height: 20px;
+}
+
+:deep(.mys-post-villa-card-desc-text) {
+  color: var(--common-text-content);
+  font-size: 14px;
+}
+
+:deep(.mys-post-villa-card-mid) {
+  z-index: 3;
+  display: flex;
+  width: 100%;
+  height: 80px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+:deep(.mys-post-villa-card-tag) {
+  width: auto;
+  height: 40px;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 5px;
+  background: #f4f4f4;
+  color: #999999;
+  font-family: var(--font-text);
+  font-size: 12px;
+}
+
+:deep(.mys-post-villa-card-bottom) {
+  z-index: 3;
+  width: 100%;
+  height: auto;
+  font-family: var(--font-title);
+  font-size: 16px;
+  text-align: left;
+}
+
 /* 未知类型 */
 :deep(.mys-post-unknown) {
   width: 800px;

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

@@ -1,8 +1,7 @@
 /**
  * @file plugins Mys types post.d.ts
  * @description Mys 插件帖子类型定义文件
- * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.2
+ * @since Beta v0.3.3
  */
 
 /**
@@ -302,7 +301,7 @@ declare namespace TGApp.Plugins.Mys.Post {
 
   /**
    * @description 帖子结构化内容
-   * @since Alpha v0.2.1
+   * @since Beta v0.3.3
    * @todo 重构
    * @interface StructuredContent
    * @property {string|object} insert 插入内容
@@ -321,6 +320,7 @@ declare namespace TGApp.Plugins.Mys.Post {
    * @property {object} insert.mention 提及
    * @property {string} insert.mention.uid 用户 ID
    * @property {string} insert.mention.nickname 用户昵称
+   * @property {StructuredVillaCard} insert.villa_card 大别野卡片
    * @property {object} attributes 属性
    * @property {number} attributes.height 高度
    * @property {number} attributes.width 宽度
@@ -352,6 +352,7 @@ declare namespace TGApp.Plugins.Mys.Post {
             uid: string;
             nickname: string;
           };
+          villa_card?: StructuredVillaCard;
         }
       | string;
     attributes?: {
@@ -435,4 +436,34 @@ declare namespace TGApp.Plugins.Mys.Post {
     button_text: string;
     landing_url_type: number;
   }
+
+  /**
+   * @description 帖子结构化内容-大别野卡片
+   * @since Beta v0.3.3
+   * @interface StructuredVillaCard
+   * @property {string} villa_id 大别野房间 ID
+   * @property {string} villa_name 大别野房间 名称
+   * @property {string} villa_avatar_url 大别野房间 头像图 URL
+   * @property {string} villa_cover 大别野房间 封面图 URL
+   * @property {string} owner_uid 大别野房间 房主 UID
+   * @property {string} owner_nickname 大别野房间 房主昵称
+   * @property {string} owner_avatar_url 大别野房间 房主头像图 URL
+   * @property {string} villa_introduce 大别野房间 介绍
+   * @property {string[]} tag_list 大别野房间 标签列表
+   * @property {string} villa_member_num 大别野房间 成员数
+   * @property {boolean} is_available 大别野房间 是否可用
+   * @return StructuredVillaCard
+   */
+  interface StructuredVillaCard {
+    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;
+  }
 }

src/plugins/Mys/utils/parsePost.ts

@@ -117,7 +117,7 @@ function parsePost(post: TGApp.Plugins.Mys.Post.FullData): string {
 
 /**
  * @description 解析中转
- * @since Alpha v0.1.2
+ * @since Beta v0.3.3
  * @param {TGApp.Plugins.Mys.Post.StructuredContent} data Mys数据
  * @returns {HTMLDivElement | HTMLSpanElement} 解析后的中转
  */
@@ -140,6 +140,8 @@ function transferParser(
     return parseDivider(data);
   } else if (data.insert.mention != null) {
     return parseMention(data);
+  } else if (data.insert.villa_card != null) {
+    return parseVillaCard(data);
   } else {
     return parseUnknown(data);
   }
@@ -573,4 +575,74 @@ function emojiParser(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLImageE
   return img;
 }
 
+/**
+ * @description 解析大别野房间卡片
+ * @since Beta v0.3.3
+ * @param {TGApp.Plugins.Mys.Post.StructuredContent} data Mys数据
+ * @returns {HTMLDivElement} 解析后的大别野房间卡片
+ */
+function parseVillaCard(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivElement {
+  if (typeof data.insert === "string") {
+    throw new Error(`[parseVillaCard] data.insert is a string: ${data.insert}`);
+  }
+  if (data.insert.villa_card == null) {
+    throw new Error("[parseVillaCard] data.insert.villa_card is not defined");
+  }
+  const div = document.createElement("div");
+  div.classList.add("mys-post-div");
+  const villaCard = document.createElement("div");
+  villaCard.classList.add("mys-post-villa-card");
+  const bgBefore = document.createElement("div");
+  bgBefore.classList.add("mys-post-villa-card-bg-before");
+  villaCard.appendChild(bgBefore);
+  const bgImg = document.createElement("img");
+  bgImg.classList.add("mys-post-villa-card-bg");
+  bgImg.src = data.insert.villa_card.villa_cover;
+  villaCard.appendChild(bgImg);
+  const topDiv = document.createElement("div");
+  topDiv.classList.add("mys-post-villa-card-top");
+  const topIcon = document.createElement("img");
+  topIcon.classList.add("mys-post-villa-card-icon");
+  topIcon.src = data.insert.villa_card.villa_avatar_url;
+  const topContent = document.createElement("div");
+  topContent.classList.add("mys-post-villa-card-content");
+  const topTitle = document.createElement("div");
+  topTitle.classList.add("mys-post-villa-card-title");
+  topTitle.innerText = data.insert.villa_card.villa_name;
+  topContent.appendChild(topTitle);
+  const topDesc = document.createElement("div");
+  topDesc.classList.add("mys-post-villa-card-desc");
+  const topDescIcon = document.createElement("img");
+  topDescIcon.src = data.insert.villa_card.owner_avatar_url;
+  topDescIcon.classList.add("mys-post-villa-card-desc-icon");
+  const topDescText = document.createElement("span");
+  topDescText.classList.add("mys-post-villa-card-desc-text");
+  topDescText.innerText = `${data.insert.villa_card.owner_nickname} 创建`;
+  topDesc.appendChild(topDescIcon);
+  topDesc.appendChild(topDescText);
+  topContent.appendChild(topDesc);
+  topDiv.appendChild(topIcon);
+  topDiv.appendChild(topContent);
+  villaCard.appendChild(topDiv);
+  const midDiv = document.createElement("div");
+  midDiv.classList.add("mys-post-villa-card-mid");
+  const numberDiv = document.createElement("div");
+  numberDiv.classList.add("mys-post-villa-card-tag");
+  numberDiv.innerText = `${data.insert.villa_card.villa_member_num}人在聊`;
+  midDiv.appendChild(numberDiv);
+  data.insert.villa_card.tag_list.forEach((tag) => {
+    const tagDiv = document.createElement("div");
+    tagDiv.classList.add("mys-post-villa-card-tag");
+    tagDiv.innerText = tag;
+    midDiv.appendChild(tagDiv);
+  });
+  villaCard.appendChild(midDiv);
+  const bottomDiv = document.createElement("div");
+  bottomDiv.classList.add("mys-post-villa-card-bottom");
+  bottomDiv.innerText = data.insert.villa_card.villa_introduce;
+  villaCard.appendChild(bottomDiv);
+  div.appendChild(villaCard);
+  return div;
+}
+
 export default parsePost;