| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>额度重置时间测试</title> |
| | <style> |
| | body { |
| | font-family: Arial, sans-serif; |
| | padding: 20px; |
| | background: #f5f5f5; |
| | } |
| | .account-card { |
| | background: white; |
| | border-radius: 10px; |
| | padding: 20px; |
| | margin-bottom: 20px; |
| | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | } |
| | .quota-header { |
| | display: flex; |
| | justify-content: space-between; |
| | margin-bottom: 10px; |
| | font-weight: bold; |
| | } |
| | .progress-bar { |
| | background: #e0e0e0; |
| | border-radius: 4px; |
| | height: 10px; |
| | margin-bottom: 10px; |
| | overflow: hidden; |
| | } |
| | .progress-fill { |
| | background: #4CAF50; |
| | height: 100%; |
| | transition: width 0.3s; |
| | } |
| | .quota-detail { |
| | display: flex; |
| | gap: 20px; |
| | font-size: 0.9em; |
| | color: #666; |
| | margin-bottom: 10px; |
| | } |
| | .quota-reset-info { |
| | display: flex; |
| | gap: 20px; |
| | font-size: 0.8em; |
| | color: #888; |
| | } |
| | .badge { |
| | padding: 2px 8px; |
| | border-radius: 4px; |
| | font-size: 0.8em; |
| | } |
| | .badge.success { background: #4CAF50; color: white; } |
| | .badge.error { background: #f44336; color: white; } |
| | </style> |
| | </head> |
| | <body> |
| | <h1>额度重置时间测试</h1> |
| | <div id="accountsContainer"></div> |
| |
|
| | <script> |
| | async function loadAccounts() { |
| | try { |
| | const response = await fetch('http://localhost:8080/api/accounts/status'); |
| | const data = await response.json(); |
| | |
| | const container = document.getElementById('accountsContainer'); |
| | container.innerHTML = ''; |
| | |
| | data.accounts.forEach(account => { |
| | const quota = account.quota; |
| | if (!quota) return; |
| | |
| | const usedPercent = quota.usage_limit > 0 ? (quota.current_usage / quota.usage_limit * 100) : 0; |
| | const isExhausted = quota.is_exhausted; |
| | |
| | const card = document.createElement('div'); |
| | card.className = 'account-card'; |
| | card.innerHTML = ` |
| | <h3>${account.name} <span class="badge ${isExhausted ? 'error' : 'success'}">${isExhausted ? '额度耗尽' : '正常'}</span></h3> |
| | <div class="quota-header"> |
| | <span>已用/总额</span> |
| | <span>${quota.current_usage.toFixed(1)} / ${quota.usage_limit.toFixed(1)}</span> |
| | </div> |
| | <div class="progress-bar"> |
| | <div class="progress-fill" style="width: ${usedPercent}%"></div> |
| | </div> |
| | <div class="quota-detail"> |
| | <span>试用: ${quota.free_trial_usage.toFixed(0)}/${quota.free_trial_limit.toFixed(0)}</span> |
| | <span>奖励: ${quota.bonus_usage.toFixed(0)}/${quota.bonus_limit.toFixed(0)} (${quota.active_bonuses}个)</span> |
| | <span>更新: ${quota.updated_at || '未知'}</span> |
| | </div> |
| | ${quota.reset_date_text || quota.trial_expiry_text ? ` |
| | <div class="quota-reset-info"> |
| | ${quota.reset_date_text ? `<span>🔄 重置: ${quota.reset_date_text}</span>` : ''} |
| | ${quota.trial_expiry_text ? `<span>🎁 试用过期: ${quota.trial_expiry_text}</span>` : ''} |
| | </div> |
| | ` : ''} |
| | `; |
| | |
| | container.appendChild(card); |
| | }); |
| | } catch (error) { |
| | console.error('加载失败:', error); |
| | document.getElementById('accountsContainer').innerHTML = '<p>加载失败，请确保服务器正在运行</p>'; |
| | } |
| | } |
| | |
| | |
| | loadAccounts(); |
| | |
| | |
| | setInterval(loadAccounts, 30000); |
| | </script> |
| | </body> |
| | </html> |
| |
|
