security-platform/test_frontend_backend_connection.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前后端连接测试</title>
</head>
<body>
    <h1>AI SOC 分析师 - 前后端连接测试</h1>
    
    <div>
        <h2>API连接测试</h2>
        <button id="testStatus">测试系统状态API</button>
        <button id="testReports">测试报告API</button>
        <button id="testSources">测试数据源API</button>
        <div id="results"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8000/api/v1';
        const results = document.getElementById('results');

        function logResult(test, result, isSuccess = true) {
            const div = document.createElement('div');
            div.style.padding = '10px';
            div.style.margin = '5px';
            div.style.border = '1px solid';
            div.style.borderColor = isSuccess ? 'green' : 'red';
            div.style.backgroundColor = isSuccess ? '#e8f5e8' : '#ffe8e8';
            div.innerHTML = `<strong>${test}:</strong> ${result}`;
            results.appendChild(div);
        }

        document.getElementById('testStatus').onclick = async () => {
            try {
                const response = await fetch(`${API_BASE}/status`);
                const data = await response.json();
                logResult('系统状态API', `✅ 成功 - 状态: ${data.status}, 可用数据源: ${data.available_sources.length}`);
            } catch (error) {
                logResult('系统状态API', `❌ 失败 - ${error.message}`, false);
            }
        };

        document.getElementById('testReports').onclick = async () => {
            try {
                const response = await fetch(`${API_BASE}/reports/`);
                const data = await response.json();
                logResult('报告API', `✅ 成功 - 报告数量: ${data.reports.length}, 总数: ${data.total}`);
            } catch (error) {
                logResult('报告API', `❌ 失败 - ${error.message}`, false);
            }
        };

        document.getElementById('testSources').onclick = async () => {
            try {
                const response = await fetch(`${API_BASE}/upload/sources`);
                const data = await response.json();
                logResult('数据源API', `✅ 成功 - 可用数据源: ${data.sources.join(', ')}`);
            } catch (error) {
                logResult('数据源API', `❌ 失败 - ${error.message}`, false);
            }
        };

        // 自动运行所有测试
        window.onload = () => {
            setTimeout(() => {
                document.getElementById('testStatus').click();
                setTimeout(() => document.getElementById('testReports').click(), 500);
                setTimeout(() => document.getElementById('testSources').click(), 1000);
            }, 1000);
        };
    </script>
</body>
</html>