<!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="#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-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>
