File size: 7,035 Bytes
adffa36
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
be53771
 
adffa36
 
be53771
 
 
 
 
 
 
 
 
 
 
 
adffa36
be53771
 
 
adffa36
 
 
be53771
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9e77297
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<style>

.api-test-page{padding:14px;background:linear-gradient(180deg,#eef2ff 0%,#f1f5f9 240px);min-height:calc(100vh - 80px);font-feature-settings:"tnum"}

.api-test-page .api-tester{background:#fff;padding:24px 26px;border-radius:14px;box-shadow:0 4px 14px rgba(15,23,42,.06),0 1px 4px rgba(15,23,42,.04);border:1px solid #f1f5f9;max-width:1100px;margin:0 auto}

.api-test-page .api-tester h2{margin:0 0 6px!important;font-size:18px!important;font-weight:700!important;color:#1e293b!important;letter-spacing:.2px}

.api-test-page .api-tester>p{margin:0 0 22px!important;color:#64748b!important;font-size:13px!important}

.api-test-page .form-group{margin-bottom:18px}

.api-test-page .form-group label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:6px;letter-spacing:.2px}

.api-test-page .form-control{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;outline:none;transition:all .15s;background:#fff;color:#1e293b;font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace}

.api-test-page .form-control:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}

.api-test-page .btn{border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .15s;color:#fff;box-shadow:0 1px 3px rgba(15,23,42,.08);font-size:13px}

.api-test-page .btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 6px 16px rgba(99,102,241,.32)}

.api-test-page .btn:active:not(:disabled){transform:translateY(0)}

.api-test-page .btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}

.api-test-page #testBtn{background:linear-gradient(135deg,#6366f1,#8b5cf6);width:100%;padding:13px 18px!important;font-size:14px!important;font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}

.api-test-page .response-container{margin-top:26px}

.api-test-page .response-container h3{margin:0 0 10px!important;font-size:11px!important;color:#94a3b8!important;font-weight:700!important;letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;gap:6px}

.api-test-page #apiResponse{background:#0f172a!important;color:#e2e8f0!important;padding:18px 20px!important;border-radius:12px!important;overflow:auto!important;font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace!important;font-size:12px!important;line-height:1.65!important;max-height:540px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(15,23,42,.16)!important;border:1px solid #1e293b!important;margin:0!important;white-space:pre;tab-size:2}

.api-test-page #apiResponse::-webkit-scrollbar{width:10px;height:10px}

.api-test-page #apiResponse::-webkit-scrollbar-thumb{background:#334155;border-radius:5px;border:2px solid #0f172a;background-clip:padding-box}

.api-test-page #apiResponse::-webkit-scrollbar-thumb:hover{background:#475569;background-clip:padding-box}

.api-test-page .loading-spinner-large{border:3px solid rgba(255,255,255,.3)!important;border-top-color:#fff!important;border-radius:50%!important;animation:apiSpin 0.7s linear infinite}

@keyframes apiSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

</style>
<div class="api-test-page">
    <div class="api-tester">
        <h2>🔧 API 接口测试工具</h2>
        <p>测试后端 API 接口的响应速度和数据返回</p>

        <div class="form-group">
            <label for="apiEndpoint">📡 选择 API 端点</label>
            <select id="apiEndpoint" class="form-control">
                <option value="/health">GET /health - 健康检查</option>
                <option value="/api/list">GET /api/list - 获取频道列表</option>
                <option value="/api/refresh?type=all">GET /api/refresh - 刷新所有缓存</option>
                <option value="/api/refresh?type=cid">GET /api/refresh - 刷新 CID</option>
                <option value="/api/refresh?type=auth">GET /api/refresh - 刷新认证</option>
            </select>
        </div>

        <button id="testBtn" class="btn btn-primary">
            🚀 发送请求
        </button>

        <div class="response-container">
            <h3>📊 响应结果</h3>
            <pre id="apiResponse">⏳ 等待发送请求...

💡 提示:选择一个 API 端点后点击"发送请求"按钮</pre>
        </div>
    </div>
</div>

<script>

(function() {

    'use strict';



    const API = window.location.origin;



    

    const debounce = window.MediaGatewayUtils?.debounce || function(func, wait) {

        let timeout;

        return function(...args) {

            clearTimeout(timeout);

            timeout = setTimeout(() => func(...args), wait);

        };

    };



    async function test() {

        const sel = document.getElementById('apiEndpoint');

        const res = document.getElementById('apiResponse');

        const btn = document.getElementById('testBtn');

        

        if (!sel || !res || !btn) return;

        

        const endpoint = sel.value;

        

        btn.disabled = true;

        btn.innerHTML = '<div class="loading-spinner-large" style="width: 20px; height: 20px; border-width: 3px; display: inline-block; margin-right: 10px;"></div>请求中...';

        

        res.textContent = '⏳ 正在发送请求...\n\n请稍候...';



        try {

            const token = sessionStorage.getItem('admin_token');

            const headers = {};

            if (token) headers['Authorization'] = `Bearer ${token}`;



            const start = Date.now();

            const response = await fetch(`${API}${endpoint}`, { headers });

            const time = Date.now() - start;

            const data = await response.json();



            const result = {

                success: response.ok,

                status: response.status,

                statusText: response.statusText,

                responseTime: `${time}ms`,

                headers: Object.fromEntries(response.headers.entries()),

                data: data

            };



            res.textContent = JSON.stringify(result, null, 2);

            

            if (window.MediaGatewayUtils) {

                window.MediaGatewayUtils.showNotification(`✅ 请求成功 (${time}ms)`, 'success');

            }

        } catch (e) {

            res.textContent = `❌ 请求失败\n\n错误信息:\n${e.message}\n\n堆栈追踪:\n${e.stack || '无'}`;

            

            if (window.MediaGatewayUtils) {

                window.MediaGatewayUtils.showNotification('❌ 请求失败', 'error');

            }

        } finally {

            btn.disabled = false;

            btn.innerHTML = '🚀 发送请求';

        }

    }



    window.initApiTestPage = function() {

        const btn = document.getElementById('testBtn');

        if (btn) btn.addEventListener('click', debounce(test, 300));

    };



    setTimeout(window.initApiTestPage, 0);

})();

</script>