554 lines
20 KiB
JavaScript
554 lines
20 KiB
JavaScript
/**
|
||
* API Tester - 前端应用主逻辑
|
||
* @author huazm
|
||
*/
|
||
|
||
// ==================== 粒子背景 ====================
|
||
class ParticleBackground {
|
||
constructor(canvas) {
|
||
this.canvas = canvas;
|
||
this.ctx = canvas.getContext('2d');
|
||
this.particles = [];
|
||
this.particleCount = 80;
|
||
this.resize();
|
||
this.init();
|
||
this.animate();
|
||
window.addEventListener('resize', () => this.resize());
|
||
}
|
||
|
||
resize() {
|
||
this.canvas.width = window.innerWidth;
|
||
this.canvas.height = window.innerHeight;
|
||
}
|
||
|
||
init() {
|
||
this.particles = [];
|
||
for (let i = 0; i < this.particleCount; i++) {
|
||
this.particles.push({
|
||
x: Math.random() * this.canvas.width,
|
||
y: Math.random() * this.canvas.height,
|
||
vx: (Math.random() - 0.5) * 0.5,
|
||
vy: (Math.random() - 0.5) * 0.5,
|
||
size: Math.random() * 2 + 1,
|
||
opacity: Math.random() * 0.5 + 0.2
|
||
});
|
||
}
|
||
}
|
||
|
||
animate() {
|
||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
|
||
// 获取当前主题色
|
||
const style = getComputedStyle(document.documentElement);
|
||
const accentColor = style.getPropertyValue('--accent-primary').trim() || '#3b82f6';
|
||
|
||
this.particles.forEach((p, i) => {
|
||
// 更新位置
|
||
p.x += p.vx;
|
||
p.y += p.vy;
|
||
|
||
// 边界检测
|
||
if (p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
|
||
if (p.y < 0 || p.y > this.canvas.height) p.vy *= -1;
|
||
|
||
// 绘制粒子
|
||
this.ctx.beginPath();
|
||
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
||
this.ctx.fillStyle = accentColor.replace(')', `, ${p.opacity})`).replace('rgb', 'rgba');
|
||
this.ctx.fill();
|
||
|
||
// 连接附近粒子
|
||
for (let j = i + 1; j < this.particles.length; j++) {
|
||
const p2 = this.particles[j];
|
||
const dx = p.x - p2.x;
|
||
const dy = p.y - p2.y;
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
|
||
if (dist < 150) {
|
||
this.ctx.beginPath();
|
||
this.ctx.moveTo(p.x, p.y);
|
||
this.ctx.lineTo(p2.x, p2.y);
|
||
this.ctx.strokeStyle = accentColor.replace(')', `, ${0.1 * (1 - dist / 150)})`).replace('rgb', 'rgba');
|
||
this.ctx.stroke();
|
||
}
|
||
}
|
||
});
|
||
|
||
requestAnimationFrame(() => this.animate());
|
||
}
|
||
}
|
||
|
||
// ==================== 主题管理 ====================
|
||
const themes = ['default', 'nebula', 'matrix', 'cyber', 'frost'];
|
||
let currentThemeIndex = 0;
|
||
|
||
function toggleTheme() {
|
||
currentThemeIndex = (currentThemeIndex + 1) % themes.length;
|
||
const theme = themes[currentThemeIndex];
|
||
|
||
if (theme === 'default') {
|
||
document.documentElement.removeAttribute('data-theme');
|
||
} else {
|
||
document.documentElement.setAttribute('data-theme', theme);
|
||
}
|
||
|
||
localStorage.setItem('api-tester-theme', theme);
|
||
}
|
||
|
||
function loadTheme() {
|
||
const saved = localStorage.getItem('api-tester-theme');
|
||
if (saved && themes.includes(saved)) {
|
||
currentThemeIndex = themes.indexOf(saved);
|
||
if (saved !== 'default') {
|
||
document.documentElement.setAttribute('data-theme', saved);
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== API 请求 ====================
|
||
async function sendRequest() {
|
||
const sendBtn = document.getElementById('send-btn');
|
||
const method = document.getElementById('method-select').value;
|
||
const url = document.getElementById('url-input').value.trim();
|
||
|
||
if (!url) {
|
||
showToast('请输入 URL', 'error');
|
||
return;
|
||
}
|
||
|
||
// 收集请求数据
|
||
const headers = collectKeyValues('headers-editor');
|
||
const params = collectKeyValues('params-editor');
|
||
const bodyType = document.querySelector('input[name="bodyType"]:checked')?.value || 'none';
|
||
const body = bodyType !== 'none' ? document.getElementById('body-editor').value : null;
|
||
const authType = document.getElementById('auth-type').value;
|
||
const authConfig = collectAuthConfig(authType);
|
||
|
||
// 显示加载状态
|
||
sendBtn.classList.add('loading');
|
||
|
||
try {
|
||
const response = await fetch('/api/request', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
method, url, headers, params, body,
|
||
bodyType: bodyType !== 'none' ? bodyType : null,
|
||
authType: authType !== 'none' ? authType : null,
|
||
authConfig
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
displayResponse(result);
|
||
|
||
} catch (error) {
|
||
displayResponse({ success: false, error: error.message });
|
||
} finally {
|
||
sendBtn.classList.remove('loading');
|
||
}
|
||
}
|
||
|
||
// ==================== 辅助函数 ====================
|
||
function collectKeyValues(editorId) {
|
||
const editor = document.getElementById(editorId);
|
||
const rows = editor.querySelectorAll('.kv-row');
|
||
const result = {};
|
||
|
||
rows.forEach(row => {
|
||
const key = row.querySelector('.kv-key')?.value.trim();
|
||
const value = row.querySelector('.kv-value')?.value.trim();
|
||
if (key) result[key] = value || '';
|
||
});
|
||
|
||
return Object.keys(result).length > 0 ? result : null;
|
||
}
|
||
|
||
function collectAuthConfig(authType) {
|
||
if (authType === 'none') return null;
|
||
|
||
const config = {};
|
||
const container = document.getElementById('auth-config');
|
||
const inputs = container.querySelectorAll('input');
|
||
|
||
inputs.forEach(input => {
|
||
if (input.dataset.key) {
|
||
config[input.dataset.key] = input.value;
|
||
}
|
||
});
|
||
|
||
return config;
|
||
}
|
||
|
||
function displayResponse(result) {
|
||
const statusCode = document.getElementById('status-code');
|
||
const statusText = document.getElementById('status-text');
|
||
const responseTime = document.getElementById('response-time');
|
||
const responseSize = document.getElementById('response-size');
|
||
const responseBody = document.getElementById('response-body');
|
||
const responseHeaders = document.getElementById('response-headers-view');
|
||
|
||
if (result.success) {
|
||
const code = result.statusCode;
|
||
statusCode.textContent = code;
|
||
statusCode.className = 'status-code ' + (code < 300 ? 'success' : code < 400 ? 'redirect' : 'error');
|
||
statusText.textContent = getStatusText(code);
|
||
responseTime.textContent = `${result.duration}ms`;
|
||
responseSize.textContent = formatBytes(result.size || 0);
|
||
|
||
// 格式化响应体
|
||
let body = result.body;
|
||
try {
|
||
const parsed = JSON.parse(body);
|
||
body = JSON.stringify(parsed, null, 2);
|
||
} catch {}
|
||
responseBody.querySelector('code').textContent = body;
|
||
|
||
// 响应头
|
||
if (result.headers) {
|
||
responseHeaders.querySelector('code').textContent =
|
||
JSON.stringify(result.headers, null, 2);
|
||
}
|
||
} else {
|
||
statusCode.textContent = 'ERR';
|
||
statusCode.className = 'status-code error';
|
||
statusText.textContent = result.error || '请求失败';
|
||
responseTime.textContent = result.duration ? `${result.duration}ms` : '--';
|
||
responseSize.textContent = '--';
|
||
responseBody.querySelector('code').textContent = result.error || '请求失败';
|
||
}
|
||
}
|
||
|
||
function getStatusText(code) {
|
||
const statusTexts = {
|
||
200: 'OK', 201: 'Created', 204: 'No Content',
|
||
301: 'Moved Permanently', 302: 'Found', 304: 'Not Modified',
|
||
400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden',
|
||
404: 'Not Found', 405: 'Method Not Allowed', 500: 'Internal Server Error',
|
||
502: 'Bad Gateway', 503: 'Service Unavailable'
|
||
};
|
||
return statusTexts[code] || 'Unknown';
|
||
}
|
||
|
||
function formatBytes(bytes) {
|
||
if (bytes === 0) return '0 B';
|
||
const k = 1024;
|
||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
}
|
||
|
||
function showToast(message, type = 'info') {
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast toast-${type}`;
|
||
toast.textContent = message;
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
padding: 12px 24px;
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--${type === 'error' ? 'error' : 'accent-primary'});
|
||
color: var(--text-primary);
|
||
border-radius: 8px;
|
||
z-index: 9999;
|
||
animation: slideIn 0.3s ease;
|
||
`;
|
||
document.body.appendChild(toast);
|
||
setTimeout(() => toast.remove(), 3000);
|
||
}
|
||
|
||
// ==================== 认证配置 UI ====================
|
||
function updateAuthUI(authType) {
|
||
const container = document.getElementById('auth-config');
|
||
container.innerHTML = '';
|
||
|
||
const configs = {
|
||
bearer: [{ key: 'token', label: 'Token', type: 'password' }],
|
||
basic: [
|
||
{ key: 'username', label: '用户名', type: 'text' },
|
||
{ key: 'password', label: '密码', type: 'password' }
|
||
],
|
||
apikey: [
|
||
{ key: 'key', label: 'Key Name', type: 'text' },
|
||
{ key: 'value', label: 'Key Value', type: 'password' },
|
||
{ key: 'location', label: '位置 (header/query)', type: 'text', default: 'header' }
|
||
]
|
||
};
|
||
|
||
const fields = configs[authType] || [];
|
||
|
||
fields.forEach(field => {
|
||
const group = document.createElement('div');
|
||
group.className = 'auth-input-group';
|
||
group.innerHTML = `
|
||
<label>${field.label}</label>
|
||
<input type="${field.type}" data-key="${field.key}"
|
||
value="${field.default || ''}" placeholder="${field.label}">
|
||
`;
|
||
container.appendChild(group);
|
||
});
|
||
}
|
||
|
||
// ==================== Key-Value 编辑器 ====================
|
||
function addKVRow(editorId) {
|
||
const editor = document.getElementById(editorId);
|
||
const row = document.createElement('div');
|
||
row.className = 'kv-row';
|
||
row.innerHTML = `
|
||
<input type="text" class="kv-key" placeholder="Key">
|
||
<input type="text" class="kv-value" placeholder="Value">
|
||
<button class="kv-remove">×</button>
|
||
`;
|
||
editor.appendChild(row);
|
||
|
||
row.querySelector('.kv-remove').addEventListener('click', () => row.remove());
|
||
}
|
||
|
||
// ==================== 标签页切换 ====================
|
||
function setupTabs() {
|
||
// 请求配置标签页
|
||
document.querySelectorAll('.request-tabs .tab-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.request-tabs .tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.request-content .tab-content').forEach(c => c.classList.remove('active'));
|
||
|
||
btn.classList.add('active');
|
||
document.getElementById(`${btn.dataset.tab}-content`).classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 响应标签页
|
||
document.querySelectorAll('.response-tabs .tab-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.response-tabs .tab-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
const isBody = btn.dataset.tab === 'response-body';
|
||
document.getElementById('response-body').classList.toggle('hidden', !isBody);
|
||
document.getElementById('response-headers-view').classList.toggle('hidden', isBody);
|
||
});
|
||
});
|
||
|
||
// 主导航标签页
|
||
document.querySelectorAll('.header-nav .nav-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.header-nav .nav-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
// 切换面板显示
|
||
const tab = btn.dataset.tab;
|
||
document.getElementById('request-panel').classList.toggle('hidden', tab !== 'request');
|
||
document.getElementById('response-panel').classList.toggle('hidden', tab !== 'request');
|
||
document.getElementById('history-panel').classList.toggle('hidden', tab !== 'history');
|
||
|
||
if (tab === 'history') loadHistory();
|
||
});
|
||
});
|
||
}
|
||
|
||
|
||
// ==================== 历史记录 ====================
|
||
async function loadHistory() {
|
||
const list = document.getElementById('history-list');
|
||
list.innerHTML = '<div style="text-align:center;color:var(--text-muted);">加载中...</div>';
|
||
|
||
try {
|
||
const response = await fetch('/api/history?size=50');
|
||
const result = await response.json();
|
||
|
||
if (result.success && result.data.length > 0) {
|
||
list.innerHTML = result.data.map(item => `
|
||
<div class="history-item" data-id="${item.id}" onclick="loadHistoryItem(${item.id})">
|
||
<span class="history-method ${item.method.toLowerCase()}">${item.method}</span>
|
||
<span class="history-url">${item.url}</span>
|
||
<span class="history-status">${item.statusCode || '--'}</span>
|
||
<span class="history-time">${new Date(item.createdAt).toLocaleString()}</span>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
list.innerHTML = '<div style="text-align:center;color:var(--text-muted);">暂无历史记录</div>';
|
||
}
|
||
} catch (error) {
|
||
list.innerHTML = '<div style="text-align:center;color:var(--error);">加载失败</div>';
|
||
}
|
||
}
|
||
|
||
async function loadHistoryItem(id) {
|
||
try {
|
||
const response = await fetch(`/api/history?size=1000`);
|
||
const result = await response.json();
|
||
const item = result.data.find(h => h.id === id);
|
||
|
||
if (item) {
|
||
document.getElementById('method-select').value = item.method;
|
||
document.getElementById('url-input').value = item.url;
|
||
|
||
// 切换回请求面板
|
||
document.querySelectorAll('.header-nav .nav-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelector('.header-nav .nav-btn[data-tab="request"]').classList.add('active');
|
||
document.getElementById('request-panel').classList.remove('hidden');
|
||
document.getElementById('response-panel').classList.remove('hidden');
|
||
document.getElementById('history-panel').classList.add('hidden');
|
||
|
||
showToast('已加载历史记录', 'info');
|
||
}
|
||
} catch (error) {
|
||
showToast('加载失败', 'error');
|
||
}
|
||
}
|
||
|
||
// ==================== 语音输入 ====================
|
||
function setupVoiceInput() {
|
||
const voiceBtn = document.getElementById('voice-input');
|
||
|
||
if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
|
||
voiceBtn.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||
const recognition = new SpeechRecognition();
|
||
recognition.lang = 'zh-CN';
|
||
recognition.continuous = false;
|
||
|
||
let isRecording = false;
|
||
|
||
voiceBtn.addEventListener('click', () => {
|
||
if (isRecording) {
|
||
recognition.stop();
|
||
voiceBtn.classList.remove('recording');
|
||
isRecording = false;
|
||
} else {
|
||
recognition.start();
|
||
voiceBtn.classList.add('recording');
|
||
isRecording = true;
|
||
}
|
||
});
|
||
|
||
recognition.onresult = (event) => {
|
||
const text = event.results[0][0].transcript;
|
||
const urlInput = document.getElementById('url-input');
|
||
urlInput.value = text;
|
||
voiceBtn.classList.remove('recording');
|
||
isRecording = false;
|
||
showToast('语音识别成功', 'info');
|
||
};
|
||
|
||
recognition.onerror = () => {
|
||
voiceBtn.classList.remove('recording');
|
||
isRecording = false;
|
||
showToast('语音识别失败', 'error');
|
||
};
|
||
}
|
||
|
||
// ==================== JSON 格式化 ====================
|
||
function setupFormatButton() {
|
||
document.getElementById('format-json-btn').addEventListener('click', () => {
|
||
const editor = document.getElementById('body-editor');
|
||
try {
|
||
const parsed = JSON.parse(editor.value);
|
||
editor.value = JSON.stringify(parsed, null, 2);
|
||
showToast('格式化成功', 'info');
|
||
} catch {
|
||
showToast('JSON 格式错误', 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
// ==================== 预设按钮 ====================
|
||
function setupPresets() {
|
||
document.querySelectorAll('.preset-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const key = btn.dataset.key;
|
||
const value = btn.dataset.value;
|
||
|
||
// 添加到 headers 编辑器
|
||
const editor = document.getElementById('headers-editor');
|
||
const rows = editor.querySelectorAll('.kv-row');
|
||
|
||
// 检查是否已存在该 key
|
||
let existingRow = null;
|
||
for (const row of rows) {
|
||
const keyInput = row.querySelector('.kv-key');
|
||
if (keyInput.value === key) {
|
||
existingRow = row;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (existingRow) {
|
||
// 更新现有行
|
||
const valueInput = existingRow.querySelector('.kv-value');
|
||
valueInput.value = value;
|
||
valueInput.focus();
|
||
// 如果是鉴权类型，光标定位到值末尾方便输入 token
|
||
if (btn.classList.contains('auth-preset')) {
|
||
valueInput.setSelectionRange(value.length, value.length);
|
||
}
|
||
} else {
|
||
// 添加新行
|
||
addKVRow('headers-editor');
|
||
const newRow = editor.lastElementChild;
|
||
newRow.querySelector('.kv-key').value = key;
|
||
const valueInput = newRow.querySelector('.kv-value');
|
||
valueInput.value = value;
|
||
|
||
// 如果是鉴权或空值类型，自动聚焦到值输入框
|
||
if (btn.classList.contains('auth-preset') || value === '') {
|
||
valueInput.focus();
|
||
valueInput.setSelectionRange(value.length, value.length);
|
||
}
|
||
}
|
||
|
||
showToast(`已添加 ${key}`, 'info');
|
||
});
|
||
});
|
||
}
|
||
|
||
// ==================== 初始化 ====================
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 初始化粒子背景
|
||
new ParticleBackground(document.getElementById('particles-canvas'));
|
||
|
||
// 加载主题
|
||
loadTheme();
|
||
|
||
// 设置事件监听
|
||
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
|
||
document.getElementById('send-btn').addEventListener('click', sendRequest);
|
||
document.getElementById('auth-type').addEventListener('change', (e) => updateAuthUI(e.target.value));
|
||
|
||
// 添加行按钮
|
||
document.querySelectorAll('.add-row-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => addKVRow(btn.dataset.target));
|
||
});
|
||
|
||
// 删除行按钮
|
||
document.querySelectorAll('.kv-remove').forEach(btn => {
|
||
btn.addEventListener('click', () => btn.parentElement.remove());
|
||
});
|
||
|
||
// 清空历史
|
||
document.getElementById('clear-history')?.addEventListener('click', async () => {
|
||
if (confirm('确定要清空所有历史记录吗？')) {
|
||
await fetch('/api/history/clear', { method: 'DELETE' });
|
||
loadHistory();
|
||
}
|
||
});
|
||
|
||
// 设置标签页
|
||
setupTabs();
|
||
setupVoiceInput();
|
||
setupFormatButton();
|
||
setupPresets();
|
||
|
||
// 键盘快捷键
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||
sendRequest();
|
||
}
|
||
});
|
||
});
|
||
|