feat(字幕样式): 添加多文本类型样式配置功能

扩展字幕样式设置面板，支持分别配置提示文字、消息文字、热词标题和热词问题的样式
包括字体大小、粗细、颜色和行高属性

frontend/index.html

@@ -77,11 +77,103 @@
             <h2>📝 字幕样式设置</h2>
             <button class="panel-close" data-panel="captionPanel">×</button>
         </div>
-        <div class="panel-content">
+        <div class="panel-content" style="max-height: 500px; overflow-y: auto;">
-            <div class="form-group">
+            <!-- 提示文字样式 -->
-                <label for="captionFontSize">字体大小 (px)</label>
+            <div class="caption-style-section">
-                <input type="number" id="captionFontSize" value="16" min="12" max="32">
+                <h3>提示文字 (tip)</h3>
+                <div class="form-group">
+                    <label for="tipFontSize">字体大小 (px)</label>
+                    <input type="number" id="tipFontSize" value="14" min="10" max="24">
+                </div>
+                <div class="form-group">
+                    <label for="tipFontWeight">字体粗细</label>
+                    <select id="tipFontWeight">
+                        <option value="normal">正常</option>
+                        <option value="bold">粗体</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="tipColor">字体颜色</label>
+                    <input type="color" id="tipColor" value="#888888">
+                </div>
+                <div class="form-group">
+                    <label for="tipLineHeight">行高</label>
+                    <input type="number" id="tipLineHeight" value="1.5" min="1" max="3" step="0.1">
+                </div>
             </div>
+
+            <!-- 消息文字样式 -->
+            <div class="caption-style-section">
+                <h3>消息文字 (message)</h3>
+                <div class="form-group">
+                    <label for="messageFontSize">字体大小 (px)</label>
+                    <input type="number" id="messageFontSize" value="16" min="12" max="32">
+                </div>
+                <div class="form-group">
+                    <label for="messageFontWeight">字体粗细</label>
+                    <select id="messageFontWeight">
+                        <option value="normal">正常</option>
+                        <option value="bold">粗体</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="messageColor">字体颜色</label>
+                    <input type="color" id="messageColor" value="#ffffff">
+                </div>
+                <div class="form-group">
+                    <label for="messageLineHeight">行高</label>
+                    <input type="number" id="messageLineHeight" value="1.5" min="1" max="3" step="0.1">
+                </div>
+            </div>
+
+            <!-- 热词标题样式 -->
+            <div class="caption-style-section">
+                <h3>热词标题 (hot-title)</h3>
+                <div class="form-group">
+                    <label for="hotTitleFontSize">字体大小 (px)</label>
+                    <input type="number" id="hotTitleFontSize" value="14" min="10" max="24">
+                </div>
+                <div class="form-group">
+                    <label for="hotTitleFontWeight">字体粗细</label>
+                    <select id="hotTitleFontWeight">
+                        <option value="normal">正常</option>
+                        <option value="bold" selected>粗体</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="hotTitleColor">字体颜色</label>
+                    <input type="color" id="hotTitleColor" value="#ffcc00">
+                </div>
+                <div class="form-group">
+                    <label for="hotTitleLineHeight">行高</label>
+                    <input type="number" id="hotTitleLineHeight" value="1.5" min="1" max="3" step="0.1">
+                </div>
+            </div>
+
+            <!-- 热词问题样式 -->
+            <div class="caption-style-section">
+                <h3>热词问题 (hot-issues)</h3>
+                <div class="form-group">
+                    <label for="hotIssuesFontSize">字体大小 (px)</label>
+                    <input type="number" id="hotIssuesFontSize" value="14" min="10" max="24">
+                </div>
+                <div class="form-group">
+                    <label for="hotIssuesFontWeight">字体粗细</label>
+                    <select id="hotIssuesFontWeight">
+                        <option value="normal">正常</option>
+                        <option value="bold">粗体</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="hotIssuesColor">字体颜色</label>
+                    <input type="color" id="hotIssuesColor" value="#00ccff">
+                </div>
+                <div class="form-group">
+                    <label for="hotIssuesLineHeight">行高</label>
+                    <input type="number" id="hotIssuesLineHeight" value="1.5" min="1" max="3" step="0.1">
+                </div>
+            </div>
+
             <button id="applyCaptionStyleBtn" class="btn btn-primary" style="width: 100%; margin-top: 16px;">应用样式</button>
         </div>
     </div>

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('*');
+    if (tipEl) {
-    textElements.forEach(el => {
+        tipEl.style.fontSize = `${elements.tipFontSize.value}px`;
-        el.style.fontSize = `${fontSize}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) {

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);