From 319a2f883b63ee184291809698c28893f3449b21 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Wed, 6 May 2026 15:37:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=89=8D=E7=AB=AF):=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=B6=88=E6=81=AF=E6=B0=94=E6=B3=A1=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E5=8F=8A=E5=A4=84=E7=90=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将消息文字样式改为消息气泡样式，统一使用'.message-item .item-content'作为选择器
修改对应的样式应用逻辑，使用querySelectorAll遍历所有消息气泡元素
更新注释和标签文本以反映实际功能
---
 frontend/index.html      |  4 ++--
 frontend/scripts/main.js | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 94a7565..f6bf2d6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -145,9 +145,9 @@
                 </div>
             </div>
 
-            <!-- 消息文字样式 -->
+            <!-- 消息气泡样式 -->
             <div class="caption-style-section">
-                <h3>消息文字 (message)</h3>
+                <h3>消息气泡 (message-item .item-content)</h3>
                 <div class="form-group">
                     <label for="messageFontSize">字体大小 (px)</label>
                     <input type="number" id="messageFontSize" value="16" min="12" max="32">
diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js
index 80ff213..edfea53 100644
--- a/frontend/scripts/main.js
+++ b/frontend/scripts/main.js
@@ -413,19 +413,19 @@ function applyCaptionStyle() {
         tipEl.style.padding = `${elements.tipPadding.value}px`;
     }
 
-    const messageEl = captionContainer.querySelector('.layout-hub-message');
-    if (messageEl) {
-        messageEl.style.fontSize = `${elements.messageFontSize.value}px`;
-        messageEl.style.fontWeight = elements.messageFontWeight.value;
-        messageEl.style.color = elements.messageColor.value;
-        messageEl.style.lineHeight = elements.messageLineHeight.value;
-        messageEl.style.backgroundColor = hexToRgba(
+    const messageItems = captionContainer.querySelectorAll('.message-item .item-content');
+    messageItems.forEach(item => {
+        item.style.fontSize = `${elements.messageFontSize.value}px`;
+        item.style.fontWeight = elements.messageFontWeight.value;
+        item.style.color = elements.messageColor.value;
+        item.style.lineHeight = elements.messageLineHeight.value;
+        item.style.backgroundColor = hexToRgba(
             elements.messageBgColor.value,
             elements.messageBgOpacity.value / 100
         );
-        messageEl.style.borderRadius = `${elements.messageBorderRadius.value}px`;
-        messageEl.style.padding = `${elements.messagePadding.value}px`;
-    }
+        item.style.borderRadius = `${elements.messageBorderRadius.value}px`;
+        item.style.padding = `${elements.messagePadding.value}px`;
+    });
 
     const hotTitleEl = captionContainer.querySelector('.layout-hub-hot-title');
     if (hotTitleEl) {
@@ -497,7 +497,7 @@ function loadCaptionStyleFromContainer() {
 
     const sections = [
         { selector: '.layout-hub-tip', elements: { fontSize: elements.tipFontSize, fontWeight: elements.tipFontWeight, color: elements.tipColor, lineHeight: elements.tipLineHeight, bgColor: elements.tipBgColor, bgOpacity: elements.tipBgOpacity, borderRadius: elements.tipBorderRadius, padding: elements.tipPadding } },
-        { selector: '.layout-hub-message', elements: { fontSize: elements.messageFontSize, fontWeight: elements.messageFontWeight, color: elements.messageColor, lineHeight: elements.messageLineHeight, bgColor: elements.messageBgColor, bgOpacity: elements.messageBgOpacity, borderRadius: elements.messageBorderRadius, padding: elements.messagePadding } },
+        { selector: '.message-item .item-content', elements: { fontSize: elements.messageFontSize, fontWeight: elements.messageFontWeight, color: elements.messageColor, lineHeight: elements.messageLineHeight, bgColor: elements.messageBgColor, bgOpacity: elements.messageBgOpacity, borderRadius: elements.messageBorderRadius, padding: elements.messagePadding } },
         { selector: '.layout-hub-hot-title', elements: { fontSize: elements.hotTitleFontSize, fontWeight: elements.hotTitleFontWeight, color: elements.hotTitleColor, lineHeight: elements.hotTitleLineHeight, bgColor: elements.hotTitleBgColor, bgOpacity: elements.hotTitleBgOpacity, borderRadius: elements.hotTitleBorderRadius, padding: elements.hotTitlePadding } },
         { selector: '.layout-hub-hot-issues', elements: { fontSize: elements.hotIssuesFontSize, fontWeight: elements.hotIssuesFontWeight, color: elements.hotIssuesColor, lineHeight: elements.hotIssuesLineHeight, bgColor: elements.hotIssuesBgColor, bgOpacity: elements.hotIssuesBgOpacity, borderRadius: elements.hotIssuesBorderRadius, padding: elements.hotIssuesPadding } }
     ];