From 240861f933ff9de5d0530fbee5f9ccbcedbdf108 Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Wed, 6 May 2026 14:55:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=AD=97=E5=B9=95=E6=A0=B7=E5=BC=8F):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=9A=E6=96=87=E6=9C=AC=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 扩展字幕样式设置面板，支持分别配置提示文字、消息文字、热词标题和热词问题的样式 包括字体大小、粗细、颜色和行高属性 --- frontend/index.html | 100 +++++++++++++++++++++++++++++++++++++-- frontend/scripts/main.js | 60 +++++++++++++++++++---- frontend/styles/main.css | 33 +++++++++++++ 3 files changed, 180 insertions(+), 13 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 60b5865..0a2361d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -77,11 +77,103 @@

📝 字幕样式设置

-
-
- - +
+ +
+

提示文字 (tip)

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+

消息文字 (message)

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

热词标题 (hot-title)

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

热词问题 (hot-issues)

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js index 731a512..fe93edb 100644 --- a/frontend/scripts/main.js +++ b/frontend/scripts/main.js @@ -60,7 +60,25 @@ const elements = { toggleLogBtn: document.getElementById('toggleLogBtn'), applyCaptionStyleBtn: document.getElementById('applyCaptionStyleBtn'), - captionFontSize: document.getElementById('captionFontSize'), + tipFontSize: document.getElementById('tipFontSize'), + tipFontWeight: document.getElementById('tipFontWeight'), + tipColor: document.getElementById('tipColor'), + tipLineHeight: document.getElementById('tipLineHeight'), + + messageFontSize: document.getElementById('messageFontSize'), + messageFontWeight: document.getElementById('messageFontWeight'), + messageColor: document.getElementById('messageColor'), + messageLineHeight: document.getElementById('messageLineHeight'), + + hotTitleFontSize: document.getElementById('hotTitleFontSize'), + hotTitleFontWeight: document.getElementById('hotTitleFontWeight'), + hotTitleColor: document.getElementById('hotTitleColor'), + hotTitleLineHeight: document.getElementById('hotTitleLineHeight'), + + hotIssuesFontSize: document.getElementById('hotIssuesFontSize'), + hotIssuesFontWeight: document.getElementById('hotIssuesFontWeight'), + hotIssuesColor: document.getElementById('hotIssuesColor'), + hotIssuesLineHeight: document.getElementById('hotIssuesLineHeight'), logLevel: document.getElementById('logLevel'), @@ -345,22 +363,46 @@ function clearLogs() { } function applyCaptionStyle() { - const fontSize = elements.captionFontSize.value; - const captionContainer = document.querySelector('.caption-container-hub'); if (!captionContainer) { logger.warn('字幕容器未找到'); return; } - captionContainer.style.fontSize = `${fontSize}px`; + const tipEl = captionContainer.querySelector('.layout-hub-tip'); + const messageEl = captionContainer.querySelector('.layout-hub-message'); + const hotTitleEl = captionContainer.querySelector('.layout-hub-hot-title'); + const hotIssuesEl = captionContainer.querySelector('.layout-hub-hot-issues'); - const textElements = captionContainer.querySelectorAll('*'); - textElements.forEach(el => { - el.style.fontSize = `${fontSize}px`; - }); + if (tipEl) { + tipEl.style.fontSize = `${elements.tipFontSize.value}px`; + tipEl.style.fontWeight = elements.tipFontWeight.value; + tipEl.style.color = elements.tipColor.value; + tipEl.style.lineHeight = elements.tipLineHeight.value; + } - logger.info('字幕样式已应用', { fontSize }); + 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; + } + + if (hotTitleEl) { + hotTitleEl.style.fontSize = `${elements.hotTitleFontSize.value}px`; + hotTitleEl.style.fontWeight = elements.hotTitleFontWeight.value; + hotTitleEl.style.color = elements.hotTitleColor.value; + hotTitleEl.style.lineHeight = elements.hotTitleLineHeight.value; + } + + if (hotIssuesEl) { + hotIssuesEl.style.fontSize = `${elements.hotIssuesFontSize.value}px`; + hotIssuesEl.style.fontWeight = elements.hotIssuesFontWeight.value; + hotIssuesEl.style.color = elements.hotIssuesColor.value; + hotIssuesEl.style.lineHeight = elements.hotIssuesLineHeight.value; + } + + logger.info('字幕样式已应用'); } function initCaptionDragAndResize(container) { diff --git a/frontend/styles/main.css b/frontend/styles/main.css index a7e30b1..1ddcc01 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -340,6 +340,39 @@ body { width: 320px; } +.caption-style-section { + margin-bottom: var(--spacing-lg); + padding-bottom: var(--spacing-md); + border-bottom: 1px solid var(--border-color); +} + +.caption-style-section:last-of-type { + border-bottom: none; + margin-bottom: var(--spacing-md); +} + +.caption-style-section h3 { + font-size: 0.9rem; + color: var(--text-secondary); + margin-bottom: var(--spacing-sm); + font-weight: 600; +} + +.caption-style-section .form-group { + margin-bottom: var(--spacing-sm); +} + +.caption-style-section .form-group label { + font-size: 0.85rem; + color: var(--text-muted); +} + +.caption-style-section input[type="number"], +.caption-style-section input[type="color"], +.caption-style-section select { + height: 32px; +} + /* ===== 日志面板 ===== */ .log-panel { bottom: calc(var(--spacing-xl) + 60px);