feat(字幕): 添加字幕容器位置尺寸的保存与加载功能

新增字幕容器位置尺寸的持久化功能，包括保存、加载和应用位置尺寸数据。在拖拽和调整大小操作后自动保存位置信息，并在初始化时恢复上次保存的位置设置。

frontend/scripts/main.js

@@ -771,6 +771,57 @@ function hexToRgba(hex, alpha) {
 }
 
 const CAPTION_STYLE_KEY = 'captionStyleSettings';
+const CAPTION_POSITION_KEY = 'captionPositionSize';
+
+function saveCaptionPositionSize() {
+    const captionContainer = document.querySelector('.caption-container-hub');
+    if (!captionContainer) return;
+
+    const positionData = {
+        left: captionContainer.style.left || 'auto',
+        top: captionContainer.style.top || 'auto',
+        width: captionContainer.style.width || '',
+        height: captionContainer.style.height || '',
+        maxHeight: captionContainer.style.maxHeight || ''
+    };
+    localStorage.setItem(CAPTION_POSITION_KEY, JSON.stringify(positionData));
+    logger.info('字幕容器位置尺寸已保存');
+}
+
+function loadCaptionPositionSize() {
+    const savedData = localStorage.getItem(CAPTION_POSITION_KEY);
+    if (!savedData) return null;
+    try {
+        return JSON.parse(savedData);
+    } catch (e) {
+        logger.error('加载字幕容器位置尺寸失败', e.message);
+        return null;
+    }
+}
+
+function applyCaptionPositionSize(positionData) {
+    const captionContainer = document.querySelector('.caption-container-hub');
+    if (!captionContainer || !positionData) return;
+
+    if (positionData.left && positionData.left !== 'auto') {
+        captionContainer.style.left = positionData.left;
+        captionContainer.style.right = 'auto';
+    }
+    if (positionData.top && positionData.top !== 'auto') {
+        captionContainer.style.top = positionData.top;
+        captionContainer.style.bottom = 'auto';
+    }
+    if (positionData.width) {
+        captionContainer.style.width = positionData.width;
+    }
+    if (positionData.height) {
+        captionContainer.style.height = positionData.height;
+    }
+    if (positionData.maxHeight) {
+        captionContainer.style.maxHeight = positionData.maxHeight;
+    }
+    logger.info('字幕容器位置尺寸已应用');
+}
 
 function saveCaptionStyleToStorage() {
     const styleData = {
@@ -1109,6 +1160,7 @@ function initCaptionDragAndResize(container) {
             container.style.borderColor = 'transparent';
             container.style.boxShadow = 'none';
             resizeHandle.style.opacity = '0';
+            saveCaptionPositionSize();
         }
         isDragging = false;
         isResizing = false;
@@ -1139,6 +1191,7 @@ function watchCaptionContainer() {
                     captionContainer.style.zIndex = '9999';
                     initCaptionDragAndResize(captionContainer);
                     loadCaptionStyleFromContainer();
+                    applyCaptionPositionSize(loadCaptionPositionSize());
                     if (captionStyleApplied) {
                         setTimeout(applyCaptionStyle, 100);
                     }
@@ -1242,6 +1295,7 @@ function bindEvents() {
     elements.applyCaptionStyleBtn.addEventListener('click', () => {
         applyCaptionStyle();
         saveCaptionStyleToStorage();
+        saveCaptionPositionSize();
         captionStyleApplied = true;
         watchCaptionContentChanges();
     });
@@ -1293,6 +1347,7 @@ function bindEvents() {
                     if (savedData) {
                         applySavedCaptionStyle(savedData);
                         applyCaptionStyle();
+                        applyCaptionPositionSize(loadCaptionPositionSize());
                         captionStyleApplied = true;
                         watchCaptionContentChanges();
                         logger.info('已应用保存的字幕样式');
@@ -1300,6 +1355,7 @@ function bindEvents() {
                 } else {
                     loadCaptionStyleFromContainer();
                     localStorage.removeItem(CAPTION_STYLE_KEY);
+                    localStorage.removeItem(CAPTION_POSITION_KEY);
                     captionStyleApplied = false;
                     logger.info('已清除保存的字幕样式，使用全新默认设置');
                 }