Spaces:

dedw231
/

amazonq2api

Running

File size: 22,512 Bytes

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>Amazonq2api 前端控制台 · 账号管理 + Chat 测试</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    :root {
      --bg:#0a0e1a;
      --panel:#0f1420;
      --muted:#8b95a8;
      --text:#e8f0ff;
      --accent:#4f8fff;
      --danger:#ff4757;
      --ok:#2ed573;
      --warn:#ffa502;
      --border:#1a2332;
      --chip:#141b28;
      --code:#0d1218;
      --glow:rgba(79,143,255,.15);
    }
    * { box-sizing:border-box; }
    html, body { height:100%; margin:0; }
    body {
      padding:0 0 40px;
      background:radial-gradient(ellipse at top, #0f1624 0%, #0a0e1a 100%);
      color:var(--text);
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans,Arial,sans-serif;
      line-height:1.6;
    }
    h1,h2,h3 { font-weight:700; letter-spacing:-.02em; margin:0; }
    h1 { font-size:28px; margin:24px 0 12px; background:linear-gradient(135deg,#4f8fff,#7b9fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    h2 { font-size:18px; margin:20px 0 16px; color:#c5d4ff; }
    h3 { font-size:15px; margin:16px 0 10px; color:#a8b8d8; }
    .container { max-width:1280px; margin:0 auto; padding:20px; }
    .grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    @media(max-width:1024px){ .grid { grid-template-columns:1fr; } }
    .panel {
      background:linear-gradient(145deg,rgba(15,20,32,.8),rgba(10,14,26,.9));
      border:1px solid var(--border);
      border-radius:16px;
      padding:24px;
      box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(79,143,255,.08),inset 0 1px 0 rgba(255,255,255,.03);
      backdrop-filter:blur(12px);
      transition:transform .2s,box-shadow .2s;
    }
    .panel:hover { transform:translateY(-2px); box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(79,143,255,.12),inset 0 1px 0 rgba(255,255,255,.04); }
    .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    label { color:var(--muted); font-size:13px; font-weight:500; letter-spacing:.01em; }
    .field { display:flex; flex-direction:column; gap:8px; flex:1; min-width:200px; }
    input,textarea,select {
      background:rgba(12,16,28,.6);
      color:var(--text);
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px 14px;
      outline:none;
      transition:all .2s;
      font-size:14px;
      box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
    }
    input:focus,textarea:focus,select:focus {
      border-color:var(--accent);
      box-shadow:0 0 0 3px var(--glow),inset 0 1px 2px rgba(0,0,0,.2);
      background:rgba(12,16,28,.8);
    }
    textarea { min-height:140px; resize:vertical; font-family:ui-monospace,monospace; }
    button {
      background:linear-gradient(135deg,#2563eb,#1e40af);
      color:#fff;
      border:none;
      border-radius:12px;
      padding:12px 20px;
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      transition:all .2s;
      box-shadow:0 4px 16px rgba(37,99,235,.3),inset 0 1px 0 rgba(255,255,255,.1);
      position:relative;
      overflow:hidden;
    }
    button:before {
      content:'';
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
      opacity:0;
      transition:opacity .2s;
    }
    button:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.15); }
    button:hover:before { opacity:1; }
    button:active { transform:translateY(0); }
    button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
    .btn-secondary { background:linear-gradient(135deg,#1e293b,#0f172a); box-shadow:0 4px 16px rgba(15,23,42,.3),inset 0 1px 0 rgba(255,255,255,.05); }
    .btn-secondary:hover { box-shadow:0 6px 20px rgba(15,23,42,.4),inset 0 1px 0 rgba(255,255,255,.08); }
    .btn-danger { background:linear-gradient(135deg,#dc2626,#991b1b); box-shadow:0 4px 16px rgba(220,38,38,.3),inset 0 1px 0 rgba(255,255,255,.1); }
    .btn-danger:hover { box-shadow:0 6px 20px rgba(220,38,38,.4),inset 0 1px 0 rgba(255,255,255,.15); }
    .btn-warn { background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 4px 16px rgba(245,158,11,.3),inset 0 1px 0 rgba(255,255,255,.1); }
    .btn-warn:hover { box-shadow:0 6px 20px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.15); }
    .kvs { display:grid; grid-template-columns:160px 1fr; gap:10px 16px; font-size:13px; }
    .muted { color:var(--muted); }
    .chip {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 12px;
      background:rgba(20,27,40,.8);
      border:1px solid var(--border);
      border-radius:20px;
      color:#a8b8ff;
      font-size:12px;
      font-weight:500;
      box-shadow:0 2px 8px rgba(0,0,0,.2);
    }
    .list { display:flex; flex-direction:column; gap:12px; max-height:400px; overflow:auto; padding:2px; }
    .list::-webkit-scrollbar { width:8px; }
    .list::-webkit-scrollbar-track { background:rgba(0,0,0,.2); border-radius:4px; }
    .list::-webkit-scrollbar-thumb { background:rgba(79,143,255,.3); border-radius:4px; }
    .list::-webkit-scrollbar-thumb:hover { background:rgba(79,143,255,.5); }
    .card {
      border:1px solid var(--border);
      border-radius:14px;
      padding:16px;
      background:linear-gradient(145deg,rgba(12,19,34,.6),rgba(10,14,26,.8));
      display:flex;
      flex-direction:column;
      gap:12px;
      box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.02);
      transition:all .2s;
    }
    .card:hover { border-color:rgba(79,143,255,.3); box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03); }
    .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
    .code {
      background:var(--code);
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px;
      color:#d8e8ff;
      max-height:300px;
      overflow:auto;
      white-space:pre-wrap;
      font-size:13px;
      line-height:1.6;
      box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
    }
    .code::-webkit-scrollbar { width:8px; height:8px; }
    .code::-webkit-scrollbar-track { background:rgba(0,0,0,.2); border-radius:4px; }
    .code::-webkit-scrollbar-thumb { background:rgba(79,143,255,.3); border-radius:4px; }
    .right { margin-left:auto; }
    .sep { height:1px; background:linear-gradient(90deg,transparent,rgba(79,143,255,.2),transparent); margin:16px 0; }
    .status-ok { color:var(--ok); font-weight:600; }
    .status-fail { color:var(--danger); font-weight:600; }
    .switch { position:relative; display:inline-block; width:50px; height:26px; }
    .switch input { opacity:0; width:0; height:0; }
    .slider {
      position:absolute;
      cursor:pointer;
      top:0;left:0;right:0;bottom:0;
      background:linear-gradient(135deg,#374151,#1f2937);
      transition:.3s;
      border-radius:26px;
      border:1px solid var(--border);
      box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
    }
    .slider:before {
      position:absolute;
      content:"";
      height:20px;
      width:20px;
      left:3px;
      bottom:2px;
      background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
      transition:.3s;
      border-radius:50%;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
    }
    input:checked+.slider { background:linear-gradient(135deg,#3b82f6,#2563eb); box-shadow:0 0 12px rgba(59,130,246,.4),inset 0 2px 4px rgba(0,0,0,.2); }
    input:checked+.slider:before { transform:translateX(24px); }
    @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    .panel { animation:fadeIn .4s ease-out; }
    .tabs { display:flex; gap:8px; margin:20px 0 16px; border-bottom:2px solid var(--border); }
    .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; }
    .tab:hover { color:var(--text); background:rgba(79,143,255,.05); }
    .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
    .tab-content { display:none; }
    .tab-content.active { display:block; }
  </style>
</head>
<body>
  <div class="container">
    <h1>v2 前端控制台</h1>

    <div class="tabs">
      <button class="tab active" onclick="switchTab('accounts')">账号管理</button>
      <button class="tab" onclick="switchTab('create')">创建账号</button>
      <button class="tab" onclick="switchTab('login')">URL登录</button>
      <button class="tab" onclick="switchTab('chat')">Chat测试</button>
    </div>

    <div id="tab-accounts" class="tab-content active">
      <div class="panel">
        <h2>账号管理</h2>
        <div class="row">
          <button class="btn-secondary" onclick="loadAccounts()">刷新列表</button>
        </div>
        <div class="list" id="accounts"></div>
      </div>
    </div>

    <div id="tab-create" class="tab-content">
      <div class="panel">
        <h2>创建账号</h2>
        <div class="row">
          <div class="field"><label>label</label><input id="new_label" /></div>
          <div class="field"><label>clientId</label><input id="new_clientId" /></div>
          <div class="field"><label>clientSecret</label><input id="new_clientSecret" /></div>
        </div>
        <div class="row">
          <div class="field"><label>refreshToken</label><input id="new_refreshToken" /></div>
          <div class="field"><label>accessToken</label><input id="new_accessToken" /></div>
        </div>
        <div class="row">
          <div class="field">
            <label>other（JSON，可选）</label>
            <textarea id="new_other" placeholder='{"note":"备注"}'></textarea>
          </div>
          <div class="field" style="max-width:220px">
            <label>启用（仅启用账号会被用于请求）</label>
            <div>
              <label class="switch">
                <input id="new_enabled" type="checkbox" checked />
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>
        <div class="row">
          <button onclick="createAccount()">创建</button>
        </div>
      </div>
    </div>

    <div id="tab-login" class="tab-content">
      <div class="panel">
        <h2>URL 登录（5分钟超时）</h2>
        <div class="row">
          <div class="field"><label>label（可选）</label><input id="auth_label" /></div>
          <div class="field" style="max-width:220px">
            <label>启用（登录成功后新账号是否启用）</label>
            <div>
              <label class="switch">
                <input id="auth_enabled" type="checkbox" checked />
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>
        <div class="row">
          <button onclick="startAuth()">开始登录</button>
          <button class="btn-secondary" onclick="claimAuth()">等待授权并创建账号</button>
        </div>
        <div class="field">
          <label>登录信息</label>
          <pre class="code mono" id="auth_info">尚未开始</pre>
        </div>
      </div>
    </div>

    <div id="tab-chat" class="tab-content">
      <div class="panel">
        <h2>Chat 测试（OpenAI 兼容 /v1/chat/completions）</h2>
        <div class="row">
          <div class="field" style="max-width:300px">
            <label>model</label>
            <input id="model" value="claude-sonnet-4" />
          </div>
          <div class="field" style="max-width:180px">
            <label>是否流式</label>
            <select id="stream">
              <option value="false">false（默认）</option>
              <option value="true">true（SSE）</option>
            </select>
          </div>
          <button class="right" onclick="send()">发送请求</button>
        </div>
        <div class="field">
          <label>messages（JSON）</label>
          <textarea id="messages">[
  {"role":"system","content":"你是一个乐于助人的助手"},
  {"role":"user","content":"你好，请讲一个简短的故事"}
]</textarea>
        </div>
        <div class="field">
          <label>响应</label>
          <pre class="code mono" id="out"></pre>
        </div>
      </div>
    </div>
  </div>


<script>
function switchTab(name) {
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
  event.target.classList.add('active');
  document.getElementById('tab-' + name).classList.add('active');
}

function api(path){
  const pathClean = ('/' + (path || '').replace(/^\/+/, '')).replace(/\/{2,}/g, '/');
  return pathClean;
}

function renderAccounts(list){
  const root = document.getElementById('accounts');
  root.innerHTML = '';
  if (!Array.isArray(list) || list.length === 0) {
    const empty = document.createElement('div');
    empty.className = 'muted';
    empty.textContent = '暂无账号';
    root.appendChild(empty);
    return;
  }
  for (const acc of list) {
    const card = document.createElement('div');
    card.className = 'card';

    const header = document.createElement('div');
    header.className = 'row';
    const name = document.createElement('div');
    name.innerHTML = '<strong>' + (acc.label || '(无标签)') + '</strong>';
    const id = document.createElement('div');
    id.className = 'chip mono';
    id.textContent = acc.id;

    const spacer = document.createElement('div');
    spacer.className = 'right';

    // Enabled toggle
    const toggleWrap = document.createElement('div');
    const toggleLabel = document.createElement('label');
    toggleLabel.style.marginRight = '6px';
    toggleLabel.className = 'muted';
    toggleLabel.textContent = '启用';
    const toggle = document.createElement('label');
    toggle.className = 'switch';
    const chk = document.createElement('input');
    chk.type = 'checkbox';
    chk.checked = !!acc.enabled;
    chk.onchange = async () => {
      try {
        await updateAccount(acc.id, { enabled: chk.checked });
      } catch(e) {
        // revert if failed
        chk.checked = !chk.checked;
      }
    };
    const slider = document.createElement('span');
    slider.className = 'slider';
    toggle.appendChild(chk); toggle.appendChild(slider);
    toggleWrap.appendChild(toggleLabel); toggleWrap.appendChild(toggle);

    const refreshBtn = document.createElement('button');
    refreshBtn.className = 'btn-warn';
    refreshBtn.textContent = '刷新Token';
    refreshBtn.onclick = () => refreshAccount(acc.id);

    const delBtn = document.createElement('button');
    delBtn.className = 'btn-danger';
    delBtn.textContent = '删除';
    delBtn.onclick = () => deleteAccount(acc.id);

    header.appendChild(name);
    header.appendChild(id);
    header.appendChild(spacer);
    header.appendChild(toggleWrap);
    header.appendChild(refreshBtn);
    header.appendChild(delBtn);
    card.appendChild(header);

    const meta = document.createElement('div');
    meta.className = 'kvs mono';
    function row(k, v) {
      const kEl = document.createElement('div'); kEl.className = 'muted'; kEl.textContent = k;
      const vEl = document.createElement('div'); vEl.textContent = v ?? '';
      meta.appendChild(kEl); meta.appendChild(vEl);
    }
    row('enabled', String(!!acc.enabled));
    row('success_count', acc.success_count ?? 0);
    row('error_count', acc.error_count ?? 0);
    row('last_refresh_status', acc.last_refresh_status);
    row('last_refresh_time', acc.last_refresh_time);
    row('clientId', acc.clientId);
    row('hasRefreshToken', acc.refreshToken ? 'yes' : 'no');
    row('hasAccessToken', acc.accessToken ? 'yes' : 'no');
    row('created_at', acc.created_at);
    row('updated_at', acc.updated_at);
    if (acc.other) {
      row('other', JSON.stringify(acc.other));
    }
    card.appendChild(meta);

    // quick edit form (label, accessToken)
    const editRow = document.createElement('div');
    editRow.className = 'row';
    editRow.style.marginTop = '8px';
    const labelField = document.createElement('input');
    labelField.placeholder = 'label';
    labelField.value = acc.label || '';
    const accessField = document.createElement('input');
    accessField.placeholder = 'accessToken（可选）';
    accessField.value = acc.accessToken || '';
    const saveBtn = document.createElement('button');
    saveBtn.className = 'btn-secondary';
    saveBtn.textContent = '保存';
    saveBtn.onclick = async () => {
      await updateAccount(acc.id, { label: labelField.value, accessToken: accessField.value });
    };
    editRow.appendChild(labelField);
    editRow.appendChild(accessField);
    editRow.appendChild(saveBtn);
    card.appendChild(editRow);

    root.appendChild(card);
  }
}

async function loadAccounts(){
  try{
    const r = await fetch(api('/v2/accounts'));
    const j = await r.json();
    renderAccounts(j);
  } catch(e){
    alert('加载账户失败：' + e);
  }
}

async function createAccount(){
  const body = {
    label: document.getElementById('new_label').value.trim() || null,
    clientId: document.getElementById('new_clientId').value.trim(),
    clientSecret: document.getElementById('new_clientSecret').value.trim(),
    refreshToken: document.getElementById('new_refreshToken').value.trim() || null,
    accessToken: document.getElementById('new_accessToken').value.trim() || null,
    enabled: document.getElementById('new_enabled').checked,
    other: (()=>{
      const t = document.getElementById('new_other').value.trim();
      if (!t) return null;
      try { return JSON.parse(t); } catch { alert('other 不是合法 JSON'); throw new Error('bad other'); }
    })()
  };
  try{
    const r = await fetch(api('/v2/accounts'), {
      method:'POST',
      headers:{ 'content-type':'application/json' },
      body: JSON.stringify(body)
    });
    if (!r.ok) {
      const t = await r.text();
      throw new Error(t);
    }
    await loadAccounts();
  } catch(e){
    alert('创建失败：' + e);
  }
}

async function deleteAccount(id){
  if (!confirm('确认删除该账号？')) return;
  try{
    const r = await fetch(api('/v2/accounts/' + encodeURIComponent(id)), { method:'DELETE' });
    if (!r.ok) { throw new Error(await r.text()); }
    await loadAccounts();
  } catch(e){
    alert('删除失败：' + e);
  }
}

async function updateAccount(id, patch){
  try{
    const r = await fetch(api('/v2/accounts/' + encodeURIComponent(id)), {
      method:'PATCH',
      headers:{ 'content-type':'application/json' },
      body: JSON.stringify(patch)
    });
    if (!r.ok) { throw new Error(await r.text()); }
    await loadAccounts();
  } catch(e){
    alert('更新失败：' + e);
  }
}

async function refreshAccount(id){
  try{
    const r = await fetch(api('/v2/accounts/' + encodeURIComponent(id) + '/refresh'), { method:'POST' });
    if (!r.ok) { throw new Error(await r.text()); }
    await loadAccounts();
  } catch(e){
    alert('刷新失败：' + e);
  }
}

 // URL Login (Device Authorization)
 let currentAuth = null;
 async function startAuth(){
   const body = {
     label: (document.getElementById('auth_label').value || '').trim() || null,
     enabled: document.getElementById('auth_enabled').checked
   };
   try {
     const r = await fetch(api('/v2/auth/start'), {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify(body)
     });
     if (!r.ok) throw new Error(await r.text());
     const j = await r.json();
     currentAuth = j;
     const info = [
       '验证链接: ' + j.verificationUriComplete,
       '用户代码: ' + (j.userCode || ''),
       'authId: ' + j.authId,
       'expiresIn: ' + j.expiresIn + 's',
       'interval: ' + j.interval + 's'
     ].join('\\n');
     const el = document.getElementById('auth_info');
     el.textContent = info + '\\n\\n请在新窗口中打开上述链接完成登录。';
     try { window.open(j.verificationUriComplete, '_blank'); } catch {}
   } catch(e){
     document.getElementById('auth_info').textContent = '启动失败：' + e;
   }
 }

 async function claimAuth(){
   if (!currentAuth || !currentAuth.authId) {
     document.getElementById('auth_info').textContent = '请先点击“开始登录”。';
     return;
   }
   document.getElementById('auth_info').textContent += '\\n\\n正在等待授权并创建账号（最多5分钟）...';
   try{
     const r = await fetch(api('/v2/auth/claim/' + encodeURIComponent(currentAuth.authId)), { method: 'POST' });
     const text = await r.text();
     let j;
     try { j = JSON.parse(text); } catch { j = { raw: text }; }
     document.getElementById('auth_info').textContent = '完成：\\n' + JSON.stringify(j, null, 2);
     await loadAccounts();
   } catch(e){
     document.getElementById('auth_info').textContent += '\\n失败：' + e;
   }
 }

async function send() {
  const model = document.getElementById('model').value.trim();
  const stream = document.getElementById('stream').value === 'true';
  const out = document.getElementById('out');
  out.textContent = '';

  let messages;
  try { messages = JSON.parse(document.getElementById('messages').value); }
  catch(e){ out.textContent = 'messages 不是合法 JSON'; return; }

  const body = { model, messages, stream };
  const headers = { 'content-type': 'application/json' };

  if (!stream) {
    const r = await fetch(api('/v1/chat/completions'), {
      method:'POST',
      headers,
      body: JSON.stringify(body)
    });
    const text = await r.text();
    try { out.textContent = JSON.stringify(JSON.parse(text), null, 2); }
    catch { out.textContent = text; }
  } else {
    const r = await fetch(api('/v1/chat/completions'), {
      method:'POST',
      headers,
      body: JSON.stringify(body)
    });
    const reader = r.body.getReader();
    const decoder = new TextDecoder();
    while (true) {
      const {value, done} = await reader.read();
      if (done) break;
      out.textContent += decoder.decode(value, {stream:true});
    }
  }
}

window.addEventListener('DOMContentLoaded', () => {
  loadAccounts();
});
</script>
</body>
</html>