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

refactor(字幕面板): 简化字幕样式配置并改进拖拽交互

Browse Source 
移除字幕面板中不必要的尺寸和位置配置项，仅保留字体大小设置
重构拖拽和调整大小功能，改进视觉效果和交互体验
This commit is contained in:
ZF Sun
2026-05-06 14:48:42 +08:00
parent 8b069194aa
commit 93d13c8cb2
2 changed files with 46 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/scripts/main.js
View File

@@ -60,11 +60,7 @@ const elements = {
toggleLogBtn: document.getElementById('toggleLogBtn'),
applyCaptionStyleBtn: document.getElementById('applyCaptionStyleBtn'),
captionWidth: document.getElementById('captionWidth'),
captionHeight: document.getElementById('captionHeight'),
captionFontSize: document.getElementById('captionFontSize'),
captionRight: document.getElementById('captionRight'),
captionBottom: document.getElementById('captionBottom'),
logLevel: document.getElementById('logLevel'),
@@ -349,11 +345,7 @@ function clearLogs() {
}
function applyCaptionStyle() {
const width = elements.captionWidth.value;
const height = elements.captionHeight.value;
const fontSize = elements.captionFontSize.value;
const right = elements.captionRight.value;
const bottom = elements.captionBottom.value;
const captionContainer = document.querySelector('.caption-container-hub');
if (!captionContainer) {
@@ -361,28 +353,14 @@ function applyCaptionStyle() {
return;
}
captionContainer.style.position = 'fixed';
captionContainer.style.width = `${width}px`;
captionContainer.style.height = `${height}px`;
captionContainer.style.maxHeight = `${height}px`;
captionContainer.style.right = `${right}px`;
captionContainer.style.bottom = `${bottom}px`;
captionContainer.style.fontSize = `${fontSize}px`;
captionContainer.style.borderRadius = '8px';
captionContainer.style.padding = '10px';
captionContainer.style.overflowY = 'auto';
captionContainer.style.cursor = 'move';
captionContainer.style.userSelect = 'none';
captionContainer.style.zIndex = '9999';
const textElements = captionContainer.querySelectorAll('*');
textElements.forEach(el => {
el.style.fontSize = `${fontSize}px`;
});
initCaptionDragAndResize(captionContainer);
logger.info('字幕容器样式已应用', { width, height, fontSize, right, bottom });
logger.info('字幕样式已应用', { fontSize });
}
function initCaptionDragAndResize(container) {
@@ -390,7 +368,7 @@ function initCaptionDragAndResize(container) {
let isDragging = false;
let isResizing = false;
let startX, startY, startRight, startBottom, startWidth, startHeight;
let startX, startY, startLeft, startTop, startWidth, startHeight;
let resizeHandle = container.querySelector('.caption-resize-handle');
if (!resizeHandle) {
@@ -399,28 +377,48 @@ function initCaptionDragAndResize(container) {
resizeHandle.style.position = 'absolute';
resizeHandle.style.right = '0';
resizeHandle.style.bottom = '0';
resizeHandle.style.width = '20px';
resizeHandle.style.height = '20px';
resizeHandle.style.width = '24px';
resizeHandle.style.height = '24px';
resizeHandle.style.cursor = 'nwse-resize';
resizeHandle.style.background = 'linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.5) 50%)';
resizeHandle.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.8) 100%)';
resizeHandle.style.borderRadius = '0 0 8px 0';
resizeHandle.style.zIndex = '10000';
resizeHandle.style.borderRight = '3px solid rgba(0, 123, 255, 0.7)';
resizeHandle.style.borderBottom = '3px solid rgba(0, 123, 255, 0.7)';
resizeHandle.style.boxShadow = 'inset -2px -2px 4px rgba(0,0,0,0.1), 0 0 8px rgba(0, 123, 255, 0.2)';
resizeHandle.style.opacity = '0';
resizeHandle.style.transition = 'opacity 0.2s ease';
resizeHandle.title = '拖拽调整大小';
container.appendChild(resizeHandle);
}
container.onmousedown = (e) => {
container.addEventListener('mouseenter', () => {
resizeHandle.style.opacity = '1';
});
container.addEventListener('mouseleave', () => {
if (!isResizing) {
resizeHandle.style.opacity = '0';
}
});
const onContainerMouseDown = (e) => {
if (e.target === resizeHandle || resizeHandle.contains(e.target)) return;
isDragging = true;
startX = e.clientX;
startY = e.clientY;
const rect = container.getBoundingClientRect();
startRight = window.innerWidth - rect.right;
startBottom = window.innerHeight - rect.bottom;
startLeft = rect.left;
startTop = rect.top;
e.preventDefault();
e.stopPropagation();
container.style.borderColor = 'rgba(0, 123, 255, 0.6)';
container.style.boxShadow = '0 4px 12px rgba(0, 123, 255, 0.3)';
};
resizeHandle.onmousedown = (e) => {
const onResizeHandleMouseDown = (e) => {
isResizing = true;
startX = e.clientX;
startY = e.clientY;
@@ -428,17 +426,20 @@ function initCaptionDragAndResize(container) {
startHeight = container.offsetHeight;
e.preventDefault();
e.stopPropagation();
container.style.borderColor = 'rgba(0, 123, 255, 0.8)';
container.style.boxShadow = '0 4px 12px rgba(0, 123, 255, 0.4)';
};
document.onmousemove = (e) => {
const onMouseMove = (e) => {
if (!isDragging && !isResizing) return;
e.preventDefault();
if (isDragging) {
const dx = e.clientX - startX;
const dy = e.clientY - startY;
container.style.right = `${startRight - dx}px`;
container.style.bottom = `${startBottom + dy}px`;
container.style.left = `${startLeft + dx}px`;
container.style.top = `${startTop + dy}px`;
}
if (isResizing) {
const dx = e.clientX - startX;
@@ -451,11 +452,21 @@ function initCaptionDragAndResize(container) {
}
};
document.onmouseup = () => {
const onMouseUp = () => {
if (isDragging || isResizing) {
container.style.borderColor = 'transparent';
container.style.boxShadow = 'none';
resizeHandle.style.opacity = '0';
}
isDragging = false;
isResizing = false;
};
container.addEventListener('mousedown', onContainerMouseDown);
resizeHandle.addEventListener('mousedown', onResizeHandleMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
logger.info('字幕容器拖拽和缩放已启用');
}