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:
Codex Agent 2025-10-30 13:52:19 +08:00
parent 85440d4fe6
commit 22207fcbbb
3 changed files with 20045 additions and 1 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1430,14 +1430,20 @@
async function restoreCheckpoint(checkpointId) { async function restoreCheckpoint(checkpointId) {
closeDangerModal(); closeDangerModal();
// 显示恢复进度模态框
showRestoreProgressModal(checkpointId);
try { try {
const response = await fetch(`/fs-ai-asistant/api/workflow/lawrisk/admin/checkpoints/${checkpointId}/restore`, { const response = await fetch(`/fs-ai-asistant/api/workflow/lawrisk/admin/checkpoints/${checkpointId}/restore`, {
method: 'POST' method: 'POST'
}); });
const data = await response.json(); const data = await response.json();
// 关闭进度模态框
closeRestoreProgressModal();
if (data.success) { if (data.success) {
// 使用定时器延迟alert确保modal已关闭 // 显示成功消息
setTimeout(() => { setTimeout(() => {
alert(`✅ 检查点恢复成功!\n\n恢复了 ${data.data.total_rows_restored} 行数据,覆盖了 ${data.data.tables_restored} 个表。`); alert(`✅ 检查点恢复成功!\n\n恢复了 ${data.data.total_rows_restored} 行数据,覆盖了 ${data.data.tables_restored} 个表。`);
}, 100); }, 100);
@ -1448,12 +1454,44 @@
}, 100); }, 100);
} }
} catch (error) { } catch (error) {
closeRestoreProgressModal();
setTimeout(() => { setTimeout(() => {
alert(`❌ 网络错误:${error.message}`); alert(`❌ 网络错误:${error.message}`);
}, 100); }, 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) { async function deleteCheckpoint(checkpointId) {
if (!confirm(`确定要删除检查点 "${checkpointId}" 吗?此操作无法撤销。`)) { if (!confirm(`确定要删除检查点 "${checkpointId}" 吗?此操作无法撤销。`)) {