feat: 详情弹框添加JavaScript拖拽缩放功能

xian_favor/api.py

@@ -1235,17 +1235,29 @@ INDEX_TEMPLATE = '''
             position: relative;
         }
         #detailModal .modal-dialog {
-            max-width: 800px;
+            max-width: 900px;
             min-width: 400px;
-            width: 80%;
+            width: 85%;
             margin: 10px auto;
-            resize: both;
-            overflow: auto;
         }
         #detailModal .modal-content {
             height: calc(100vh - 20px);
             max-height: calc(100vh - 20px);
         }
+        /* 拖拽调整大小的角 */
+        .modal-resize-handle {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 20px;
+            height: 20px;
+            cursor: nwse-resize;
+            background: linear-gradient(135deg, transparent 50%, #ccc 50%);
+            z-index: 1000;
+        }
+        .modal-resize-handle:hover {
+            background: linear-gradient(135deg, transparent 50%, #0d6efd 50%);
+        }
         .detail-nav-buttons {
             position: absolute;
             right: 15px;
@@ -1570,7 +1582,7 @@ INDEX_TEMPLATE = '''
 
 <!-- 详情模态框 -->
 <div class="modal fade" id="detailModal" tabindex="-1">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg" id="detailModalDialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title"><span id="detailTypeIcon"></span> <span id="detailTitle"></span></h5>
@@ -1599,6 +1611,8 @@ INDEX_TEMPLATE = '''
                 </button>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
             </div>
+            <!-- 拖拽调整大小的角 -->
+            <div class="modal-resize-handle" id="detailModalResizeHandle"></div>
         </div>
     </div>
 </div>
@@ -2281,6 +2295,38 @@ document.addEventListener('DOMContentLoaded', async () => {
         loadFolderSelect(e.target.value, 'editFolder');
     });
     
+    // 详情弹框拖拽调整大小
+    const resizeHandle = document.getElementById('detailModalResizeHandle');
+    const resizeDialog = document.getElementById('detailModalDialog');
+    
+    if (resizeHandle && resizeDialog) {
+        resizeHandle.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            resizeStartX = e.clientX;
+            resizeStartY = e.clientY;
+            resizeStartWidth = resizeDialog.offsetWidth;
+            resizeStartHeight = resizeDialog.offsetHeight;
+            e.preventDefault();
+        });
+        
+        document.addEventListener('mousemove', (e) => {
+            if (!isResizing) return;
+            
+            const deltaX = e.clientX - resizeStartX;
+            const deltaY = e.clientY - resizeStartY;
+            
+            const newWidth = Math.max(400, resizeStartWidth + deltaX);
+            const newHeight = Math.max(200, resizeStartHeight + deltaY);
+            
+            resizeDialog.style.width = newWidth + 'px';
+            resizeDialog.querySelector('.modal-content').style.height = Math.min(newHeight, window.innerHeight - 20) + 'px';
+        });
+        
+        document.addEventListener('mouseup', () => {
+            isResizing = false;
+        });
+    }
+    
     // 搜索 - 直接绑定，不用 debounce
     let searchTimer;
     document.getElementById('searchInput').addEventListener('input', (e) => {
@@ -3326,6 +3372,10 @@ function scrollDetailToBottom() {
     }
 }
 
+// 弹框拖拽调整大小变量
+let isResizing = false;
+let resizeStartX, resizeStartY, resizeStartWidth, resizeStartHeight;
+
 // 从详情页打开编辑
 function openEditModalFromDetail() {
     bootstrap.Modal.getInstance(document.getElementById('detailModal')).hide();