From 491dbb4fd96200f2e76007bd41746b3a5aa35f82 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sun, 13 Apr 2025 17:31:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AFrichContent=E6=94=B9=E5=90=8D?=
 =?UTF-8?q?=E4=B8=BAcontentParts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatRenderer/TextMessage.vue   | 12 ++---
 .../src/components/ChatRenderer/constants.js  | 14 +++---
 .../src/components/ChatRenderer/index.vue     |  4 +-
 frontend/src/views/Room.vue                   | 48 +++++++++----------
 4 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue
index 393b7ac..39135dd 100644
--- a/frontend/src/components/ChatRenderer/TextMessage.vue
+++ b/frontend/src/components/ChatRenderer/TextMessage.vue
@@ -9,10 +9,10 @@
         :isInMemberMessage="false" :authorName="authorName" :authorType="authorType" :privilegeType="privilegeType"
       ></author-chip>
       <span id="message" class="style-scope yt-live-chat-text-message-renderer">
-        <template v-for="(content, index) in richContent">
-          <span :key="index" v-if="content.type === CONTENT_TYPE_TEXT">{{ content.text }}</span>
+        <template v-for="(content, index) in contentParts">
+          <span :key="index" v-if="content.type === CONTENT_PART_TYPE_TEXT">{{ content.text }}</span>
           <!-- 如果CSS设置的尺寸比属性设置的尺寸还大，在图片加载完后布局会变化，可能导致滚动卡住，没什么好的解决方法 -->
-          <img :key="index" v-else-if="content.type === CONTENT_TYPE_IMAGE"
+          <img :key="index" v-else-if="content.type === CONTENT_PART_TYPE_IMAGE"
             class="emoji yt-formatted-string style-scope yt-live-chat-text-message-renderer"
             :src="content.url" :alt="content.text" :shared-tooltip-text="content.text" :id="`emoji-${content.text}`"
             :width="content.width" :height="content.height"
