File size: 4,385 Bytes
b4edbc0 | 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 | <div class="api-test-page">
<div class="api-tester">
<h2 style="font-size: 1.5em; color: var(--dark); margin-bottom: 20px;">🔧 API 接口测试工具</h2>
<p style="color: #64748b; margin-bottom: 30px;">测试后端 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" style="width: 100%; padding: 16px; font-size: 1.05em;">
🚀 发送请求
</button>
<div class="response-container" style="margin-top: 30px;">
<h3 style="margin-bottom: 15px; color: var(--dark); font-size: 1.2em; display: flex; align-items: center; gap: 10px;">
📊 响应结果
</h3>
<pre id="apiResponse" style="background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 12px; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9em; line-height: 1.6; max-height: 500px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);">⏳ 等待发送请求...
💡 提示：选择一个 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> |