<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>便携式安全检测工作站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 扫描线动画 -->
    <div class="scanline"></div>

    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="nav-left">
            <div class="logo">⚔ 安全检测工作站</div>
            <span class="version">v6.0</span>
        </div>
        <div class="nav-center">
            <a href="#dashboard" class="nav-link active" data-page="dashboard">仪表盘</a>
            <a href="#scan" class="nav-link" data-page="scan">扫描控制</a>
            <a href="#results" class="nav-link" data-page="results">结果查看</a>
            <a href="#reports" class="nav-link" data-page="reports">报告</a>
            <a href="#pentest" class="nav-link nav-link-pentest" data-page="pentest">渗透测试</a>
            <a href="#mlps" class="nav-link" data-page="mlps">等保</a>
            <a href="#logs" class="nav-link" data-page="logs">实时日志</a>
        </div>
        <div class="nav-right">
            <div class="connection-status">
                <span class="status-dot"></span>
                <span class="status-text">连接中...</span>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="container">
        <!-- 仪表盘页 -->
        <div id="page-dashboard" class="page active">
            <h1>系统仪表盘</h1>

            <!-- 系统状态卡片 -->
            <div class="card-grid">
                <div class="card">
                    <div class="card-header">系统状态</div>
                    <div class="card-body">
                        <div class="status-item">
                            <span class="label">运行状态</span>
                            <span class="value" id="sys-status">加载中...</span>
                        </div>
                        <div class="status-item">
                            <span class="label">CPU使用率</span>
                            <span class="value" id="sys-cpu">-</span>
                        </div>
                        <div class="status-item">
                            <span class="label">内存使用</span>
                            <span class="value" id="sys-memory">-</span>
                        </div>
                        <div class="status-item">
                            <span class="label">运行时间</span>
                            <span class="value" id="sys-uptime">-</span>
                        </div>
                    </div>
                </div>

                <!-- 引擎列表 -->
                <div class="card">
                    <div class="card-header">检测引擎</div>
                    <div class="card-body">
                        <div id="engines-list" class="engines-grid">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>

                <!-- 最近扫描 -->
                <div class="card full-width">
                    <div class="card-header">最近扫描</div>
                    <div class="card-body">
                        <div id="recent-scans">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 扫描控制页 -->
        <div id="page-scan" class="page">
            <h1>扫描控制</h1>

            <div class="card">
                <div class="card-header">创建新扫描</div>
                <div class="card-body">
                    <form id="scan-form">
                        <div class="form-group">
                            <label>目标地址</label>
                            <input type="text" id="scan-target" placeholder="例: 192.168.1.0/24 或 example.com" required>
                        </div>

                        <div class="form-group">
                            <label>选择引擎</label>
                            <div id="engine-checkboxes" class="checkbox-grid">
                                <div class="loading">加载中...</div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>扫描配置</label>
                            <textarea id="scan-config" placeholder='可选JSON配置，例: {"ports": "1-1000", "threads": 10}' rows="4"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary">开始扫描</button>
                    </form>
                </div>
            </div>

            <div class="card" id="active-scan-card" style="display:none;">
                <div class="card-header">当前扫描</div>
                <div class="card-body">
                    <div class="scan-info">
                        <div class="info-row">
                            <span class="label">任务ID:</span>
                            <span id="scan-task-id">-</span>
                        </div>
                        <div class="info-row">
                            <span class="label">目标:</span>
                            <span id="scan-target-display">-</span>
                        </div>
                        <div class="info-row">
                            <span class="label">状态:</span>
                            <span id="scan-status" class="badge">-</span>
                        </div>
                        <div class="info-row">
                            <span class="label">进度:</span>
                            <span id="scan-progress-text">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div id="scan-progress-bar" class="progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                    <button id="stop-scan-btn" class="btn btn-danger">停止扫描</button>
                </div>
            </div>
        </div>

        <!-- 结果查看页 -->
        <div id="page-results" class="page">
            <h1>扫描结果</h1>

            <div class="card">
                <div class="card-header">严重度分布</div>
                <div class="card-body">
                    <div id="severity-chart" class="severity-bars">
                        <div class="severity-bar">
                            <span class="severity-label">严重</span>
                            <div class="bar-container">
                                <div class="bar critical" style="width: 0%"></div>
                            </div>
                            <span class="count" id="count-critical">0</span>
                        </div>
                        <div class="severity-bar">
                            <span class="severity-label">高危</span>
                            <div class="bar-container">
                                <div class="bar high" style="width: 0%"></div>
                            </div>
                            <span class="count" id="count-high">0</span>
                        </div>
                        <div class="severity-bar">
                            <span class="severity-label">中危</span>
                            <div class="bar-container">
                                <div class="bar medium" style="width: 0%"></div>
                            </div>
                            <span class="count" id="count-medium">0</span>
                        </div>
                        <div class="severity-bar">
                            <span class="severity-label">低危</span>
                            <div class="bar-container">
                                <div class="bar low" style="width: 0%"></div>
                            </div>
                            <span class="count" id="count-low">0</span>
                        </div>
                        <div class="severity-bar">
                            <span class="severity-label">信息</span>
                            <div class="bar-container">
                                <div class="bar info" style="width: 0%"></div>
                            </div>
                            <span class="count" id="count-info">0</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">安全发现</div>
                <div class="card-body">
                    <div id="findings-table">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">资产列表</div>
                <div class="card-body">
                    <div id="assets-table">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报告页 -->
        <div id="page-reports" class="page">
            <h1>报告管理</h1>

            <div class="card">
                <div class="card-header">生成报告</div>
                <div class="card-body">
                    <form id="report-form">
                        <div class="form-group">
                            <label>选择扫描任务</label>
                            <select id="report-task-id" required>
                                <option value="">请选择...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>报告格式</label>
                            <select id="report-format">
                                <option value="pdf">PDF</option>
                                <option value="html">HTML</option>
                                <option value="json">JSON</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">生成报告</button>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-header">报告列表</div>
                <div class="card-body">
                    <div id="reports-list">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 等保页 -->
        <div id="page-mlps" class="page">
            <h1>等级保护合规</h1>

            <div class="card">
                <div class="card-header">等保概览</div>
                <div class="card-body">
                    <div id="mlps-summary">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">安全域</div>
                <div class="card-body">
                    <div id="mlps-domains" class="domains-grid">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>

            <div class="card" id="mlps-controls-card" style="display:none;">
                <div class="card-header">
                    <span id="controls-domain-name">控制点</span>
                    <button class="btn btn-small" onclick="app.closeControlsPanel()">关闭</button>
                </div>
                <div class="card-body">
                    <div id="mlps-controls">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 渗透测试页 -->
        <div id="page-pentest" class="page">
            <div class="pentest-page-header">
                <div class="pentest-title-row">
                    <h1>渗透测试合规管理</h1>
                    <span class="pentest-standard-badge">GB/T 36959-2026</span>
                </div>
                <div class="pentest-header-meta">
                    <span class="meta-item"><i class="icon">📋</i> 信息安全技术 渗透测试规范</span>
                    <span class="meta-item"><i class="icon">🕐</i> 最后更新: <span id="pentest-last-update">-</span></span>
                </div>
            </div>

            <!-- Tab导航 -->
            <div class="pentest-tabs">
                <button class="pentest-tab active" data-tab="overview" onclick="app.switchPentestTab('overview')">
                    <span class="tab-icon">📊</span> 合规概览
                </button>
                <button class="pentest-tab" data-tab="auth" onclick="app.switchPentestTab('auth')">
                    <span class="tab-icon">🔐</span> 授权管理
                    <span class="tab-badge" id="tab-badge-auth">0</span>
                </button>
                <button class="pentest-tab" data-tab="vuln" onclick="app.switchPentestTab('vuln')">
                    <span class="tab-icon">🐛</span> 漏洞报送
                    <span class="tab-badge" id="tab-badge-vuln">0</span>
                </button>
                <button class="pentest-tab" data-tab="data" onclick="app.switchPentestTab('data')">
                    <span class="tab-icon">🛡️</span> 数据安全
                    <span class="tab-badge" id="tab-badge-data">0</span>
                </button>
                <button class="pentest-tab" data-tab="audit" onclick="app.switchPentestTab('audit')">
                    <span class="tab-icon">📜</span> 审计追踪
                </button>
            </div>

            <!-- ===== TAB: 合规概览 ===== -->
            <div id="pentest-tab-overview" class="pentest-tab-content active">
                <!-- 顶部统计卡片行 -->
                <div class="pentest-stats-row">
                    <div class="pentest-stat-card stat-authorizations">
                        <div class="stat-card-icon">🔐</div>
                        <div class="stat-card-body">
                            <div class="stat-card-value" id="pentest-auth-active">0</div>
                            <div class="stat-card-label">有效授权</div>
                        </div>
                        <div class="stat-card-footer">
                            <span class="stat-trend" id="pentest-auth-expired-trend">
                                <span id="pentest-auth-expired">0</span> 已过期
                            </span>
                        </div>
                    </div>
                    <div class="pentest-stat-card stat-vulns">
                        <div class="stat-card-icon">🐛</div>
                        <div class="stat-card-body">
                            <div class="stat-card-value" id="pentest-vuln-critical">0</div>
                            <div class="stat-card-label">严重漏洞</div>
                        </div>
                        <div class="stat-card-footer">
                            <span class="stat-trend positive">
                                <span id="pentest-vuln-submitted">0</span> 已报送
                            </span>
                        </div>
                    </div>
                    <div class="pentest-stat-card stat-access">
                        <div class="stat-card-icon">📡</div>
                        <div class="stat-card-body">
                            <div class="stat-card-value" id="pentest-access-7d">0</div>
                            <div class="stat-card-label">7日数据访问</div>
                        </div>
                        <div class="stat-card-footer">
                            <span class="stat-trend" id="pentest-destructions-trend">
                                <span id="pentest-destructions">0</span> 次数据销毁
                            </span>
                        </div>
                    </div>
                    <div class="pentest-stat-card stat-compliance">
                        <div class="stat-card-icon">✅</div>
                        <div class="stat-card-body">
                            <div class="stat-card-value" id="pentest-compliance-score">-</div>
                            <div class="stat-card-label">合规评分</div>
                        </div>
                        <div class="stat-card-footer">
                            <span class="stat-trend" id="pentest-compliance-level">计算中...</span>
                        </div>
                    </div>
                </div>

                <!-- 中间区域：合规仪表盘 + 风险矩阵 -->
                <div class="pentest-dashboard-row">
                    <!-- 合规要求仪表盘 -->
                    <div class="card card-pentest compliance-dashboard-card">
                        <div class="card-header">
                            <span>📋 GB/T 36959 合规要求达成</span>
                            <span class="compliance-updated" id="compliance-updated">实时</span>
                        </div>
                        <div class="card-body">
                            <div class="compliance-items" id="compliance-items">
                                <!-- JS动态渲染 -->
                            </div>
                        </div>
                    </div>

                    <!-- 漏洞严重度分布 -->
                    <div class="card card-pentest vuln-distribution-card">
                        <div class="card-header">
                            <span>📈 漏洞严重度分布</span>
                            <span class="vuln-total">共 <span id="vuln-total-count">0</span> 个</span>
                        </div>
                        <div class="card-body">
                            <div class="vuln-chart-container" id="vuln-severity-chart">
                                <!-- JS动态渲染 -->
                            </div>
                            <div class="vuln-chart-legend">
                                <span class="legend-item"><span class="legend-dot critical"></span>严重</span>
                                <span class="legend-item"><span class="legend-dot high"></span>高危</span>
                                <span class="legend-item"><span class="legend-dot medium"></span>中危</span>
                                <span class="legend-item"><span class="legend-dot low"></span>低危</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 下方区域：最近活动 + 报送分布 -->
                <div class="pentest-dashboard-row">
                    <!-- 最近活动时间线 -->
                    <div class="card card-pentest timeline-card">
                        <div class="card-header">
                            <span>🕐 最近活动</span>
                            <button class="btn btn-small" onclick="app.switchPentestTab('audit')">查看全部</button>
                        </div>
                        <div class="card-body">
                            <div class="activity-timeline" id="pentest-activity-timeline">
                                <div class="loading">加载中...</div>
                            </div>
                        </div>
                    </div>

                    <!-- 报送对象分布 -->
                    <div class="card card-pentest report-dist-card">
                        <div class="card-header">
                            <span>📤 漏洞报送分布</span>
                        </div>
                        <div class="card-body">
                            <div class="report-distribution" id="report-distribution">
                                <!-- JS动态渲染 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== TAB: 授权管理 ===== -->
            <div id="pentest-tab-auth" class="pentest-tab-content">
                <div class="tab-toolbar">
                    <div class="toolbar-left">
                        <input type="text" class="toolbar-search" id="auth-search" placeholder="搜索项目名称/系统/IP..." oninput="app.filterAuthTable()">
                        <select class="toolbar-filter" id="auth-status-filter" onchange="app.filterAuthTable()">
                            <option value="">全部状态</option>
                            <option value="active">有效</option>
                            <option value="expired">已过期</option>
                        </select>
                    </div>
                    <div class="toolbar-right">
                        <span class="toolbar-count" id="auth-count">0 条记录</span>
                        <button class="btn btn-primary" onclick="app.showAuthForm()">+ 新建授权</button>
                    </div>
                </div>
                <div class="card card-pentest">
                    <div class="card-body">
                        <div id="pentest-auth-list">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== TAB: 漏洞报送 ===== -->
            <div id="pentest-tab-vuln" class="pentest-tab-content">
                <div class="tab-toolbar">
                    <div class="toolbar-left">
                        <input type="text" class="toolbar-search" id="vuln-search" placeholder="搜索漏洞标题/CVE/产品..." oninput="app.filterVulnTable()">
                        <select class="toolbar-filter" id="vuln-severity-filter" onchange="app.filterVulnTable()">
                            <option value="">全部等级</option>
                            <option value="critical">严重</option>
                            <option value="high">高危</option>
                            <option value="medium">中危</option>
                            <option value="low">低危</option>
                        </select>
                    </div>
                    <div class="toolbar-right">
                        <span class="toolbar-count" id="vuln-count">0 条记录</span>
                        <button class="btn btn-primary" onclick="app.showVulnReportForm()">+ 新建报送</button>
                    </div>
                </div>
                <div class="card card-pentest">
                    <div class="card-body">
                        <div id="pentest-vuln-list">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== TAB: 数据安全 ===== -->
            <div id="pentest-tab-data" class="pentest-tab-content">
                <!-- 数据安全概览小卡片 -->
                <div class="data-security-mini-stats">
                    <div class="mini-stat">
                        <span class="mini-stat-value" id="data-total-access">0</span>
                        <span class="mini-stat-label">总访问次数</span>
                    </div>
                    <div class="mini-stat">
                        <span class="mini-stat-value" id="data-success-rate">-</span>
                        <span class="mini-stat-label">成功率</span>
                    </div>
                    <div class="mini-stat">
                        <span class="mini-stat-value" id="data-total-destroyed">0</span>
                        <span class="mini-stat-label">已销毁记录</span>
                    </div>
                    <div class="mini-stat">
                        <span class="mini-stat-value" id="data-unique-operators">0</span>
                        <span class="mini-stat-label">操作人员</span>
                    </div>
                </div>

                <!-- 数据访问日志 -->
                <div class="card card-pentest">
                    <div class="card-header">
                        <span>📡 数据访问审计日志</span>
                        <div class="header-actions">
                            <select class="toolbar-filter" id="data-log-type-filter" onchange="app.filterDataLogs()">
                                <option value="">全部类型</option>
                                <option value="scan_report">扫描报告</option>
                                <option value="vuln_data">漏洞数据</option>
                                <option value="credential">凭据信息</option>
                                <option value="target_info">目标信息</option>
                                <option value="exploit_code">利用代码</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="pentest-data-logs">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>

                <!-- 数据销毁记录 -->
                <div class="card card-pentest">
                    <div class="card-header">
                        <span>🗑️ 数据销毁记录</span>
                        <button class="btn btn-danger btn-sm" onclick="app.showDataDestructionForm()">+ 新建销毁</button>
                    </div>
                    <div class="card-body">
                        <div id="pentest-destruction-list">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== TAB: 审计追踪 ===== -->
            <div id="pentest-tab-audit" class="pentest-tab-content">
                <div class="card card-pentest">
                    <div class="card-header">
                        <span>📜 完整审计追踪</span>
                        <div class="header-actions">
                            <select class="toolbar-filter" id="audit-type-filter" onchange="app.filterAuditTrail()">
                                <option value="">全部类型</option>
                                <option value="authorization">授权操作</option>
                                <option value="vuln_report">漏洞报送</option>
                                <option value="data_access">数据访问</option>
                                <option value="data_destruction">数据销毁</option>
                            </select>
                            <input type="date" class="toolbar-date" id="audit-date-filter" onchange="app.filterAuditTrail()">
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="audit-timeline-full" id="pentest-audit-timeline">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== 详情弹窗 ===== -->
            <div id="pentest-detail-modal" class="modal" style="display:none;">
                <div class="modal-content modal-lg">
                    <div class="modal-header">
                        <h3 id="detail-modal-title">详情</h3>
                        <button class="modal-close" onclick="app.closeDetailModal()">&times;</button>
                    </div>
                    <div class="modal-body" id="detail-modal-body">
                    </div>
                </div>
            </div>

            <!-- 新建授权表单弹窗 -->
            <div id="pentest-auth-modal" class="modal" style="display:none;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>新建渗透测试授权</h3>
                        <button class="modal-close" onclick="app.closeAuthForm()">&times;</button>
                    </div>
                    <form id="pentest-auth-form">
                        <div class="form-group">
                            <label>项目名称 *</label>
                            <input type="text" id="auth-project-name" required placeholder="例: XX系统安全评估">
                        </div>
                        <div class="form-group">
                            <label>被测系统 *</label>
                            <input type="text" id="auth-target-system" required placeholder="例: XX单位OA系统">
                        </div>
                        <div class="form-group">
                            <label>目标IP范围</label>
                            <input type="text" id="auth-target-ip" placeholder="例: 192.168.1.0/24">
                        </div>
                        <div class="form-group">
                            <label>授权编号</label>
                            <input type="text" id="auth-no" placeholder="例: PT-2026-001">
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>有效期开始</label>
                                <input type="date" id="auth-valid-from">
                            </div>
                            <div class="form-group">
                                <label>有效期结束</label>
                                <input type="date" id="auth-valid-until">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>授权人</label>
                            <input type="text" id="auth-authorized-by" placeholder="授权人姓名">
                        </div>
                        <div class="form-group">
                            <label>测试方法</label>
                            <textarea id="auth-test-methods" rows="3" placeholder="漏洞扫描、渗透测试、密码破解等"></textarea>
                        </div>
                        <div class="form-group">
                            <label>排除范围</label>
                            <textarea id="auth-exclusions" rows="2" placeholder="不测试的系统/IP"></textarea>
                        </div>
                        <div class="form-group">
                            <label>应急联系人</label>
                            <input type="text" id="auth-emergency-contact" placeholder="电话/邮箱">
                        </div>
                        <div class="form-group checkbox-group">
                            <input type="checkbox" id="auth-risk-signed">
                            <label for="auth-risk-signed">已签署风险告知书</label>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-secondary" onclick="app.closeAuthForm()">取消</button>
                            <button type="submit" class="btn btn-primary">创建授权</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 漏洞报送表单弹窗 -->
            <div id="pentest-vuln-modal" class="modal" style="display:none;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>新建漏洞报送</h3>
                        <button class="modal-close" onclick="app.closeVulnReportForm()">&times;</button>
                    </div>
                    <form id="pentest-vuln-form">
                        <div class="form-group">
                            <label>漏洞标题 *</label>
                            <input type="text" id="vuln-title" required placeholder="漏洞名称">
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>严重程度 *</label>
                                <select id="vuln-severity" required>
                                    <option value="critical">严重</option>
                                    <option value="high">高危</option>
                                    <option value="medium">中危</option>
                                    <option value="low">低危</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>报送对象</label>
                                <select id="vuln-report-to">
                                    <option value="internal">内部</option>
                                    <option value="cnvd">CNVD</option>
                                    <option value="cnnvd">CNNVD</option>
                                    <option value="provincial">省级平台</option>
                                    <option value="national">国家级平台</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>CVE编号</label>
                                <input type="text" id="vuln-cve" placeholder="CVE-2026-XXXX">
                            </div>
                            <div class="form-group">
                                <label>CNVD编号</label>
                                <input type="text" id="vuln-cnvd" placeholder="CNVD-2026-XXXX">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>影响产品</label>
                            <input type="text" id="vuln-product" placeholder="产品名称及版本">
                        </div>
                        <div class="form-group">
                            <label>漏洞描述</label>
                            <textarea id="vuln-description" rows="3" placeholder="漏洞详细描述"></textarea>
                        </div>
                        <div class="form-group">
                            <label>利用方式</label>
                            <textarea id="vuln-exploit" rows="3" placeholder="漏洞利用方法"></textarea>
                        </div>
                        <div class="form-group">
                            <label>影响范围</label>
                            <textarea id="vuln-impact" rows="2" placeholder="漏洞影响"></textarea>
                        </div>
                        <div class="form-group">
                            <label>修复建议</label>
                            <textarea id="vuln-remediation" rows="2" placeholder="修复方案"></textarea>
                        </div>
                        <div class="form-group">
                            <label>发现人</label>
                            <input type="text" id="vuln-discovered-by" placeholder="发现人姓名">
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-secondary" onclick="app.closeVulnReportForm()">取消</button>
                            <button type="submit" class="btn btn-primary">创建报送</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 数据销毁表单弹窗 -->
            <div id="pentest-data-modal" class="modal" style="display:none;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>数据销毁记录</h3>
                        <button class="modal-close" onclick="app.closeDataDestructionForm()">&times;</button>
                    </div>
                    <form id="pentest-data-form">
                        <div class="form-group">
                            <label>数据类型 *</label>
                            <select id="data-type" required>
                                <option value="scan_data">扫描数据</option>
                                <option value="vuln_data">漏洞数据</option>
                                <option value="report_data">报告数据</option>
                                <option value="log_data">日志数据</option>
                                <option value="credential_data">凭据数据</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>数据描述</label>
                            <input type="text" id="data-description" placeholder="例: 2026年1月扫描数据">
                        </div>
                        <div class="form-group">
                            <label>销毁方式</label>
                            <select id="data-method">
                                <option value="secure_delete">安全删除</option>
                                <option value="overwrite">覆写</option>
                                <option value="crypto_erase">加密擦除</option>
                                <option value="physical_destroy">物理销毁</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>记录数量</label>
                            <input type="number" id="data-count" value="0" min="0">
                        </div>
                        <div class="form-group">
                            <label>操作人</label>
                            <input type="text" id="data-operator" placeholder="操作人姓名">
                        </div>
                        <div class="form-group">
                            <label>授权人</label>
                            <input type="text" id="data-authorized-by" placeholder="授权人姓名">
                        </div>
                        <div class="form-group">
                            <label>备注</label>
                            <textarea id="data-notes" rows="2"></textarea>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-secondary" onclick="app.closeDataDestructionForm()">取消</button>
                            <button type="submit" class="btn btn-danger">确认销毁</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 实时日志页 -->
        <div id="page-logs" class="page">
            <h1>实时日志</h1>

            <div class="card">
                <div class="card-header">
                    <span>系统日志</span>
                    <button class="btn btn-small" onclick="app.clearLogs()">清空</button>
                </div>
                <div class="card-body">
                    <div id="log-container" class="log-container">
                        <div class="log-entry">等待日志...</div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="js/api.js?v=10.0"></script>
    <script src="js/ws.js?v=10.0"></script>
    <script src="js/app.js?v=10.0"></script>
</body>
</html>
