| <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> |
