Projects/antiwear-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(前端): 更新消息气泡样式选择器及处理逻辑

Browse Source 
将消息文字样式改为消息气泡样式，统一使用'.message-item .item-content'作为选择器
修改对应的样式应用逻辑，使用querySelectorAll遍历所有消息气泡元素
更新注释和标签文本以反映实际功能
This commit is contained in:
ZF Sun
2026-05-06 15:37:29 +08:00
parent 633ce3014f
commit 319a2f883b
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -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">

22
frontend/scripts/main.js
View File

@@ -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 } }
];