@@ -48,14 +48,14 @@ export default {
     time: Date,
     authorName: String,
     authorType: Number,
-    richContent: Array,
+    contentParts: Array,
     privilegeType: Number,
     repeated: Number
   },
   data() {
     return {
-      CONTENT_TYPE_TEXT: constants.CONTENT_TYPE_TEXT,
-      CONTENT_TYPE_IMAGE: constants.CONTENT_TYPE_IMAGE
+      CONTENT_PART_TYPE_TEXT: constants.CONTENT_PART_TYPE_TEXT,
+      CONTENT_PART_TYPE_IMAGE: constants.CONTENT_PART_TYPE_IMAGE
     }
   },
   computed: {
diff --git a/frontend/src/components/ChatRenderer/constants.js b/frontend/src/components/ChatRenderer/constants.js
index 3b6a168..fc6b0e7 100644
--- a/frontend/src/components/ChatRenderer/constants.js
+++ b/frontend/src/components/ChatRenderer/constants.js
@@ -34,8 +34,8 @@ export const MESSAGE_TYPE_SUPER_CHAT = 3
 export const MESSAGE_TYPE_DEL = 4
 export const MESSAGE_TYPE_UPDATE = 5
 
-export const CONTENT_TYPE_TEXT = 0
-export const CONTENT_TYPE_IMAGE = 1
+export const CONTENT_PART_TYPE_TEXT = 0
+export const CONTENT_PART_TYPE_IMAGE = 1
 
 // 美元 -> 人民币 汇率
 const EXCHANGE_RATE = 7
@@ -173,15 +173,15 @@ export function getShowContent(message) {
   return message.content
 }
 
-export function getShowRichContent(message) {
-  let richContent = [...message.richContent]
+export function getShowContentParts(message) {
+  let contentParts = [...message.contentParts]
   if (message.translation) {
-    richContent.push({
-      type: CONTENT_TYPE_TEXT,
+    contentParts.push({
+      type: CONTENT_PART_TYPE_TEXT,
       text: `（${message.translation}）`
     })
   }
-  return richContent
+  return contentParts
 }
 
 export function getGiftShowContent(message, showGiftName) {
diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue
index fd78e0b..973cce3 100644
--- a/frontend/src/components/ChatRenderer/index.vue
+++ b/frontend/src/components/ChatRenderer/index.vue
@@ -17,7 +17,7 @@
                 :authorName="message.authorName"
                 :authorType="message.authorType"
                 :privilegeType="message.privilegeType"
-                :richContent="getShowRichContent(message)"
+                :contentParts="getShowContentParts(message)"
                 :repeated="message.repeated"
               ></text-message>
               <paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_GIFT"
@@ -153,7 +153,7 @@ export default {
     },
     getGiftShowNameAndNum: constants.getGiftShowNameAndNum,
     getShowContent: constants.getShowContent,
-    getShowRichContent: constants.getShowRichContent,
+    getShowContentParts: constants.getShowContentParts,
     getShowAuthorName: constants.getShowAuthorName,
 
     addMessage(message) {
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index 1c21c17..c329096 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -380,7 +380,7 @@ export default {
       if (!this.config.showDanmaku || !this.filterTextMessage(data)) {
         return
       }
-      let richContent = await this.getRichContent(data)
+      let contentParts = await this.parseContentParts(data)
       // 合并要放在异步调用后面，因为异步调用后可能有新的消息，会漏合并
       if (this.mergeSimilarText(data.content)) {
         return
@@ -393,7 +393,7 @@ export default {
         authorName: data.authorName,
         authorType: data.authorType,
         content: data.content,
-        richContent: richContent,
+        contentParts: contentParts,
         privilegeType: data.privilegeType,
         repeated: 1,
         translation: data.translation
@@ -557,29 +557,29 @@ export default {
       }
       return this.pronunciationConverter.getPronunciation(text)
     },
-    async getRichContent(data) {
-      let richContent = []
+    async parseContentParts(data) {
+      let contentParts = []
 
       // 官方的非文本表情
       if (data.emoticon !== null) {
-        richContent.push({
-          type: constants.CONTENT_TYPE_IMAGE,
+        contentParts.push({
+          type: constants.CONTENT_PART_TYPE_IMAGE,
           text: data.content,
           url: data.emoticon,
           width: 0,
           height: 0
         })
-        await this.fillImageContentSizes(richContent)
-        return richContent
+        await this.fillImageContentSizes(contentParts)
+        return contentParts
       }
 
       // 没有文本表情，只能是纯文本
       if (this.config.emoticons.length === 0 && this.textEmoticons.length === 0) {
-        richContent.push({
-          type: constants.CONTENT_TYPE_TEXT,
+        contentParts.push({
+          type: constants.CONTENT_PART_TYPE_TEXT,
           text: data.content
         })
-        return richContent
+        return contentParts
       }
 
       // 可能含有文本表情，需要解析
@@ -596,15 +596,15 @@ export default {
 
         // 加入之前的文本
         if (pos !== startPos) {
-          richContent.push({
-            type: constants.CONTENT_TYPE_TEXT,
+          contentParts.push({
+            type: constants.CONTENT_PART_TYPE_TEXT,
             text: data.content.slice(startPos, pos)
           })
         }
 
         // 加入表情
-        richContent.push({
-          type: constants.CONTENT_TYPE_IMAGE,
+        contentParts.push({
+          type: constants.CONTENT_PART_TYPE_IMAGE,
           text: matchEmoticon.keyword,
           url: matchEmoticon.url,
           width: 0,
@@ -615,19 +615,19 @@ export default {
       }
       // 加入尾部的文本
       if (pos !== startPos) {
-        richContent.push({
-          type: constants.CONTENT_TYPE_TEXT,
+        contentParts.push({
+          type: constants.CONTENT_PART_TYPE_TEXT,
           text: data.content.slice(startPos, pos)
         })
       }
 
-      await this.fillImageContentSizes(richContent)
-      return richContent
+      await this.fillImageContentSizes(contentParts)
+      return contentParts
     },
-    async fillImageContentSizes(richContent) {
+    async fillImageContentSizes(contentParts) {
       let urlSizeMap = new Map()
-      for (let content of richContent) {
-        if (content.type === constants.CONTENT_TYPE_IMAGE) {
+      for (let content of contentParts) {
+        if (content.type === constants.CONTENT_PART_TYPE_IMAGE) {
           urlSizeMap.set(content.url, { width: 0, height: 0 })
         }
       }
@@ -657,8 +657,8 @@ export default {
       }
       await Promise.all(promises)
 
-      for (let content of richContent) {
-        if (content.type === constants.CONTENT_TYPE_IMAGE) {
+      for (let content of contentParts) {
+        if (content.type === constants.CONTENT_PART_TYPE_IMAGE) {
           let size = urlSizeMap.get(content.url)
           content.width = size.width
           content.height = size.height