From 93d13c8cb2872aab574c1c5ac172ed4f2edfeed5 Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Wed, 6 May 2026 14:48:42 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E5=AD=97=E5=B9=95=E9=9D=A2=E6=9D=BF):?= =?UTF-8?q?=20=E7=AE=80=E5=8C=96=E5=AD=97=E5=B9=95=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=B9=B6=E6=94=B9=E8=BF=9B=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除字幕面板中不必要的尺寸和位置配置项，仅保留字体大小设置 重构拖拽和调整大小功能，改进视觉效果和交互体验 --- frontend/index.html | 16 -------- frontend/scripts/main.js | 81 +++++++++++++++++++++++----------------- 2 files changed, 46 insertions(+), 51 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 8ad0f76..60b5865 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -78,26 +78,10 @@
-
- - -
-
- - -
-
- - -
-
- - -
diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js index 088ac28..731a512 100644 --- a/frontend/scripts/main.js +++ b/frontend/scripts/main.js @@ -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('字幕容器拖拽和缩放已启用'); }