209 lines
12 KiB
HTML
209 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>API Tester - 未来科技接口测试工具</title>
|
||
<link rel="stylesheet" href="/static/css/main.css">
|
||
<!-- 使用国内 CDN 加载字体，避免 Google Fonts 超时 -->
|
||
<link href="https://fonts.loli.net/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* 备用字体，防止 CDN 也超时 */
|
||
@font-face {
|
||
font-family: 'JetBrains Mono';
|
||
src: local('JetBrains Mono'), local('Menlo'), local('Monaco'), local('Consolas');
|
||
font-display: swap;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 动态粒子背景 -->
|
||
<canvas id="particles-canvas"></canvas>
|
||
|
||
<!-- 主容器 -->
|
||
<div class="app-container">
|
||
<!-- 头部导航 -->
|
||
<header class="app-header">
|
||
<div class="logo">
|
||
<span class="logo-icon">⚡</span>
|
||
<span class="logo-text">API Tester</span>
|
||
<span class="logo-badge">Pro</span>
|
||
</div>
|
||
<nav class="header-nav">
|
||
<button class="nav-btn active" data-tab="request">请求</button>
|
||
<button class="nav-btn" data-tab="history">历史</button>
|
||
<button class="nav-btn" data-tab="collections">收藏</button>
|
||
<button class="nav-btn" data-tab="environments">环境</button>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<button class="theme-btn" id="theme-toggle" title="切换主题">🎨</button>
|
||
<button class="voice-btn" id="voice-input" title="语音输入">🎤</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="app-main">
|
||
<!-- 请求面板 -->
|
||
<section class="panel request-panel" id="request-panel">
|
||
<!-- URL 输入区 -->
|
||
<div class="url-bar">
|
||
<select class="method-select" id="method-select">
|
||
<option value="GET">GET</option>
|
||
<option value="POST">POST</option>
|
||
<option value="PUT">PUT</option>
|
||
<option value="DELETE">DELETE</option>
|
||
<option value="PATCH">PATCH</option>
|
||
<option value="HEAD">HEAD</option>
|
||
<option value="OPTIONS">OPTIONS</option>
|
||
</select>
|
||
<input type="text" class="url-input" id="url-input"
|
||
placeholder="输入请求 URL，例如: https://api.example.com/users">
|
||
<button class="send-btn" id="send-btn">
|
||
<span class="btn-text">发送</span>
|
||
<span class="btn-icon">→</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 请求配置标签页 -->
|
||
<div class="request-tabs">
|
||
<button class="tab-btn active" data-tab="params">Params</button>
|
||
<button class="tab-btn" data-tab="headers">Headers</button>
|
||
<button class="tab-btn" data-tab="body">Body</button>
|
||
<button class="tab-btn" data-tab="auth">Auth</button>
|
||
</div>
|
||
|
||
<!-- 请求配置内容 -->
|
||
<div class="request-content">
|
||
<!-- Params 面板 -->
|
||
<div class="tab-content active" id="params-content">
|
||
<div class="kv-editor" id="params-editor">
|
||
<div class="kv-row">
|
||
<input type="text" class="kv-key" placeholder="Key">
|
||
<input type="text" class="kv-value" placeholder="Value">
|
||
<button class="kv-remove">×</button>
|
||
</div>
|
||
</div>
|
||
<button class="add-row-btn" data-target="params-editor">+ 添加参数</button>
|
||
</div>
|
||
|
||
<!-- Headers 面板 -->
|
||
<div class="tab-content" id="headers-content">
|
||
<div class="kv-editor" id="headers-editor">
|
||
<div class="kv-row">
|
||
<input type="text" class="kv-key" placeholder="Header Name">
|
||
<input type="text" class="kv-value" placeholder="Header Value">
|
||
<button class="kv-remove">×</button>
|
||
</div>
|
||
</div>
|
||
<button class="add-row-btn" data-target="headers-editor">+ 添加请求头</button>
|
||
|
||
<!-- 常用请求头预设 -->
|
||
<div class="header-presets-container">
|
||
<div class="preset-group">
|
||
<span class="preset-label">Content-Type:</span>
|
||
<button class="preset-btn" data-key="Content-Type" data-value="application/json">JSON</button>
|
||
<button class="preset-btn" data-key="Content-Type" data-value="application/x-www-form-urlencoded">Form</button>
|
||
<button class="preset-btn" data-key="Content-Type" data-value="multipart/form-data">Multipart</button>
|
||
<button class="preset-btn" data-key="Content-Type" data-value="text/plain">Text</button>
|
||
<button class="preset-btn" data-key="Content-Type" data-value="application/xml">XML</button>
|
||
</div>
|
||
<div class="preset-group">
|
||
<span class="preset-label">Accept:</span>
|
||
<button class="preset-btn" data-key="Accept" data-value="application/json">JSON</button>
|
||
<button class="preset-btn" data-key="Accept" data-value="*/*">Any</button>
|
||
<button class="preset-btn" data-key="Accept" data-value="text/html">HTML</button>
|
||
</div>
|
||
<div class="preset-group">
|
||
<span class="preset-label">鉴权:</span>
|
||
<button class="preset-btn auth-preset" data-key="Authorization" data-value="Bearer ">Bearer Token</button>
|
||
<button class="preset-btn auth-preset" data-key="Authorization" data-value="Basic ">Basic Auth</button>
|
||
<button class="preset-btn" data-key="X-API-Key" data-value="">API Key</button>
|
||
<button class="preset-btn" data-key="X-Access-Token" data-value="">Access Token</button>
|
||
</div>
|
||
<div class="preset-group">
|
||
<span class="preset-label">其他常用:</span>
|
||
<button class="preset-btn" data-key="User-Agent" data-value="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36">User-Agent</button>
|
||
<button class="preset-btn" data-key="Cache-Control" data-value="no-cache">No Cache</button>
|
||
<button class="preset-btn" data-key="Origin" data-value="">Origin</button>
|
||
<button class="preset-btn" data-key="Referer" data-value="">Referer</button>
|
||
<button class="preset-btn" data-key="Cookie" data-value="">Cookie</button>
|
||
<button class="preset-btn" data-key="X-Requested-With" data-value="XMLHttpRequest">AJAX</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body 面板 -->
|
||
<div class="tab-content" id="body-content">
|
||
<div class="body-type-selector">
|
||
<label><input type="radio" name="bodyType" value="none" checked> none</label>
|
||
<label><input type="radio" name="bodyType" value="json"> JSON</label>
|
||
<label><input type="radio" name="bodyType" value="form"> form-data</label>
|
||
<label><input type="radio" name="bodyType" value="xml"> XML</label>
|
||
<label><input type="radio" name="bodyType" value="raw"> raw</label>
|
||
</div>
|
||
<div class="body-editor-container">
|
||
<textarea class="body-editor" id="body-editor" placeholder="请求体内容..."></textarea>
|
||
<button class="format-btn" id="format-json-btn" title="格式化 JSON">{ }</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Auth 面板 -->
|
||
<div class="tab-content" id="auth-content">
|
||
<div class="auth-type-selector">
|
||
<select id="auth-type">
|
||
<option value="none">No Auth</option>
|
||
<option value="bearer">Bearer Token</option>
|
||
<option value="basic">Basic Auth</option>
|
||
<option value="apikey">API Key</option>
|
||
</select>
|
||
</div>
|
||
<div class="auth-config" id="auth-config">
|
||
<!-- 动态填充认证配置 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 响应面板 -->
|
||
<section class="panel response-panel" id="response-panel">
|
||
<div class="response-header">
|
||
<div class="response-status">
|
||
<span class="status-code" id="status-code">--</span>
|
||
<span class="status-text" id="status-text">等待请求</span>
|
||
</div>
|
||
<div class="response-meta">
|
||
<span class="meta-item"><span class="meta-label">耗时:</span> <span id="response-time">--</span></span>
|
||
<span class="meta-item"><span class="meta-label">大小:</span> <span id="response-size">--</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="response-tabs">
|
||
<button class="tab-btn active" data-tab="response-body">Body</button>
|
||
<button class="tab-btn" data-tab="response-headers">Headers</button>
|
||
</div>
|
||
<div class="response-content">
|
||
<pre class="response-body" id="response-body"><code>// 响应将显示在这里</code></pre>
|
||
<pre class="response-headers hidden" id="response-headers-view"><code></code></pre>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 历史记录面板 (隐藏) -->
|
||
<section class="panel history-panel hidden" id="history-panel">
|
||
<div class="panel-header">
|
||
<h2>请求历史</h2>
|
||
<div class="panel-actions">
|
||
<input type="text" class="search-input" id="history-search" placeholder="搜索...">
|
||
<button class="clear-btn" id="clear-history">清空历史</button>
|
||
</div>
|
||
</div>
|
||
<div class="history-list" id="history-list">
|
||
<!-- 动态填充 -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html>
|
||
|