peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工具助手添加

Browse Source
This commit is contained in:
huazhongmin
2025-12-25 18:04:10 +08:00
parent f4bc9f6dab
commit 98081456b7
31 changed files with 4306 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/templates/index.html
+208
View File
@@ -0,0 +1,208 @@
<!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>