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

移除字幕面板中不必要的尺寸和位置配置项，仅保留字体大小设置
重构拖拽和调整大小功能，改进视觉效果和交互体验

frontend/index.html

@@ -78,26 +78,10 @@
             <button class="panel-close" data-panel="captionPanel">×</button>
         </div>
         <div class="panel-content">
-            <div class="form-group">
-                <label for="captionWidth">宽度 (px)</label>
-                <input type="number" id="captionWidth" value="400" min="200" max="800">
-            </div>
-            <div class="form-group">
-                <label for="captionHeight">高度 (px)</label>
-                <input type="number" id="captionHeight" value="200" min="100" max="600">
-            </div>
             <div class="form-group">
                 <label for="captionFontSize">字体大小 (px)</label>
                 <input type="number" id="captionFontSize" value="16" min="12" max="32">
             </div>
-            <div class="form-group">
-                <label for="captionRight">距右侧距离 (px)</label>
-                <input type="number" id="captionRight" value="20" min="0" max="100">
-            </div>
-            <div class="form-group">
-                <label for="captionBottom">距底部距离 (px)</label>
-                <input type="number" id="captionBottom" value="20" min="0" max="200">
-            </div>
             <button id="applyCaptionStyleBtn" class="btn btn-primary" style="width: 100%; margin-top: 16px;">应用样式</button>
         </div>
     </div>

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('字幕样式已应用', { fontSize });
-
-    logger.info('字幕容器样式已应用', { width, height, fontSize, right, bottom });
 }
 
 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.width = '24px';
-        resizeHandle.style.height = '20px';
+        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;
+        startLeft = rect.left;
-        startBottom = window.innerHeight - rect.bottom;
+        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.left = `${startLeft + dx}px`;
-            container.style.bottom = `${startBottom + dy}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('字幕容器拖拽和缩放已启用');
 }