refactor: move checkpoint management to separate modal window
Changes: - Removed checkpoint from main workflow (step 5) - Added standalone "检查点管理" button in top toolbar - Created dedicated modal window for checkpoint management - Updated UI to be more user-friendly and separate concerns Benefits: - Checkpoint management is now a standalone feature - Doesn't interfere with the main database maintenance flow - Modal window provides better focused interface - Users can access checkpoints anytime without losing their place in the workflow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Codex Agent
parent
9530eabac8
commit
7ddec0fb4f
|
|
@ -517,6 +517,88 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkpoint-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.checkpoint-toolbar .btn {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.checkpoint-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.checkpoint-modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checkpoint-modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
animation: modalFadeIn 0.3s;
|
||||
}
|
||||
|
||||
.checkpoint-modal-header {
|
||||
padding: 20px 30px;
|
||||
border-bottom: 2px solid #667eea;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkpoint-modal-header h2 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkpoint-modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.checkpoint-modal-close:hover {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.checkpoint-modal-body {
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.details-area {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
|
|
@ -710,11 +792,13 @@
|
|||
<div class="step-number">4</div>
|
||||
<div class="step-label">查看详情</div>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step" id="step5">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-label">检查点</div>
|
||||
</div>
|
||||
|
||||
<!-- 检查点管理按钮 -->
|
||||
<div class="checkpoint-toolbar">
|
||||
<button class="btn btn-warning" onclick="openCheckpointModal()">
|
||||
<span>🔒</span> 检查点管理
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="content-area">
|
||||
|
|
@ -727,12 +811,7 @@
|
|||
</h2>
|
||||
<div class="breadcrumb" id="breadcrumb"></div>
|
||||
<div class="selection-area">
|
||||
<div id="navList" class="item-list">
|
||||
<li onclick="quickJump(5)" class="checkpoint-nav-item">
|
||||
<span class="item-name">🔒 检查点管理</span>
|
||||
<span class="item-count">备份/恢复</span>
|
||||
</li>
|
||||
</div>
|
||||
<div id="navList" class="item-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -768,9 +847,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 检查点管理模态窗口 -->
|
||||
<div class="checkpoint-modal" id="checkpointModal">
|
||||
<div class="checkpoint-modal-content">
|
||||
<div class="checkpoint-modal-header">
|
||||
<h2>🔒 数据库检查点管理</h2>
|
||||
<button class="checkpoint-modal-close" onclick="closeCheckpointModal()">×</button>
|
||||
</div>
|
||||
<div class="checkpoint-modal-body" id="checkpointModalBody">
|
||||
<!-- 检查点管理内容将在这里动态加载 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 导航状态管理
|
||||
let currentStep = 1; // 1=区域, 2=主题, 3=许可, 4=详情, 5=检查点
|
||||
let currentStep = 1; // 1=区域, 2=主题, 3=许可, 4=详情
|
||||
let historyStack = []; // 历史记录栈
|
||||
let currentRegion = null;
|
||||
let currentTheme = null;
|
||||
|
|
@ -782,8 +874,7 @@
|
|||
1: { title: '选择区域', loadData: loadRegions },
|
||||
2: { title: '选择主题', loadData: (region) => loadThemes(region.id, region.name) },
|
||||
3: { title: '选择许可', loadData: (theme) => loadPermits(theme.id, theme.name) },
|
||||
4: { title: '许可详情', loadData: null },
|
||||
5: { title: '检查点管理', loadData: loadCheckpoints }
|
||||
4: { title: '许可详情', loadData: null }
|
||||
};
|
||||
|
||||
// 加载地区列表
|
||||
|
|
@ -968,8 +1059,6 @@
|
|||
await loadPermits(currentTheme.id, currentTheme.name);
|
||||
} else if (step === 4) {
|
||||
await showPermitDetails();
|
||||
} else if (step === 5) {
|
||||
await loadCheckpoints();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1162,7 +1251,7 @@
|
|||
|
||||
// 更新步骤指示器
|
||||
function updateStepIndicator(step) {
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const stepElement = document.getElementById(`step${i}`);
|
||||
if (i <= step) {
|
||||
stepElement.classList.add('active');
|
||||
|
|
@ -1174,10 +1263,12 @@
|
|||
|
||||
// ================ 检查点管理功能 ================
|
||||
|
||||
// 加载检查点列表
|
||||
async function loadCheckpoints() {
|
||||
const detailsArea = document.getElementById('detailsArea');
|
||||
detailsArea.innerHTML = '<div class="loading"></div>加载检查点列表...';
|
||||
// 打开检查点模态窗口
|
||||
async function openCheckpointModal() {
|
||||
const modal = document.getElementById('checkpointModal');
|
||||
const modalBody = document.getElementById('checkpointModalBody');
|
||||
modalBody.innerHTML = '<div class="loading"></div>加载检查点列表...';
|
||||
modal.classList.add('show');
|
||||
|
||||
try {
|
||||
const response = await fetch('/fs-ai-asistant/api/workflow/lawrisk/admin/checkpoints');
|
||||
|
|
@ -1186,17 +1277,35 @@
|
|||
if (data.success) {
|
||||
renderCheckpointManager(data.data.checkpoints);
|
||||
} else {
|
||||
detailsArea.innerHTML = `<div class="error">加载检查点失败：${data.message}</div>`;
|
||||
modalBody.innerHTML = `<div class="error">加载检查点失败：${data.message}</div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
detailsArea.innerHTML = `<div class="error">网络错误：${error.message}</div>`;
|
||||
modalBody.innerHTML = `<div class="error">网络错误：${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭检查点模态窗口
|
||||
function closeCheckpointModal() {
|
||||
const modal = document.getElementById('checkpointModal');
|
||||
modal.classList.remove('show');
|
||||
}
|
||||
|
||||
// 点击模态窗口外部关闭
|
||||
document.getElementById('checkpointModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeCheckpointModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 加载检查点列表（保持兼容性）
|
||||
async function loadCheckpoints() {
|
||||
await openCheckpointModal();
|
||||
}
|
||||
|
||||
// 渲染检查点管理界面
|
||||
function renderCheckpointManager(checkpoints) {
|
||||
const detailsArea = document.getElementById('detailsArea');
|
||||
let html = '<div class="details-content">';
|
||||
const modalBody = document.getElementById('checkpointModalBody');
|
||||
let html = '<div class="checkpoint-content">';
|
||||
|
||||
// 创建检查点表单
|
||||
html += `
|
||||
|
|
@ -1252,7 +1361,7 @@
|
|||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
detailsArea.innerHTML = html;
|
||||
modalBody.innerHTML = html;
|
||||
}
|
||||
|
||||
// 创建检查点
|
||||
|
|
@ -1276,7 +1385,7 @@
|
|||
if (data.success) {
|
||||
alert('检查点创建成功！');
|
||||
document.getElementById('checkpointDescription').value = '';
|
||||
await loadCheckpoints();
|
||||
await openCheckpointModal();
|
||||
} else {
|
||||
alert(`创建失败：${data.message}`);
|
||||
}
|
||||
|
|
@ -1310,7 +1419,7 @@
|
|||
|
||||
if (data.success) {
|
||||
alert(`检查点恢复成功！\n恢复了 ${data.data.total_rows_restored} 行数据，覆盖了 ${data.data.tables_restored} 个表。`);
|
||||
await loadCheckpoints();
|
||||
await openCheckpointModal();
|
||||
} else {
|
||||
alert(`恢复失败：${data.message}`);
|
||||
}
|
||||
|
|
@ -1333,7 +1442,7 @@
|
|||
|
||||
if (data.success) {
|
||||
alert('检查点已删除');
|
||||
await loadCheckpoints();
|
||||
await openCheckpointModal();
|
||||
} else {
|
||||
alert(`删除失败：${data.message}`);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue