fix: add progress indicator for checkpoint restore operation
Issue: - Restore operation lacked visual feedback during long-running process - Users couldn't tell if restore was in progress or completed - No indication of which checkpoint was being restored Solution: - Added dedicated progress modal that appears immediately after clicking "恢复" - Progress modal displays: * Large spinning loader animation * Clear "正在恢复检查点..." title * Checkpoint ID being restored * User guidance text: "此操作可能需要几分钟时间,请耐心等待..." Benefits: - Users clearly see restore operation is in progress - Modal blocks interaction until operation completes - Provides checkpoint ID for confirmation - Improves user confidence during long operations This ensures users understand the system is working and prevents confusion. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
85440d4fe6
commit
22207fcbbb
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1430,14 +1430,20 @@
|
|||
async function restoreCheckpoint(checkpointId) {
|
||||
closeDangerModal();
|
||||
|
||||
// 显示恢复进度模态框
|
||||
showRestoreProgressModal(checkpointId);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/fs-ai-asistant/api/workflow/lawrisk/admin/checkpoints/${checkpointId}/restore`, {
|
||||
method: 'POST'
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// 关闭进度模态框
|
||||
closeRestoreProgressModal();
|
||||
|
||||
if (data.success) {
|
||||
// 使用定时器延迟alert,确保modal已关闭
|
||||
// 显示成功消息
|
||||
setTimeout(() => {
|
||||
alert(`✅ 检查点恢复成功!\n\n恢复了 ${data.data.total_rows_restored} 行数据,覆盖了 ${data.data.tables_restored} 个表。`);
|
||||
}, 100);
|
||||
|
|
@ -1448,12 +1454,44 @@
|
|||
}, 100);
|
||||
}
|
||||
} catch (error) {
|
||||
closeRestoreProgressModal();
|
||||
setTimeout(() => {
|
||||
alert(`❌ 网络错误:${error.message}`);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示恢复进度模态框
|
||||
function showRestoreProgressModal(checkpointId) {
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'restoreProgressModal';
|
||||
modal.className = 'modal show';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content" style="max-width: 450px; text-align: center; padding: 40px;">
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div class="loading" style="width: 50px; height: 50px; border-width: 4px; margin: 0 auto;"></div>
|
||||
</div>
|
||||
<h3 style="color: #333; margin-bottom: 15px;">正在恢复检查点...</h3>
|
||||
<p style="color: #666; font-size: 14px; line-height: 1.6;">
|
||||
正在从备份恢复数据库<br>
|
||||
<strong>${checkpointId}</strong><br>
|
||||
<span style="color: #999; font-size: 12px; margin-top: 10px; display: block;">
|
||||
此操作可能需要几分钟时间,请耐心等待...
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
// 关闭恢复进度模态框
|
||||
function closeRestoreProgressModal() {
|
||||
const modal = document.getElementById('restoreProgressModal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 删除检查点
|
||||
async function deleteCheckpoint(checkpointId) {
|
||||
if (!confirm(`确定要删除检查点 "${checkpointId}" 吗?此操作无法撤销。`)) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue