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

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

Browse Source 
扩展字幕样式设置面板，支持分别配置提示文字、消息文字、热词标题和热词问题的样式
包括字体大小、粗细、颜色和行高属性
This commit is contained in:
ZF Sun
2026-05-06 14:55:40 +08:00
parent 93d13c8cb2
commit 240861f933
3 changed files with 180 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/scripts/main.js
View File

@@ -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) {