From 7ddec0fb4f5140c2e95137069579e1948dd48120 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex@example.com>
Date: Thu, 30 Oct 2025 11:48:15 +0800
Subject: [PATCH] refactor: move checkpoint management to separate modal window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 static/db_admin.html | 167 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 138 insertions(+), 29 deletions(-)

diff --git a/static/db_admin.html b/static/db_admin.html
index f0aab66..92397c2 100644
--- a/static/db_admin.html
+++ b/static/db_admin.html
@@ -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>
+
+        <!-- 检查点管理按钮 -->
+        <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()">&times;</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}`);
                 }