coder/xian-favor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hubian
2026-04-22 22:47:59 +08:00
parent cc54fd52c6
commit ef822d0eba
1 changed files with 148 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
xian_favor/api.py
View File

@@ -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;