| <!DOCTYPE html>
|
| <html lang="zh-CN">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>API密钥测试更新</title>
|
| <link rel="stylesheet" href="/static/css/base.css">
|
| <link rel="stylesheet" href="/static/css/style.css">
|
| <style>
|
| .container {
|
| max-width: 800px;
|
| margin: 0 auto;
|
| padding: 20px;
|
| }
|
| .key-list {
|
| margin-top: 20px;
|
| border: 1px solid #e5e7eb;
|
| border-radius: 8px;
|
| overflow: hidden;
|
| }
|
| .key-item {
|
| padding: 15px;
|
| border-bottom: 1px solid #e5e7eb;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| }
|
| .key-item:last-child {
|
| border-bottom: none;
|
| }
|
| .key-item:hover {
|
| background-color: #f9fafb;
|
| }
|
| .key-info {
|
| flex-grow: 1;
|
| }
|
| .key-name {
|
| font-weight: 500;
|
| margin-bottom: 5px;
|
| }
|
| .key-value {
|
| font-family: monospace;
|
| color: #6b7280;
|
| word-break: break-all;
|
| }
|
| .key-platform {
|
| color: #4f46e5;
|
| font-size: 0.875rem;
|
| margin-bottom: 8px;
|
| }
|
| .key-status {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: flex-end;
|
| min-width: 120px;
|
| }
|
| .update-btn {
|
| padding: 6px 12px;
|
| border-radius: 6px;
|
| background-color: #4f46e5;
|
| color: white;
|
| font-size: 0.875rem;
|
| border: none;
|
| cursor: pointer;
|
| transition: background-color 0.2s;
|
| }
|
| .update-btn:hover {
|
| background-color: #4338ca;
|
| }
|
| .success-badge {
|
| margin-top: 8px;
|
| padding: 4px 8px;
|
| border-radius: 9999px;
|
| font-size: 0.75rem;
|
| background-color: #dcfce7;
|
| color: #16a34a;
|
| }
|
| .error-badge {
|
| margin-top: 8px;
|
| padding: 4px 8px;
|
| border-radius: 9999px;
|
| font-size: 0.75rem;
|
| background-color: #fee2e2;
|
| color: #dc2626;
|
| }
|
| .pending-badge {
|
| margin-top: 8px;
|
| padding: 4px 8px;
|
| border-radius: 9999px;
|
| font-size: 0.75rem;
|
| background-color: #e0f2fe;
|
| color: #0284c7;
|
| }
|
| #loading {
|
| display: none;
|
| margin: 20px auto;
|
| text-align: center;
|
| font-style: italic;
|
| color: #6b7280;
|
| }
|
| .response-container {
|
| margin-top: 15px;
|
| background-color: #f9fafb;
|
| border-radius: 6px;
|
| padding: 10px;
|
| font-family: monospace;
|
| font-size: 0.875rem;
|
| white-space: pre-wrap;
|
| word-break: break-all;
|
| display: none;
|
| max-height: 200px;
|
| overflow-y: auto;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <h1>API密钥测试与更新</h1>
|
| <p>在此页面可以测试update.py脚本的功能，验证API密钥并更新其状态。</p>
|
|
|
| <div id="loading">正在加载API密钥列表...</div>
|
|
|
| <div id="keyList" class="key-list"></div>
|
| </div>
|
|
|
| <script>
|
| document.addEventListener('DOMContentLoaded', function() {
|
| loadKeys();
|
|
|
|
|
| const container = document.querySelector('.container');
|
| const backButton = document.createElement('a');
|
| backButton.href = '/';
|
| backButton.textContent = '返回主页';
|
| backButton.style.display = 'inline-block';
|
| backButton.style.marginTop = '20px';
|
| backButton.style.color = '#4f46e5';
|
| backButton.style.textDecoration = 'none';
|
| container.appendChild(backButton);
|
| });
|
|
|
| async function loadKeys() {
|
| const loadingElement = document.getElementById('loading');
|
| const keyListElement = document.getElementById('keyList');
|
|
|
| loadingElement.style.display = 'block';
|
| keyListElement.innerHTML = '';
|
|
|
| try {
|
| const response = await fetch('/api/keys');
|
| const data = await response.json();
|
|
|
| if (data && data.api_keys && data.api_keys.length > 0) {
|
| data.api_keys.forEach(key => {
|
| const keyElement = createKeyElement(key);
|
| keyListElement.appendChild(keyElement);
|
| });
|
| } else {
|
| keyListElement.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">没有找到API密钥</div>';
|
| }
|
| } catch (error) {
|
| console.error('加载API密钥失败:', error);
|
| keyListElement.innerHTML = `<div style="padding: 20px; text-align: center; color: #dc2626;">加载API密钥失败: ${error.message}</div>`;
|
| } finally {
|
| loadingElement.style.display = 'none';
|
| }
|
| }
|
|
|
| function createKeyElement(key) {
|
| const keyItem = document.createElement('div');
|
| keyItem.className = 'key-item';
|
| keyItem.id = `key-${key.id}`;
|
|
|
|
|
| const keyInfo = document.createElement('div');
|
| keyInfo.className = 'key-info';
|
|
|
|
|
| const platformElement = document.createElement('div');
|
| platformElement.className = 'key-platform';
|
| platformElement.textContent = getPlatformName(key.platform);
|
| keyInfo.appendChild(platformElement);
|
|
|
|
|
| const nameElement = document.createElement('div');
|
| nameElement.className = 'key-name';
|
| nameElement.textContent = key.name;
|
| keyInfo.appendChild(nameElement);
|
|
|
|
|
| const valueElement = document.createElement('div');
|
| valueElement.className = 'key-value';
|
| valueElement.textContent = key.key;
|
| keyInfo.appendChild(valueElement);
|
|
|
|
|
| if (key.updated_at) {
|
| const updatedElement = document.createElement('div');
|
| updatedElement.style.fontSize = '0.75rem';
|
| updatedElement.style.color = '#6b7280';
|
| updatedElement.style.marginTop = '5px';
|
|
|
| const date = new Date(key.updated_at);
|
| updatedElement.textContent = `上次更新: ${date.toLocaleString()}`;
|
| keyInfo.appendChild(updatedElement);
|
| }
|
|
|
|
|
| const responseContainer = document.createElement('div');
|
| responseContainer.className = 'response-container';
|
| responseContainer.id = `response-${key.id}`;
|
| keyInfo.appendChild(responseContainer);
|
|
|
| keyItem.appendChild(keyInfo);
|
|
|
|
|
| const keyStatus = document.createElement('div');
|
| keyStatus.className = 'key-status';
|
|
|
|
|
| const updateButton = document.createElement('button');
|
| updateButton.className = 'update-btn';
|
| updateButton.textContent = '更新状态';
|
| updateButton.onclick = function() {
|
| updateKeyStatus(key.id);
|
| };
|
| keyStatus.appendChild(updateButton);
|
|
|
|
|
| const statusBadge = document.createElement('div');
|
| if (key.success === true) {
|
| statusBadge.className = 'success-badge';
|
| statusBadge.textContent = '验证成功';
|
| } else if (key.success === false) {
|
| statusBadge.className = 'error-badge';
|
| statusBadge.textContent = key.return_message || '验证失败';
|
| } else {
|
| statusBadge.className = 'pending-badge';
|
| statusBadge.textContent = '等待验证';
|
| }
|
| keyStatus.appendChild(statusBadge);
|
|
|
| keyItem.appendChild(keyStatus);
|
|
|
| return keyItem;
|
| }
|
|
|
| async function updateKeyStatus(keyId) {
|
| const keyElement = document.getElementById(`key-${keyId}`);
|
| const updateButton = keyElement.querySelector('.update-btn');
|
| const responseContainer = document.getElementById(`response-${keyId}`);
|
|
|
|
|
| updateButton.disabled = true;
|
| updateButton.textContent = '更新中...';
|
|
|
| try {
|
| const response = await fetch(`/api/keys/update/${keyId}`, {
|
| method: 'POST'
|
| });
|
|
|
| const result = await response.json();
|
|
|
|
|
| responseContainer.textContent = JSON.stringify(result, null, 2);
|
| responseContainer.style.display = 'block';
|
|
|
|
|
| loadKeys();
|
|
|
| } catch (error) {
|
| console.error(`更新密钥 ${keyId} 失败:`, error);
|
| responseContainer.textContent = `更新失败: ${error.message}`;
|
| responseContainer.style.display = 'block';
|
| } finally {
|
|
|
| updateButton.disabled = false;
|
| updateButton.textContent = '更新状态';
|
| }
|
| }
|
|
|
| function getPlatformName(platformId) {
|
| const platforms = {
|
| 'openai': 'OpenAI',
|
| 'anthropic': 'Anthropic',
|
| 'google': 'Google',
|
| 'deepseek': 'DeepSeek'
|
| };
|
|
|
| return platforms[platformId] || platformId;
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
