From 06cd0279947958109cb883cd91e104853173230a Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Thu, 7 May 2026 08:59:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=AD=97=E5=B9=95):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=AD=97=E5=B9=95=E5=AE=B9=E5=99=A8=E4=BD=8D=E7=BD=AE=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E7=9A=84=E4=BF=9D=E5=AD=98=E4=B8=8E=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增字幕容器位置尺寸的持久化功能，包括保存、加载和应用位置尺寸数据。在拖拽和调整大小操作后自动保存位置信息，并在初始化时恢复上次保存的位置设置。
---
 frontend/scripts/main.js | 56 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js
index 01a9241..466ab74 100644
--- a/frontend/scripts/main.js
+++ b/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('已清除保存的字幕样式，使用全新默认设置');
                 }