Hugging Face's logo

Spaces:
dedw231
/
amazonq2api
Running

App Files Community
CassiopeiaCode commited on
Commit
7ab2eba
·
1 Parent(s): e00ef83

feat: 前端实现标签页布局

Browse files

- 添加标签页导航：账号管理、创建账号、URL登录、Chat测试
- 分离功能区域，避免内容挤在一起
- 改善用户体验和页面组织

Files changed (1) hide show
  1. frontend/index.html +35 -5
frontend/index.html CHANGED
@@ -178,6 +178,12 @@
178
  input:checked+.slider:before { transform:translateX(24px); }
179
  @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
180
  .panel { animation:fadeIn .4s ease-out; }
 
 
 
 
 
 
181
  </style>
182
  </head>
183
  <body>
@@ -209,15 +215,26 @@
209
  </div>
210
  </div>
211
 
212
- <div class="grid" style="margin-top:12px">
 
 
 
 
 
 
 
213
  <div class="panel">
214
  <h2>账号管理</h2>
215
  <div class="row">
216
  <button class="btn-secondary" onclick="loadAccounts()">刷新列表</button>
217
  </div>
218
  <div class="list" id="accounts"></div>
219
- <div class="sep"></div>
220
- <h3>创建账号</h3>
 
 
 
 
221
  <div class="row">
222
  <div class="field"><label>label</label><input id="new_label" /></div>
223
  <div class="field"><label>clientId</label><input id="new_clientId" /></div>
@@ -245,8 +262,12 @@
245
  <div class="row">
246
  <button onclick="createAccount()">创建</button>
247
  </div>
248
- <div class="sep"></div>
249
- <h3>URL 登录（5分钟超时）</h3>
 
 
 
 
250
  <div class="row">
251
  <div class="field"><label>label（可选）</label><input id="auth_label" /></div>
252
  <div class="field" style="max-width:220px">
@@ -268,7 +289,9 @@
268
  <pre class="code mono" id="auth_info">尚未开始</pre>
269
  </div>
270
  </div>
 
271
 
 
272
  <div class="panel">
273
  <h2>Chat 测试（OpenAI 兼容 /v1/chat/completions）</h2>
274
  <div class="row">
@@ -302,6 +325,13 @@
302
 
303
 
304
  <script>
 
 
 
 
 
 
 
305
  function baseUrl(){ return document.getElementById('base').value.trim(); }
306
  function authHeader(){
307
  const v = document.getElementById('auth').value.trim();
 
178
  input:checked+.slider:before { transform:translateX(24px); }
179
  @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
180
  .panel { animation:fadeIn .4s ease-out; }
181
+ .tabs { display:flex; gap:8px; margin:20px 0 16px; border-bottom:2px solid var(--border); }
182
+ .tab { padding:12px 24px; background:transparent; border:none; color:var(--muted); font-weight:600; font-size:14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
183
+ .tab:hover { color:var(--text); background:rgba(79,143,255,.05); }
184
+ .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
185
+ .tab-content { display:none; }
186
+ .tab-content.active { display:block; }
187
  </style>
188
  </head>
189
  <body>
 
215
  </div>
216
  </div>
217
 
218
+ <div class="tabs">
219
+ <button class="tab active" onclick="switchTab('accounts')">账号管理</button>
220
+ <button class="tab" onclick="switchTab('create')">创建账号</button>
221
+ <button class="tab" onclick="switchTab('login')">URL登录</button>
222
+ <button class="tab" onclick="switchTab('chat')">Chat测试</button>
223
+ </div>
224
+
225
+ <div id="tab-accounts" class="tab-content active">
226
  <div class="panel">
227
  <h2>账号管理</h2>
228
  <div class="row">
229
  <button class="btn-secondary" onclick="loadAccounts()">刷新列表</button>
230
  </div>
231
  <div class="list" id="accounts"></div>
232
+ </div>
233
+ </div>
234
+
235
+ <div id="tab-create" class="tab-content">
236
+ <div class="panel">
237
+ <h2>创建账号</h2>
238
  <div class="row">
239
  <div class="field"><label>label</label><input id="new_label" /></div>
240
  <div class="field"><label>clientId</label><input id="new_clientId" /></div>
 
262
  <div class="row">
263
  <button onclick="createAccount()">创建</button>
264
  </div>
265
+ </div>
266
+ </div>
267
+
268
+ <div id="tab-login" class="tab-content">
269
+ <div class="panel">
270
+ <h2>URL 登录（5分钟超时）</h2>
271
  <div class="row">
272
  <div class="field"><label>label（可选）</label><input id="auth_label" /></div>
273
  <div class="field" style="max-width:220px">
 
289
  <pre class="code mono" id="auth_info">尚未开始</pre>
290
  </div>
291
  </div>
292
+ </div>
293
 
294
+ <div id="tab-chat" class="tab-content">
295
  <div class="panel">
296
  <h2>Chat 测试（OpenAI 兼容 /v1/chat/completions）</h2>
297
  <div class="row">
 
325
 
326
 
327
  <script>
328
+ function switchTab(name) {
329
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
330
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
331
+ event.target.classList.add('active');
332
+ document.getElementById('tab-' + name).classList.add('active');
333
+ }
334
+
335
  function baseUrl(){ return document.getElementById('base').value.trim(); }
336
  function authHeader(){
337
  const v = document.getElementById('auth').value.trim();