| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Augment2Api</title> |
| <style> |
| :root { |
| --primary-color: #4361ee; |
| --secondary-color: #3f37c9; |
| --success-color: #4caf50; |
| --error-color: #f44336; |
| --bg-color: #f8f9fa; |
| --card-bg: #ffffff; |
| --text-color: #333333; |
| --border-color: #e0e0e0; |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| --radius: 8px; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
| background-color: var(--bg-color); |
| color: var(--text-color); |
| line-height: 1.6; |
| padding: 20px; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 30px; |
| padding-bottom: 15px; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| h1 { |
| font-size: 28px; |
| font-weight: 600; |
| color: black; |
| } |
| |
| h2 { |
| font-size: 20px; |
| font-weight: 500; |
| margin-bottom: 15px; |
| color: var(--secondary-color); |
| } |
| |
| .dashboard { |
| display: flex; |
| flex-direction: row; |
| gap: 20px; |
| align-items: stretch; |
| min-height: 500px; |
| } |
| |
| @media (max-width: 768px) { |
| .dashboard { |
| flex-direction: column; |
| } |
| } |
| |
| .panel { |
| background: var(--card-bg); |
| border-radius: var(--radius); |
| box-shadow: var(--shadow); |
| padding: 25px; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .panel-left { |
| width: 50%; |
| max-width: 580px; |
| flex: 1; |
| } |
| |
| .panel-right { |
| width: 50%; |
| max-width: 580px; |
| flex: 1; |
| position: sticky; |
| top: 20px; |
| } |
| |
| @media (max-width: 768px) { |
| .panel-left, .panel-right { |
| width: 100%; |
| max-width: none; |
| } |
| } |
| |
| .panel-title { |
| display: flex; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .panel-title i { |
| margin-right: 10px; |
| font-size: 20px; |
| color: var(--primary-color); |
| } |
| |
| .panel-title h2 { |
| margin-bottom: 0; |
| } |
| |
| .token-display { |
| background: var(--bg-color); |
| padding: 15px; |
| border-radius: var(--radius); |
| word-break: break-all; |
| margin: 15px 0; |
| border: 1px solid var(--border-color); |
| font-family: monospace; |
| font-size: 14px; |
| position: relative; |
| } |
| |
| .token-label { |
| font-weight: 500; |
| margin-bottom: 5px; |
| color: #666; |
| } |
| |
| button { |
| background: var(--primary-color); |
| color: white; |
| border: none; |
| padding: 10px 15px; |
| border-radius: var(--radius); |
| cursor: pointer; |
| font-size: 14px; |
| margin-top: 10px; |
| transition: background 0.3s; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| button:hover { |
| background: var(--secondary-color); |
| } |
| |
| button i { |
| margin-right: 8px; |
| } |
| |
| input, textarea { |
| width: 100%; |
| padding: 12px; |
| margin: 10px 0; |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius); |
| font-size: 14px; |
| transition: border 0.3s; |
| } |
| |
| input:focus, textarea:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| } |
| |
| textarea { |
| height: 120px; |
| resize: vertical; |
| } |
| |
| .error { |
| color: var(--error-color); |
| margin: 10px 0; |
| padding: 10px; |
| background-color: rgba(244, 67, 54, 0.1); |
| border-radius: var(--radius); |
| display: none; |
| } |
| |
| .success { |
| color: var(--success-color); |
| margin: 10px 0; |
| padding: 10px; |
| background-color: rgba(76, 175, 80, 0.1); |
| border-radius: var(--radius); |
| display: none; |
| } |
| |
| .step { |
| margin-bottom: 20px; |
| padding-bottom: 20px; |
| border-bottom: 1px dashed var(--border-color); |
| } |
| |
| .step:last-child { |
| border-bottom: none; |
| } |
| |
| .step-number { |
| display: inline-block; |
| width: 24px; |
| height: 24px; |
| background-color: var(--primary-color); |
| color: white; |
| border-radius: 50%; |
| text-align: center; |
| line-height: 24px; |
| margin-right: 10px; |
| font-size: 14px; |
| } |
| |
| |
| .icon { |
| display: inline-block; |
| width: 1em; |
| height: 1em; |
| stroke-width: 0; |
| stroke: currentColor; |
| fill: currentColor; |
| vertical-align: middle; |
| } |
| |
| |
| .token-list { |
| display: flex; |
| flex-direction: column; |
| gap: 15px; |
| margin-bottom: 15px; |
| max-height: 500px; |
| overflow-y: auto; |
| padding-right: 10px; |
| } |
| |
| .token-item { |
| background: var(--bg-color); |
| border-radius: var(--radius); |
| border: 1px solid var(--border-color); |
| overflow: hidden; |
| transition: all 0.3s ease; |
| } |
| |
| .current-token { |
| border: 2px solid var(--primary-color); |
| } |
| |
| .token-header { |
| display: flex; |
| padding: 12px 15px; |
| cursor: pointer; |
| align-items: center; |
| background: #f0f2f5; |
| } |
| |
| .token-number { |
| background: var(--primary-color); |
| color: white; |
| padding: 6px 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| min-width: 30px; |
| border-radius: 4px; |
| margin-right: 12px; |
| } |
| |
| .token-summary { |
| flex: 1; |
| font-weight: 500; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .token-toggle { |
| margin-left: 10px; |
| transition: transform 0.3s; |
| } |
| |
| .token-toggle.open { |
| transform: rotate(180deg); |
| } |
| |
| .token-details { |
| padding: 0; |
| max-height: 0; |
| overflow: hidden; |
| transition: all 0.3s ease; |
| } |
| |
| .token-details.open { |
| padding: 12px; |
| max-height: none; |
| overflow: visible; |
| } |
| |
| .token-details .token-label { |
| font-size: 13px; |
| margin-bottom: 3px; |
| } |
| |
| .token-details .token-display { |
| font-size: 13px; |
| padding: 10px; |
| margin: 5px 0 10px 0; |
| } |
| |
| .token-actions { |
| display: flex; |
| justify-content: flex-end; |
| margin-top: 8px; |
| } |
| |
| .token-actions button { |
| margin-left: 10px; |
| padding: 6px 12px; |
| font-size: 13px; |
| } |
| |
| .no-tokens { |
| padding: 20px; |
| text-align: center; |
| background: var(--bg-color); |
| border-radius: var(--radius); |
| color: #666; |
| margin-bottom: 15px; |
| } |
| |
| |
| .loading { |
| position: relative; |
| pointer-events: none; |
| } |
| |
| .loading:after { |
| content: ''; |
| display: inline-block; |
| width: 1em; |
| height: 1em; |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| border-top-color: white; |
| animation: spin 0.8s linear infinite; |
| margin-left: 8px; |
| vertical-align: middle; |
| } |
| |
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| |
| .btn-text { |
| display: inline-block; |
| } |
| |
| .loading .btn-icon { |
| display: none; |
| } |
| |
| |
| footer { |
| text-align: center; |
| margin-top: 30px; |
| padding: 15px 0; |
| color: #666; |
| font-size: 14px; |
| border-top: 1px solid var(--border-color); |
| margin-top: auto; |
| } |
| |
| footer a { |
| color: var(--primary-color); |
| text-decoration: none; |
| transition: color 0.3s; |
| } |
| |
| footer a:hover { |
| color: var(--secondary-color); |
| text-decoration: underline; |
| } |
| </style> |
| |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>Augment面板</h1> |
| </header> |
|
|
| <div class="dashboard"> |
| |
| <div class="panel panel-left"> |
| <div class="panel-title"> |
| <i class="bi bi-key-fill"></i> |
| <h2>当前Token列表</h2> |
| </div> |
| |
| <div id="token-list">加载中...</div> |
| <button id="refresh-token"><i class="bi bi-arrow-clockwise btn-icon"></i> <span class="btn-text">刷新</span></button> |
| </div> |
|
|
| |
| <div class="panel panel-right"> |
| <div class="panel-title"> |
| <i class="bi bi-shield-lock-fill"></i> |
| <h2>授权获取Token</h2> |
| </div> |
|
|
| <div class="auth-steps"> |
| <div class="step"> |
| <h3><span class="step-number">1</span> 获取授权地址</h3> |
| <p>点击下方按钮获取授权地址，然后在浏览器中打开该地址进行授权。</p> |
| <button id="get-auth-url"><i class="bi bi-link-45deg" class="btn-icon"></i> <span class="btn-text">获取授权地址</span></button> |
| <div id="auth-url" class="token-display" style="display: none;"></div> |
| </div> |
|
|
| <div class="step"> |
| <h3><span class="step-number">2</span> 提交授权响应</h3> |
| <p>完成授权后，将获得的授权响应粘贴到下面的文本框中：</p> |
| <textarea id="auth-response" placeholder='{"code":"_000baec407c57c4bf9xxxxxxxxxxxxxx","state":"0uXxxxxxxxx","tenant_url":"https://d20.api.augmentcode.com/"}'></textarea> |
| <div id="validation-message" class="error"></div> |
| <button id="submit-auth"><i class="bi bi-check2-circle" class="btn-icon"></i> <span class="btn-text">获取Token</span></button> |
| <div id="submit-result" class="success"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer> |
| Designed by <a href="https://linux.do/u/bifang/summary" target="_blank">彼方</a> |
| </footer> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| function fetchCurrentToken() { |
| fetch('/api/tokens') |
| .then(response => response.json()) |
| .then(data => { |
| if (data.status === 'success') { |
| const tokenListElement = document.getElementById('token-list'); |
| |
| if (data.tokens.length === 0) { |
| tokenListElement.innerHTML = '<div class="no-tokens">暂无可用Token，请点击右侧面板获取</div>'; |
| return; |
| } |
| |
| |
| tokenListElement.innerHTML = '<div class="token-list"></div>'; |
| const listContainer = tokenListElement.querySelector('.token-list'); |
| |
| |
| data.tokens.forEach((tokenInfo, index) => { |
| |
| const shortToken = tokenInfo.token.length > 15 |
| ? tokenInfo.token.substring(0, 15) + '...' |
| : tokenInfo.token; |
| |
| const tokenItem = document.createElement('div'); |
| tokenItem.className = 'token-item'; |
| tokenItem.innerHTML = ` |
| <div class="token-header"> |
| <div class="token-number">${index + 1}</div> |
| <div class="token-summary">${shortToken}</div> |
| <div class="token-toggle"><i class="bi bi-chevron-down"></i></div> |
| </div> |
| <div class="token-details"> |
| <div class="token-label">Token:</div> |
| <div class="token-display">${tokenInfo.token}</div> |
| <div class="token-label">租户URL:</div> |
| <div class="token-display">${tokenInfo.tenant_url}</div> |
| <div class="token-actions"> |
| <button class="delete-token" data-token="${tokenInfo.token}"> |
| <i class="bi bi-trash"></i> 删除 |
| </button> |
| </div> |
| </div> |
| `; |
| |
| listContainer.appendChild(tokenItem); |
| |
| |
| const header = tokenItem.querySelector('.token-header'); |
| const details = tokenItem.querySelector('.token-details'); |
| const toggle = tokenItem.querySelector('.token-toggle'); |
| |
| header.addEventListener('click', function() { |
| details.classList.toggle('open'); |
| toggle.classList.toggle('open'); |
| }); |
| }); |
| } else { |
| showError('获取Token列表失败: ' + (data.error || '未知错误')); |
| } |
| }) |
| .catch(error => { |
| document.getElementById('token-list').innerHTML = |
| '<div class="error" style="display:block;">请求失败: ' + error.message + '</div>'; |
| }); |
| |
| return Promise.resolve(); |
| } |
| |
| |
| function showError(message) { |
| const tokenListElement = document.getElementById('token-list'); |
| tokenListElement.innerHTML = `<div class="error" style="display:block;">${message}</div>`; |
| } |
| |
| |
| document.getElementById('get-auth-url').addEventListener('click', function() { |
| const button = this; |
| button.classList.add('loading'); |
| |
| fetch('/auth') |
| .then(response => response.json()) |
| .then(data => { |
| const authUrlElement = document.getElementById('auth-url'); |
| authUrlElement.textContent = data.authorize_url; |
| authUrlElement.style.display = 'block'; |
| }) |
| .catch(error => { |
| alert('获取授权地址失败: ' + error.message); |
| }) |
| .finally(() => { |
| button.classList.remove('loading'); |
| }); |
| }); |
| |
| |
| function validateAuthResponse(response) { |
| try { |
| const data = JSON.parse(response); |
| if (!data.code || !data.state || !data.tenant_url) { |
| return { valid: false, message: '缺少必要字段: code, state 或 tenant_url' }; |
| } |
| return { valid: true }; |
| } catch (e) { |
| return { valid: false, message: 'JSON格式无效: ' + e.message }; |
| } |
| } |
| |
| |
| document.getElementById('submit-auth').addEventListener('click', function() { |
| const button = this; |
| const authResponse = document.getElementById('auth-response').value.trim(); |
| const validationMessage = document.getElementById('validation-message'); |
| |
| |
| if (!authResponse) { |
| validationMessage.textContent = '请输入授权响应'; |
| validationMessage.style.display = 'block'; |
| return; |
| } |
| |
| const validationResult = validateAuthResponse(authResponse); |
| |
| if (!validationResult.valid) { |
| validationMessage.textContent = validationResult.message; |
| validationMessage.style.display = 'block'; |
| return; |
| } |
| |
| validationMessage.style.display = 'none'; |
| button.classList.add('loading'); |
| |
| fetch('/callback', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: authResponse |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| const submitResult = document.getElementById('submit-result'); |
| if (data.status === 'success') { |
| submitResult.textContent = 'Token获取成功！'; |
| submitResult.className = 'success'; |
| fetchCurrentToken(); |
| } else { |
| submitResult.textContent = '获取失败: ' + (data.error || '未知错误'); |
| submitResult.className = 'error'; |
| } |
| submitResult.style.display = 'block'; |
| }) |
| .catch(error => { |
| const submitResult = document.getElementById('submit-result'); |
| submitResult.textContent = '请求失败: ' + error.message; |
| submitResult.className = 'error'; |
| submitResult.style.display = 'block'; |
| }) |
| .finally(() => { |
| button.classList.remove('loading'); |
| }); |
| }); |
| |
| |
| document.getElementById('refresh-token').addEventListener('click', function() { |
| const button = this; |
| button.classList.add('loading'); |
| |
| fetchCurrentToken() |
| .finally(() => { |
| button.classList.remove('loading'); |
| }); |
| }); |
| |
| |
| document.addEventListener('click', function(e) { |
| if (e.target.closest('.delete-token')) { |
| const button = e.target.closest('.delete-token'); |
| const token = button.dataset.token; |
| |
| if (confirm('确定要删除此Token吗？')) { |
| fetch(`/api/token/${token}`, { |
| method: 'DELETE' |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.status === 'success') { |
| fetchCurrentToken(); |
| } else { |
| alert('删除失败: ' + (data.error || '未知错误')); |
| } |
| }) |
| .catch(error => { |
| alert('请求失败: ' + error.message); |
| }); |
| } |
| } |
| }); |
| |
| |
| fetchCurrentToken(); |
| }); |
| </script> |
| </body> |
| </html> |
