static/templates/api-test.html

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