feat: 编辑和新增弹框优化 - 导航按钮、固定底部、拖拽缩放、大尺寸

xian_favor/api.py

@@ -1267,6 +1267,32 @@ INDEX_TEMPLATE = '''
             display: flex;
             align-items: center;
         }
+        /* 编辑和新增弹框样式 */
+        #addModal .modal-dialog, #editModal .modal-dialog {
+            max-width: 95vw;
+            min-width: 400px;
+            width: 800px;
+            margin: 10px auto;
+        }
+        #addModal .modal-content, #editModal .modal-content {
+            height: calc(100vh - 20px);
+            max-height: calc(100vh - 20px);
+        }
+        .add-modal-body, .edit-modal-body {
+            max-height: calc(100vh - 150px);
+            overflow-y: auto;
+            padding: 15px;
+        }
+        .add-modal-footer, .edit-modal-footer {
+            position: sticky;
+            bottom: 0;
+            background: #fff;
+            border-top: 1px solid #dee2e6;
+            z-index: 10;
+            padding: 10px 15px;
+            display: flex;
+            align-items: center;
+        }
         .star-btn { font-size: 11px; }
         .status-pending { color: #ffc107; }
         .status-in_progress { color: #17a2b8; }
@@ -1478,7 +1504,7 @@ INDEX_TEMPLATE = '''
 
 <!-- 添加模态框 -->
 <div class="modal fade" id="addModal" tabindex="-1">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg" id="addModalDialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">
@@ -1488,7 +1514,7 @@ INDEX_TEMPLATE = '''
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body add-modal-body">
                 <form id="addForm">
                     <input type="hidden" id="addType" value="text">
                     <div class="mb-3">
@@ -1558,10 +1584,21 @@ INDEX_TEMPLATE = '''
                     </div>
                 </form>
             </div>
-            <div class="modal-footer">
+            <div class="modal-footer add-modal-footer">
+                <!-- 左侧导航按钮 -->
+                <div class="me-auto">
+                    <button class="btn btn-sm btn-outline-secondary me-2" onclick="scrollAddToTop()" title="回到顶部">
+                        <i class="bi bi-arrow-up"></i>
+                    </button>
+                    <button class="btn btn-sm btn-outline-secondary me-2" onclick="scrollAddToBottom()" title="去到底部">
+                        <i class="bi bi-arrow-down"></i>
+                    </button>
+                </div>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                 <button type="button" class="btn btn-primary" onclick="addItem()">添加</button>
             </div>
+            <!-- 拖拽调整大小的角 -->
+            <div class="modal-resize-handle" id="addModalResizeHandle"></div>
         </div>
     </div>
 </div>
@@ -1605,13 +1642,13 @@ INDEX_TEMPLATE = '''
 
 <!-- 编辑模态框 -->
 <div class="modal fade" id="editModal" tabindex="-1">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg" id="editModalDialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">编辑条目</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body edit-modal-body">
                 <form id="editForm">
                     <input type="hidden" id="editId">
                     <div class="mb-3">
@@ -1689,10 +1726,21 @@ INDEX_TEMPLATE = '''
                     </div>
                 </form>
             </div>
-            <div class="modal-footer">
+            <div class="modal-footer edit-modal-footer">
+                <!-- 左侧导航按钮 -->
+                <div class="me-auto">
+                    <button class="btn btn-sm btn-outline-secondary me-2" onclick="scrollEditToTop()" title="回到顶部">
+                        <i class="bi bi-arrow-up"></i>
+                    </button>
+                    <button class="btn btn-sm btn-outline-secondary me-2" onclick="scrollEditToBottom()" title="去到底部">
+                        <i class="bi bi-arrow-down"></i>
+                    </button>
+                </div>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                 <button type="button" class="btn btn-primary" onclick="saveEdit()">保存</button>
             </div>
+            <!-- 拖拽调整大小的角 -->
+            <div class="modal-resize-handle" id="editModalResizeHandle"></div>
         </div>
     </div>
 </div>
@@ -2313,6 +2361,70 @@ document.addEventListener('DOMContentLoaded', async () => {
         });
     }
     
+    // 新增弹框拖拽调整大小
+    const addResizeHandle = document.getElementById('addModalResizeHandle');
+    const addResizeDialog = document.getElementById('addModalDialog');
+    
+    if (addResizeHandle && addResizeDialog) {
+        addResizeHandle.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            resizeStartX = e.clientX;
+            resizeStartY = e.clientY;
+            resizeStartWidth = addResizeDialog.offsetWidth;
+            resizeStartHeight = addResizeDialog.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);
+            
+            addResizeDialog.style.width = newWidth + 'px';
+            addResizeDialog.querySelector('.modal-content').style.height = Math.min(newHeight, window.innerHeight - 20) + 'px';
+        });
+        
+        document.addEventListener('mouseup', () => {
+            isResizing = false;
+        });
+    }
+    
+    // 编辑弹框拖拽调整大小
+    const editResizeHandle = document.getElementById('editModalResizeHandle');
+    const editResizeDialog = document.getElementById('editModalDialog');
+    
+    if (editResizeHandle && editResizeDialog) {
+        editResizeHandle.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            resizeStartX = e.clientX;
+            resizeStartY = e.clientY;
+            resizeStartWidth = editResizeDialog.offsetWidth;
+            resizeStartHeight = editResizeDialog.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);
+            
+            editResizeDialog.style.width = newWidth + 'px';
+            editResizeDialog.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) => {
@@ -3358,6 +3470,36 @@ function scrollDetailToBottom() {
     }
 }
 
+// 新增弹框导航
+function scrollAddToTop() {
+    const modalBody = document.querySelector('.add-modal-body');
+    if (modalBody) {
+        modalBody.scrollTop = 0;
+    }
+}
+
+function scrollAddToBottom() {
+    const modalBody = document.querySelector('.add-modal-body');
+    if (modalBody) {
+        modalBody.scrollTop = modalBody.scrollHeight;
+    }
+}
+
+// 编辑弹框导航
+function scrollEditToTop() {
+    const modalBody = document.querySelector('.edit-modal-body');
+    if (modalBody) {
+        modalBody.scrollTop = 0;
+    }
+}
+
+function scrollEditToBottom() {
+    const modalBody = document.querySelector('.edit-modal-body');
+    if (modalBody) {
+        modalBody.scrollTop = modalBody.scrollHeight;
+    }
+}
+
 // 弹框拖拽调整大小变量
 let isResizing = false;
 let resizeStartX, resizeStartY, resizeStartWidth, resizeStartHeight;