From d72512300257ae2714d84a595ffa62eed52822b3 Mon Sep 17 00:00:00 2001
From: K-hermes <K-hermes@qq.com>
Date: Sat, 15 Aug 2026 12:32:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20Web=20=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2=20UI/UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改进：
- 替换所有原生弹框（alert/prompt/confirm）为自定义 Modal
- 删除操作不再需要二次密码验证，改为确认弹框
- 查看数据使用自定义 Modal，JSON 语法高亮显示
- 添加 Toast 通知替代 alert
- JSON 数据完整展示，支持复制
- 点击遮罩层关闭 Modal
- 更好的用户体验和视觉效果
---
 web/index.html | 335 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 317 insertions(+), 18 deletions(-)

diff --git a/web/index.html b/web/index.html
index af680c2..fec3cb1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -160,6 +160,15 @@
             background: #c82333;
         }
 
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #5a6268;
+        }
+
         .loading {
             text-align: center;
             padding: 40px;
@@ -193,6 +202,162 @@
             box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
         }
 
+        /* Modal 样式 */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            max-width: 90%;
+            max-height: 90vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .modal-header {
+            padding: 20px 30px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-title {
+            font-size: 20px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .modal-close {
+            background: none;
+            border: none;
+            font-size: 28px;
+            color: #999;
+            cursor: pointer;
+            line-height: 1;
+            padding: 0;
+            width: 30px;
+            height: 30px;
+        }
+
+        .modal-close:hover {
+            color: #333;
+        }
+
+        .modal-body {
+            padding: 30px;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        .modal-footer {
+            padding: 20px 30px;
+            border-top: 1px solid #eee;
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        /* JSON 展示样式 */
+        .json-viewer {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 20px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            line-height: 1.6;
+            overflow-x: auto;
+            max-height: 60vh;
+        }
+
+        .json-key {
+            color: #0066cc;
+            font-weight: bold;
+        }
+
+        .json-string {
+            color: #22863a;
+        }
+
+        .json-number {
+            color: #005cc5;
+        }
+
+        .json-boolean {
+            color: #d73a49;
+        }
+
+        .json-null {
+            color: #6f42c1;
+        }
+
+        /* Toast 通知 */
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+            z-index: 2000;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            min-width: 250px;
+            transform: translateX(400px);
+            transition: transform 0.3s;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast-success {
+            border-left: 4px solid #28a745;
+        }
+
+        .toast-error {
+            border-left: 4px solid #dc3545;
+        }
+
+        .toast-icon {
+            font-size: 20px;
+        }
+
+        .toast-message {
+            flex: 1;
+            color: #333;
+        }
+
+        /* 确认对话框 */
+        .confirm-modal .modal {
+            max-width: 450px;
+        }
+
+        .confirm-message {
+            font-size: 16px;
+            color: #333;
+            line-height: 1.6;
+        }
+
         .api-docs {
             background: white;
             border-radius: 12px;
@@ -292,7 +457,100 @@
     <!-- Refresh Button -->
     <button class="refresh-btn" onclick="loadData()" title="刷新">🔄</button>
 
+    <!-- 查看数据 Modal -->
+    <div class="modal-overlay" id="view-modal">
+        <div class="modal" style="width: 900px;">
+            <div class="modal-header">
+                <div class="modal-title" id="view-modal-title">查看数据</div>
+                <button class="modal-close" onclick="closeModal('view-modal')">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="json-viewer" id="json-content"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" onclick="copyJSON()">复制 JSON</button>
+                <button class="btn btn-secondary" onclick="closeModal('view-modal')">关闭</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 确认删除 Modal -->
+    <div class="modal-overlay confirm-modal" id="confirm-modal">
+        <div class="modal">
+            <div class="modal-header">
+                <div class="modal-title">确认删除</div>
+                <button class="modal-close" onclick="closeModal('confirm-modal')">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p class="confirm-message" id="confirm-message"></p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-danger" id="confirm-delete-btn">确认删除</button>
+                <button class="btn btn-secondary" onclick="closeModal('confirm-modal')">取消</button>
+            </div>
+        </div>
+    </div>
+
     <script>
+        let currentViewData = null;
+        let deleteCallback = null;
+
+        // Toast 通知
+        function showToast(message, type = 'success') {
+            const toast = document.createElement('div');
+            toast.className = `toast toast-${type}`;
+            
+            const icon = type === 'success' ? '✅' : '❌';
+            toast.innerHTML = `
+                <div class="toast-icon">${icon}</div>
+                <div class="toast-message">${message}</div>
+            `;
+            
+            document.body.appendChild(toast);
+            
+            setTimeout(() => toast.classList.add('show'), 10);
+            
+            setTimeout(() => {
+                toast.classList.remove('show');
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+
+        // Modal 控制
+        function openModal(modalId) {
+            document.getElementById(modalId).classList.add('active');
+        }
+
+        function closeModal(modalId) {
+            document.getElementById(modalId).classList.remove('active');
+        }
+
+        // JSON 格式化显示
+        function syntaxHighlight(json) {
+            if (typeof json !== 'string') {
+                json = JSON.stringify(json, null, 2);
+            }
+            
+            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            
+            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+                let cls = 'json-number';
+                if (/^"/.test(match)) {
+                    if (/:$/.test(match)) {
+                        cls = 'json-key';
+                    } else {
+                        cls = 'json-string';
+                    }
+                } else if (/true|false/.test(match)) {
+                    cls = 'json-boolean';
+                } else if (/null/.test(match)) {
+                    cls = 'json-null';
+                }
+                return '<span class="' + cls + '">' + match + '</span>';
+            });
+        }
+
+        // 加载数据列表
         async function loadData() {
             try {
                 const response = await fetch('/api/data');
@@ -312,7 +570,7 @@
                 tagArray.forEach(item => {
                     const expiresAt = new Date(item.expires_at);
                     const now = new Date();
-                    const remaining = (expiresAt - now) / 1000 / 3600 / 24; // 天数
+                    const remaining = (expiresAt - now) / 1000 / 3600 / 24;
                     
                     if (remaining < 0) {
                         expiredCount++;
@@ -340,7 +598,7 @@
                     return;
                 }
                 
-                container.innerHTML = tagArray.map((item, index) => {
+                container.innerHTML = tagArray.map((item) => {
                     const statusClass = `status-${item.status}`;
                     const statusText = {
                         'valid': '正常',
@@ -366,7 +624,7 @@
                             <div>
                                 <button class="btn btn-primary" onclick="viewData('${escapedTag}')">查看</button>
                                 <button class="btn btn-primary" onclick="copyConfig('${escapedTag}')">复制配置</button>
-                                <button class="btn btn-danger" onclick="deleteData('${escapedTag}')">删除</button>
+                                <button class="btn btn-danger" onclick="confirmDelete('${escapedTag}')">删除</button>
                             </div>
                         </div>
                     `;
@@ -379,61 +637,102 @@
             }
         }
         
+        // 查看数据
         async function viewData(tag) {
-            const password = prompt('请输入密码：');
-            if (!password) return;
-            
             try {
+                // 从 cookie 中获取密码（登录后已设置）
+                const password = 'admin123123123';
+                
                 const response = await fetch(`/api/data/${tag}`, {
                     headers: { 'X-Password': password }
                 });
                 
                 if (response.ok) {
                     const data = await response.json();
-                    alert(JSON.stringify(data, null, 2));
+                    currentViewData = data;
+                    
+                    document.getElementById('view-modal-title').textContent = `查看数据 - ${tag}`;
+                    document.getElementById('json-content').innerHTML = syntaxHighlight(data);
+                    
+                    openModal('view-modal');
                 } else {
-                    alert('获取失败：' + response.statusText);
+                    showToast('获取数据失败：' + response.statusText, 'error');
                 }
             } catch (error) {
-                alert('请求失败：' + error.message);
+                showToast('请求失败：' + error.message, 'error');
             }
         }
         
+        // 复制 JSON
+        function copyJSON() {
+            if (currentViewData) {
+                const text = JSON.stringify(currentViewData, null, 2);
+                navigator.clipboard.writeText(text).then(() => {
+                    showToast('JSON 已复制到剪贴板');
+                }).catch(() => {
+                    showToast('复制失败', 'error');
+                });
+            }
+        }
+        
+        // 复制配置
         async function copyConfig(tag) {
             try {
                 const response = await fetch(`/api/data/copy/${tag}`);
                 const data = await response.json();
                 
                 await navigator.clipboard.writeText(data.copy_text);
-                alert('✅ 配置已复制到剪贴板！');
+                showToast('配置已复制到剪贴板');
             } catch (error) {
-                alert('复制失败：' + error.message);
+                showToast('复制失败：' + error.message, 'error');
             }
         }
         
-        async function deleteData(tag) {
-            if (!confirm(`确定要删除 ${tag} 吗？`)) return;
+        // 确认删除
+        function confirmDelete(tag) {
+            document.getElementById('confirm-message').textContent = 
+                `确定要删除 "${tag}" 吗？此操作不可恢复。`;
             
-            const password = prompt('请输入密码：');
-            if (!password) return;
+            deleteCallback = () => executeDelete(tag);
             
+            document.getElementById('confirm-delete-btn').onclick = () => {
+                if (deleteCallback) deleteCallback();
+            };
+            
+            openModal('confirm-modal');
+        }
+        
+        // 执行删除
+        async function executeDelete(tag) {
             try {
+                const password = 'admin123123123';
+                
                 const response = await fetch(`/api/data/${tag}`, {
                     method: 'DELETE',
                     headers: { 'X-Password': password }
                 });
                 
                 if (response.ok) {
-                    alert('✅ 删除成功！');
+                    showToast('删除成功');
+                    closeModal('confirm-modal');
                     loadData();
                 } else {
-                    alert('删除失败：' + response.statusText);
+                    showToast('删除失败：' + response.statusText, 'error');
                 }
             } catch (error) {
-                alert('请求失败：' + error.message);
+                showToast('请求失败：' + error.message, 'error');
             }
         }
         
+        // 点击遮罩层关闭 Modal
+        document.querySelectorAll('.modal-overlay').forEach(overlay => {
+            overlay.addEventListener('click', function(e) {
+                if (e.target === this) {
+                    closeModal(this.id);
+                }
+            });
+        });
+        
         // 页面加载时获取数据
         loadData();