Update static/templates/api-test.html

static/templates/api-test.html

@@ -1,7 +1,30 @@
+<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 style="font-size: 1.5em; color: var(--dark); margin-bottom: 20px;">🔧 API 接口测试工具</h2>
-        <p style="color: #64748b; margin-bottom: 30px;">测试后端 API 接口的响应速度和数据返回</p>
+        <h2>🔧 API 接口测试工具</h2>
+        <p>测试后端 API 接口的响应速度和数据返回</p>
 
         <div class="form-group">
             <label for="apiEndpoint">📡 选择 API 端点</label>
@@ -14,15 +37,13 @@
             </select>
         </div>
 
-        <button id="testBtn" class="btn btn-primary" style="width: 100%; padding: 16px; font-size: 1.05em;">
+        <button id="testBtn" class="btn btn-primary">
             🚀 发送请求
         </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);">⏳ 等待发送请求...
+        <div class="response-container">
+            <h3>📊 响应结果</h3>
+            <pre id="apiResponse">⏳ 等待发送请求...
 
 💡 提示：选择一个 API 端点后点击"发送请求"按钮</pre>
         </div>