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

feat(字幕样式): 实现实时更新字幕样式功能并优化样式处理

Browse Source 
新增updateSingleStyle函数实现单个样式属性的实时更新
优化applyCaptionStyle函数使用Object.assign简化代码
增强loadCaptionStyleFromContainer函数对透明背景的处理
添加字幕内容变化监听功能watchCaptionContentChanges
调整默认样式值为黑色背景和1倍行高
This commit is contained in:
ZF Sun
2026-05-06 16:44:34 +08:00
parent 319a2f883b
commit f8dc097f24
3 changed files with 285 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/index.html
View File

@@ -83,16 +83,16 @@
<h3>字幕容器 (container)</h3>
<div class="form-group">
<label for="containerBgColor">背景颜色</label>
<input type="color" id="containerBgColor" value="#1a1a2e">
<input type="color" id="containerBgColor" value="#000000">
</div>
<div class="form-group">
<label for="containerBgOpacity">背景透明度</label>
<input type="range" id="containerBgOpacity" value="85" min="0" max="100">
<span class="range-value">85%</span>
<input type="range" id="containerBgOpacity" value="0" min="0" max="100">
<span class="range-value">0%</span>
</div>
<div class="form-group">
<label for="containerBorderColor">边框颜色</label>
<input type="color" id="containerBorderColor" value="#333333">
<input type="color" id="containerBorderColor" value="#000000">
</div>
<div class="form-group">
<label for="containerBorderRadius">圆角 (px)</label>
@@ -124,7 +124,7 @@
</div>
<div class="form-group">
<label for="tipLineHeight">行高</label>
<input type="number" id="tipLineHeight" value="1.5" min="1" max="3" step="0.1">
<input type="number" id="tipLineHeight" value="1" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="tipBgColor">背景颜色</label>
@@ -165,7 +165,7 @@
</div>
<div class="form-group">
<label for="messageLineHeight">行高</label>
<input type="number" id="messageLineHeight" value="1.5" min="1" max="3" step="0.1">
<input type="number" id="messageLineHeight" value="1" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="messageBgColor">背景颜色</label>
@@ -206,7 +206,7 @@
</div>
<div class="form-group">
<label for="hotTitleLineHeight">行高</label>
<input type="number" id="hotTitleLineHeight" value="1.5" min="1" max="3" step="0.1">
<input type="number" id="hotTitleLineHeight" value="1" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="hotTitleBgColor">背景颜色</label>
@@ -247,7 +247,7 @@
</div>
<div class="form-group">
<label for="hotIssuesLineHeight">行高</label>
<input type="number" id="hotIssuesLineHeight" value="1.5" min="1" max="3" step="0.1">
<input type="number" id="hotIssuesLineHeight" value="1" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="hotIssuesBgColor">背景颜色</label>

312
frontend/scripts/main.js
View File

