From 03c8db88269d917b507628fa687f0e0ff9fbea78 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Thu, 7 May 2026 08:46:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=9D=A2=E6=9D=BF):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E6=B5=AE=E5=8A=A8=E9=9D=A2=E6=9D=BF=E6=8B=96=E6=8B=BD=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加面板拖拽功能，允许用户通过标题栏拖动面板。重构面板样式，移除固定位置属性，改为居中显示并支持动态调整。同时添加语言面板状态管理，优化面板动画效果。
---
 frontend/scripts/main.js | 57 ++++++++++++++++++++++++++++++++++++++++
 frontend/styles/main.css | 22 +++++++---------
 2 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js
index a1c5e92..ada4933 100644
--- a/frontend/scripts/main.js
+++ b/frontend/scripts/main.js
@@ -121,9 +121,65 @@ const fullscreenState = {
 const panelState = {
     configPanel: false,
     captionPanel: false,
+    languagePanel: false,
     logPanel: false
 };
 
+let panelDragState = {
+    isDragging: false,
+    currentPanel: null,
+    offsetX: 0,
+    offsetY: 0,
+    originalHeight: null
+};
+
+function initPanelDrag() {
+    document.querySelectorAll('.floating-panel').forEach(panel => {
+        const header = panel.querySelector('.panel-header');
+        if (!header) return;
+
+        header.style.cursor = 'move';
+
+        header.addEventListener('mousedown', (e) => {
+            if (e.target.tagName === 'BUTTON') return;
+
+            panelDragState.isDragging = true;
+            panelDragState.currentPanel = panel;
+
+            const rect = panel.getBoundingClientRect();
+            panelDragState.offsetX = e.clientX - rect.left;
+            panelDragState.offsetY = e.clientY - rect.top;
+            panelDragState.originalHeight = panel.offsetHeight;
+
+            panel.style.transform = 'none';
+            panel.style.height = panelDragState.originalHeight + 'px';
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (!panelDragState.isDragging || !panelDragState.currentPanel) return;
+
+            const x = e.clientX - panelDragState.offsetX;
+            const y = e.clientY - panelDragState.offsetY;
+
+            const maxX = window.innerWidth - panelDragState.currentPanel.offsetWidth;
+            const maxY = window.innerHeight - panelDragState.currentPanel.offsetHeight;
+
+            panelDragState.currentPanel.style.left = Math.max(0, Math.min(x, maxX)) + 'px';
+            panelDragState.currentPanel.style.top = Math.max(0, Math.min(y, maxY)) + 'px';
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (panelDragState.isDragging) {
+                panelDragState.isDragging = false;
+                if (panelDragState.currentPanel) {
+                    panelDragState.currentPanel.style.height = '';
+                }
+                panelDragState.currentPanel = null;
+            }
+        });
+    });
+}
+
 const logger = {
     log(level, message, data = null) {
         const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
@@ -1248,6 +1304,7 @@ function init() {
     bindEvents();
     updateUIState();
     initScaling();
+    initPanelDrag();
     watchCaptionContainer();
 }
 
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 054411a..f606528 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -182,26 +182,28 @@ body {
     z-index: 999;
     display: none;
     flex-direction: column;
-    max-height: 80vh;
     overflow: hidden;
     animation: panelSlideIn 0.2s ease-out;
 }
 
+.floating-panel.visible {
+    display: flex;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 @keyframes panelSlideIn {
     from {
         opacity: 0;
-        transform: translateY(10px);
+        transform: translate(-50%, -50%) translateY(10px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: translate(-50%, -50%) translateY(0);
     }
 }
 
-.floating-panel.visible {
-    display: flex;
-}
-
 .panel-header {
     display: flex;
     justify-content: space-between;
@@ -246,10 +248,8 @@ body {
 
 /* ===== 连接配置面板 ===== */
 .config-panel {
-    bottom: calc(var(--spacing-xl) + 60px);
     right: var(--spacing-xl);
     width: 360px;
-    max-height: 70vh;
 }
 
 .config-section {
@@ -338,6 +338,7 @@ body {
     bottom: calc(var(--spacing-xl) + 60px);
     right: var(--spacing-xl);
     width: 320px;
+    max-height: 90vh;
 }
 
 .caption-style-section {
@@ -364,7 +365,6 @@ body {
 
 /* ===== 语言切换面板 ===== */
 .language-panel {
-    bottom: calc(var(--spacing-xl) + 60px);
     right: var(--spacing-xl);
     width: 280px;
 }
@@ -408,10 +408,8 @@ body {
 
 /* ===== 日志面板 ===== */
 .log-panel {
-    bottom: calc(var(--spacing-xl) + 60px);
     right: var(--spacing-xl);
     width: 450px;
-    max-height: 60vh;
 }
 
 .log-toolbar {