google_ssr_actions/test_serpapi_status.html at main · liebesu/google_ssr_actions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SerpAPI 密钥状态测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background: #1a1a1a; color: #fff; }
        .key-item { background: #333; padding: 15px; margin: 10px 0; border-radius: 8px; }
        .key-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .key-status { padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .status-ok { background: #10b981; color: white; }
        .status-error { background: #ef4444; color: white; }
        .key-details { color: #ccc; font-size: 14px; }
        .loading { color: #60a5fa; }
        .error { color: #ef4444; }
    </style>
</head>
<body>
    <h1>SerpAPI 密钥状态测试</h1>
    <div id="status">正在加载...</div>
    <div id="keys-container"></div>

    <script>
        async function loadSerpAPIKeys() {
            const statusDiv = document.getElementById('status');
            const container = document.getElementById('keys-container');

            try {
                statusDiv.innerHTML = '<div class="loading">正在获取health.json...</div>';

                const response = await fetch('https://liebesu.github.io/google_ssr_actions/health.json', {
                    cache: 'no-cache'
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }

                const health = await response.json();
                console.log('Health data:', health);

                statusDiv.innerHTML = `<div class="loading">获取到数据，密钥数量: ${health.serpapi_keys_detail?.length || 0}</div>`;

                const keys = health.serpapi_keys_detail || [];

                if (keys.length === 0) {
                    container.innerHTML = '<div class="error">没有密钥信息</div>';
                    return;
                }

                container.innerHTML = keys.map(key => {
                    const statusClass = key.success ? 'status-ok' : 'status-error';
                    const statusText = key.success ? '正常' : '错误';

                    return `
                        <div class="key-item">
                            <div class="key-header">
                                <span><strong>Key ${key.index}</strong> ${key.key_masked ? `(${key.key_masked})` : ''}</span>
                                <span class="key-status ${statusClass}">${statusText}</span>
                            </div>
                            <div class="key-details">
                                <div>剩余配额: ${key.total_searches_left || 0}</div>
                                <div>每月配额: ${key.searches_per_month || 0}</div>
                                <div>已使用: ${key.used_searches || 0}</div>
                                <div>重置日期: ${key.reset_date || '未知'}</div>
                                ${key.error ? `<div style="color: #ef4444;">错误: ${key.error}</div>` : ''}
                            </div>
                        </div>
                    `;
                }).join('');

                statusDiv.innerHTML = `<div class="loading">✅ 加载完成，显示 ${keys.length} 个密钥</div>`;

            } catch (error) {
                console.error('加载失败:', error);
                statusDiv.innerHTML = `<div class="error">❌ 加载失败: ${error.message}</div>`;
                container.innerHTML = '<div class="error">无法加载密钥信息</div>';
            }
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', loadSerpAPIKeys);
    </script>
</body>
</html>