@@ -391,13 +391,14 @@ function applyCaptionStyle() {
return;
}
captionContainer.style.backgroundColor = hexToRgba(
elements.containerBgColor.value,
elements.containerBgOpacity.value / 100
);
captionContainer.style.borderColor = elements.containerBorderColor.value;
captionContainer.style.borderRadius = `${elements.containerBorderRadius.value}px`;
captionContainer.style.padding = `${elements.containerPadding.value}px`;
const containerStyles = {
backgroundColor: hexToRgba(elements.containerBgColor.value, elements.containerBgOpacity.value / 100),
borderColor: elements.containerBorderColor.value,
borderRadius: `${elements.containerBorderRadius.value}px`,
padding: `${elements.containerPadding.value}px`
};
Object.assign(captionContainer.style, containerStyles);
const tipEl = captionContainer.querySelector('.layout-hub-tip');
if (tipEl) {
@@ -405,10 +406,7 @@ function applyCaptionStyle() {
tipEl.style.fontWeight = elements.tipFontWeight.value;
tipEl.style.color = elements.tipColor.value;
tipEl.style.lineHeight = elements.tipLineHeight.value;
tipEl.style.backgroundColor = hexToRgba(
elements.tipBgColor.value,
elements.tipBgOpacity.value / 100
);
tipEl.style.backgroundColor = hexToRgba(elements.tipBgColor.value, elements.tipBgOpacity.value / 100);
tipEl.style.borderRadius = `${elements.tipBorderRadius.value}px`;
tipEl.style.padding = `${elements.tipPadding.value}px`;
}
@@ -419,10 +417,7 @@ function applyCaptionStyle() {
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
);
item.style.backgroundColor = hexToRgba(elements.messageBgColor.value, elements.messageBgOpacity.value / 100);
item.style.borderRadius = `${elements.messageBorderRadius.value}px`;
item.style.padding = `${elements.messagePadding.value}px`;
});
@@ -433,10 +428,7 @@ function applyCaptionStyle() {
hotTitleEl.style.fontWeight = elements.hotTitleFontWeight.value;
hotTitleEl.style.color = elements.hotTitleColor.value;
hotTitleEl.style.lineHeight = elements.hotTitleLineHeight.value;
hotTitleEl.style.backgroundColor = hexToRgba(
elements.hotTitleBgColor.value,
elements.hotTitleBgOpacity.value / 100
);
hotTitleEl.style.backgroundColor = hexToRgba(elements.hotTitleBgColor.value, elements.hotTitleBgOpacity.value / 100);
hotTitleEl.style.borderRadius = `${elements.hotTitleBorderRadius.value}px`;
hotTitleEl.style.padding = `${elements.hotTitlePadding.value}px`;
}
@@ -447,10 +439,7 @@ function applyCaptionStyle() {
hotIssuesEl.style.fontWeight = elements.hotIssuesFontWeight.value;
hotIssuesEl.style.color = elements.hotIssuesColor.value;
hotIssuesEl.style.lineHeight = elements.hotIssuesLineHeight.value;
hotIssuesEl.style.backgroundColor = hexToRgba(
elements.hotIssuesBgColor.value,
elements.hotIssuesBgOpacity.value / 100
);
hotIssuesEl.style.backgroundColor = hexToRgba(elements.hotIssuesBgColor.value, elements.hotIssuesBgOpacity.value / 100);
hotIssuesEl.style.borderRadius = `${elements.hotIssuesBorderRadius.value}px`;
hotIssuesEl.style.padding = `${elements.hotIssuesPadding.value}px`;
}
@@ -458,6 +447,153 @@ function applyCaptionStyle() {
logger.info('字幕样式已应用');
}
function updateSingleStyle(inputId) {
const captionContainer = document.querySelector('.caption-container-hub');
if (!captionContainer) return;
const updateMap = {
containerBgColor: () => {
captionContainer.style.backgroundColor = hexToRgba(elements.containerBgColor.value, elements.containerBgOpacity.value / 100);
},
containerBgOpacity: () => {
captionContainer.style.backgroundColor = hexToRgba(elements.containerBgColor.value, elements.containerBgOpacity.value / 100);
},
containerBorderColor: () => {
captionContainer.style.borderColor = elements.containerBorderColor.value;
},
containerBorderRadius: () => {
captionContainer.style.borderRadius = `${elements.containerBorderRadius.value}px`;
},
containerPadding: () => {
captionContainer.style.padding = `${elements.containerPadding.value}px`;
},
tipFontSize: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.fontSize = `${elements.tipFontSize.value}px`;
},
tipFontWeight: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.fontWeight = elements.tipFontWeight.value;
},
tipColor: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.color = elements.tipColor.value;
},
tipLineHeight: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.lineHeight = elements.tipLineHeight.value;
},
tipBgColor: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.backgroundColor = hexToRgba(elements.tipBgColor.value, elements.tipBgOpacity.value / 100);
},
tipBgOpacity: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.backgroundColor = hexToRgba(elements.tipBgColor.value, elements.tipBgOpacity.value / 100);
},
tipBorderRadius: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.borderRadius = `${elements.tipBorderRadius.value}px`;
},
tipPadding: () => {
const el = captionContainer.querySelector('.layout-hub-tip');
if (el) el.style.padding = `${elements.tipPadding.value}px`;
},
messageFontSize: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.fontSize = `${elements.messageFontSize.value}px`);
},
messageFontWeight: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.fontWeight = elements.messageFontWeight.value);
},
messageColor: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.color = elements.messageColor.value);
},
messageLineHeight: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.lineHeight = elements.messageLineHeight.value);
},
messageBgColor: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.backgroundColor = hexToRgba(elements.messageBgColor.value, elements.messageBgOpacity.value / 100));
},
messageBgOpacity: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.backgroundColor = hexToRgba(elements.messageBgColor.value, elements.messageBgOpacity.value / 100));
},
messageBorderRadius: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.borderRadius = `${elements.messageBorderRadius.value}px`);
},
messagePadding: () => {
captionContainer.querySelectorAll('.message-item .item-content').forEach(el => el.style.padding = `${elements.messagePadding.value}px`);
},
hotTitleFontSize: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.fontSize = `${elements.hotTitleFontSize.value}px`;
},
hotTitleFontWeight: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.fontWeight = elements.hotTitleFontWeight.value;
},
hotTitleColor: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.color = elements.hotTitleColor.value;
},
hotTitleLineHeight: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.lineHeight = elements.hotTitleLineHeight.value;
},
hotTitleBgColor: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.backgroundColor = hexToRgba(elements.hotTitleBgColor.value, elements.hotTitleBgOpacity.value / 100);
},
hotTitleBgOpacity: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.backgroundColor = hexToRgba(elements.hotTitleBgColor.value, elements.hotTitleBgOpacity.value / 100);
},
hotTitleBorderRadius: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.borderRadius = `${elements.hotTitleBorderRadius.value}px`;
},
hotTitlePadding: () => {
const el = captionContainer.querySelector('.layout-hub-hot-title');
if (el) el.style.padding = `${elements.hotTitlePadding.value}px`;
},
hotIssuesFontSize: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.fontSize = `${elements.hotIssuesFontSize.value}px`;
},
hotIssuesFontWeight: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.fontWeight = elements.hotIssuesFontWeight.value;
},
hotIssuesColor: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.color = elements.hotIssuesColor.value;
},
hotIssuesLineHeight: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.lineHeight = elements.hotIssuesLineHeight.value;
},
hotIssuesBgColor: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.backgroundColor = hexToRgba(elements.hotIssuesBgColor.value, elements.hotIssuesBgOpacity.value / 100);
},
hotIssuesBgOpacity: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.backgroundColor = hexToRgba(elements.hotIssuesBgColor.value, elements.hotIssuesBgOpacity.value / 100);
},
hotIssuesBorderRadius: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.borderRadius = `${elements.hotIssuesBorderRadius.value}px`;
},
hotIssuesPadding: () => {
const el = captionContainer.querySelector('.layout-hub-hot-issues');
if (el) el.style.padding = `${elements.hotIssuesPadding.value}px`;
}
};
if (updateMap[inputId]) {
updateMap[inputId]();
}
}
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
@@ -475,23 +611,32 @@ function loadCaptionStyleFromContainer() {
const containerRadius = containerStyles.borderRadius;
const containerPad = containerStyles.padding;
if (containerBg && containerBg !== 'transparent') {
if (containerBg) {
const rgbaMatch = containerBg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);
if (rgbaMatch) {
elements.containerBgColor.value = rgbToHex(parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3]));
elements.containerBgOpacity.value = rgbaMatch[4] ? Math.round(parseFloat(rgbaMatch[4]) * 100) : 100;
if (rgbaMatch[4]) {
elements.containerBgOpacity.value = Math.round(parseFloat(rgbaMatch[4]) * 100);
}
} else if (containerBg === 'transparent' || containerBg === 'rgba(0, 0, 0, 0)') {
elements.containerBgColor.value = '#000000';
elements.containerBgOpacity.value = 0;
}
}
if (containerBorder && containerBorder !== 'transparent' && containerBorder !== 'rgba(0, 0, 0, 0)') {
if (containerBorder) {
const rgbaMatch = containerBorder.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);
if (rgbaMatch) {
elements.containerBorderColor.value = rgbToHex(parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3]));
}
}
elements.containerBorderRadius.value = parseInt(containerRadius) || 8;
elements.containerPadding.value = parseInt(containerPad) || 10;
if (containerRadius) {
elements.containerBorderRadius.value = parseInt(containerRadius) || 8;
}
if (containerPad) {
elements.containerPadding.value = parseInt(containerPad) || 10;
}
updateRangeValue(elements.containerBgOpacity);
@@ -504,39 +649,66 @@ function loadCaptionStyleFromContainer() {
sections.forEach(section => {
const el = captionContainer.querySelector(section.selector);
if (!el) return;
if (!el) {
logger.warn(`loadCaptionStyleFromContainer: 元素 ${section.selector} 未找到`);
return;
}
const styles = window.getComputedStyle(el);
section.elements.fontSize.value = parseInt(styles.fontSize) || 14;
section.elements.fontWeight.value = styles.fontWeight === 'bold' ? 'bold' : 'normal';
section.elements.color.value = parseColor(styles.color);
section.elements.lineHeight.value = parseFloat(styles.lineHeight) || 1.5;
if (styles.backgroundColor && styles.backgroundColor !== 'transparent') {
const rgbaMatch = styles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);
if (rgbaMatch) {
section.elements.bgColor.value = rgbToHex(parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3]));
section.elements.bgOpacity.value = rgbaMatch[4] ? Math.round(parseFloat(rgbaMatch[4]) * 100) : 100;
if (styles.fontSize) {
section.elements.fontSize.value = parseInt(styles.fontSize) || 14;
}
if (styles.fontWeight) {
section.elements.fontWeight.value = styles.fontWeight === 'bold' || styles.fontWeight === '700' ? 'bold' : 'normal';
}
if (styles.color) {
const parsedColor = parseColor(styles.color);
if (parsedColor) {
section.elements.color.value = parsedColor;
}
}
section.elements.borderRadius.value = parseInt(styles.borderRadius) || 4;
section.elements.padding.value = parseInt(styles.padding) || 6;
if (styles.backgroundColor && styles.backgroundColor !== 'transparent' && styles.backgroundColor !== 'rgba(0, 0, 0, 0)') {
const rgbaMatch = styles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);
if (rgbaMatch) {
section.elements.bgColor.value = rgbToHex(parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3]));
if (rgbaMatch[4]) {
section.elements.bgOpacity.value = Math.round(parseFloat(rgbaMatch[4]) * 100);
}
}
}
updateRangeValue(section.elements.bgOpacity);
if (styles.borderRadius) {
section.elements.borderRadius.value = parseInt(styles.borderRadius) || 4;
}
if (styles.padding) {
section.elements.padding.value = parseInt(styles.padding) || 6;
}
if (section.elements.bgOpacity) {
updateRangeValue(section.elements.bgOpacity);
}
});
logger.info('已从字幕容器加载样式');
}
function parseColor(colorStr) {
if (!colorStr) return '#ffffff';
if (!colorStr) return null;
if (colorStr.startsWith('#')) return colorStr;
const rgbMatch = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
if (rgbMatch) {
return rgbToHex(parseInt(rgbMatch[1]), parseInt(rgbMatch[2]), parseInt(rgbMatch[3]));
}
const rgbaMatch = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);
if (rgbaMatch) {
return rgbToHex(parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3]));
}
return '#ffffff';
return null;
}
function rgbToHex(r, g, b) {
@@ -657,6 +829,9 @@ function initCaptionDragAndResize(container) {
logger.info('字幕容器拖拽和缩放已启用');
}
let captionStyleObserver = null;
let captionStyleApplied = false;
function watchCaptionContainer() {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
@@ -670,6 +845,11 @@ function watchCaptionContainer() {
captionContainer.style.zIndex = '9999';
initCaptionDragAndResize(captionContainer);
loadCaptionStyleFromContainer();
if (captionStyleApplied) {
setTimeout(applyCaptionStyle, 100);
}
} else if (captionContainer && captionStyleApplied) {
setTimeout(applyCaptionStyle, 100);
}
}
}
@@ -687,6 +867,30 @@ function watchCaptionContainer() {
logger.info('已启动字幕容器监听');
}
function watchCaptionContentChanges() {
const captionContainer = document.querySelector('.caption-container-hub');
if (!captionContainer) return;
if (captionStyleObserver) {
captionStyleObserver.disconnect();
}
captionStyleObserver = new MutationObserver(() => {
if (captionStyleApplied) {
setTimeout(applyCaptionStyle, 50);
}
});
captionStyleObserver.observe(captionContainer, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style', 'class']
});
logger.info('已启动字幕内容变化监听');
}
function calculateScale() {
const container = elements.digitalHumanBox;
const sdkContainer = container.querySelector('.digital-intelligent-interaction');
@@ -741,7 +945,11 @@ function bindEvents() {
elements.initBtn.addEventListener('click', initializeSDK);
elements.destroyBtn.addEventListener('click', destroySDK);
elements.getOnceCodeBtn.addEventListener('click', handleGetOnceCode);
elements.applyCaptionStyleBtn.addEventListener('click', applyCaptionStyle);
elements.applyCaptionStyleBtn.addEventListener('click', () => {
applyCaptionStyle();
captionStyleApplied = true;
watchCaptionContentChanges();
});
document.querySelectorAll('input[type="range"]').forEach(slider => {
slider.addEventListener('input', (e) => {
@@ -749,6 +957,22 @@ function bindEvents() {
if (valueSpan && valueSpan.classList.contains('range-value')) {
valueSpan.textContent = `${e.target.value}%`;
}
updateSingleStyle(e.target.id);
captionStyleApplied = true;
watchCaptionContentChanges();
});
});
document.querySelectorAll('#captionPanel input[type="number"], #captionPanel input[type="color"], #captionPanel select').forEach(input => {
input.addEventListener('input', (e) => {
updateSingleStyle(e.target.id);
captionStyleApplied = true;
watchCaptionContentChanges();
});
input.addEventListener('change', (e) => {
updateSingleStyle(e.target.id);
captionStyleApplied = true;
watchCaptionContentChanges();
});
});

18
frontend/styles/main.css
View File

@@ -636,36 +636,36 @@ body {
/* ===== 覆盖 SDK 字体大小 ===== */
.digital-intelligent-interaction {
font-size: 14px !important;
font-size: 14px;
}
.digital-intelligent-interaction .ai-chat-btn .ai-chat-btn-content {
font-size: 16px !important;
font-size: 16px;
}
.digital-intelligent-interaction .message-item .rich-text-card .content {
font-size: 16px !important;
line-height: 24px !important;
font-size: 16px;
line-height: 24px;
}
.digital-intelligent-interaction .stop-chat-btn.normal .stop-chat-btn-content {
font-size: 16px !important;
font-size: 16px;
}
.digital-intelligent-interaction .toast-container .toast-content .toast-text {
font-size: 12px !important;
font-size: 12px;
}
.digital-intelligent-interaction .layout-hub-tip {
font-size: 16px !important;
font-size: 16px;
}
.digital-intelligent-interaction .layout-hub-hot-title {
font-size: 16px !important;
font-size: 16px;
}
.digital-intelligent-interaction .layout-hub-hot-issues {
font-size: 16px !important;
font-size: 16px;
}
/* ===== 滚动条样式 ===== */