|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Grok Token 管理面板</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-primary: #f4f6f9;
|
|
--card-bg: #ffffff;
|
|
--text-primary: #2c3e50;
|
|
--text-secondary: #6c757d;
|
|
--border-color: #e2e8f0;
|
|
--primary-color: #3498db;
|
|
--success-color: #4caf50;
|
|
--danger-color: #f44336;
|
|
--warning-color: #ff9800;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
}
|
|
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
|
.search-section { margin-bottom: 20px; }
|
|
#searchInput { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; }
|
|
.overview-panel {
|
|
background-color: var(--card-bg);
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
padding: 25px;
|
|
margin-bottom: 25px;
|
|
}
|
|
.header-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.overview-stats {
|
|
display: flex;
|
|
justify-content: stretch;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.model-remaining-stats {
|
|
display: flex;
|
|
gap: 30px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.model-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.model-stat .stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
}
|
|
.model-stat .stat-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
min-width: 40px;
|
|
text-align: center;
|
|
}
|
|
.stat-item { text-align: center; }
|
|
.stat-value { font-size: 28px; font-weight: 600; color: var(--primary-color); }
|
|
.stat-label { font-size: 14px; color: var(--text-secondary); }
|
|
.refresh-icon {
|
|
cursor: pointer;
|
|
transition: transform 0.3s;
|
|
}
|
|
.refresh-icon:hover {
|
|
transform: rotate(180deg);
|
|
}
|
|
.token-management-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
.token-management-section > div {
|
|
background-color: var(--card-bg);
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
padding: 25px;
|
|
}
|
|
.token-management-section h3 {
|
|
margin-bottom: 15px;
|
|
font-size: 16px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.token-input-section { display: flex; gap: 15px; }
|
|
#tokenInput, #cfInput {
|
|
flex-grow: 1;
|
|
padding: 12px 15px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
}
|
|
#addTokenBtn, #setCfBtn {
|
|
padding: 12px 25px;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
#addTokenBtn:hover, #setCfBtn:hover { background-color: #2980b9; }
|
|
.token-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.token-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
transition: transform 0.3s;
|
|
}
|
|
.token-card:hover { transform: translateY(-5px); }
|
|
.token-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.token-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
max-width: 250px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.delete-btn {
|
|
background-color: var(--danger-color);
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
.delete-btn:hover { background-color: #c0392b; }
|
|
.model-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
gap: 15px;
|
|
}
|
|
.model-name {
|
|
flex: 2;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.progress-container {
|
|
flex: 6;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.progress-bar {
|
|
flex-grow: 1;
|
|
height: 8px;
|
|
background-color: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
.progress-text {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
min-width: 50px;
|
|
text-align: right;
|
|
}
|
|
.status-badge {
|
|
font-size: 12px;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
.status-badge .tooltip {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 10px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
white-space: nowrap;
|
|
}
|
|
.status-badge:hover .tooltip {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.status-badge::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.status-badge:hover::after { opacity: 1; }
|
|
.status-active {
|
|
background-color: rgba(76, 175, 80, 0.1);
|
|
color: var(--success-color);
|
|
}
|
|
.status-expired {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: var(--danger-color);
|
|
}
|
|
#notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #3498db;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
display: none;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="search-section">
|
|
<input type="text" id="searchInput" placeholder="搜索 Token...">
|
|
</div>
|
|
|
|
<div class="overview-panel">
|
|
<div class="header-actions">
|
|
<div class="overview-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="totalTokens">0</div>
|
|
<div class="stat-label">Token 总数</div>
|
|
</div>
|
|
<div class="model-remaining-stats">
|
|
<div class="model-stat">
|
|
<div class="stat-label">grok-2可用次数</div>
|
|
<div class="stat-value" id="grok-2-count">0</div>
|
|
</div>
|
|
<div class="model-stat">
|
|
<div class="stat-label">grok-3可用次数</div>
|
|
<div class="stat-value" id="grok-3-count">0</div>
|
|
</div>
|
|
<div class="model-stat">
|
|
<div class="stat-label">grok-3-deepsearch可用次数</div>
|
|
<div class="stat-value" id="grok-3-deepsearch-count">0</div>
|
|
</div>
|
|
<div class="model-stat">
|
|
<div class="stat-label">grok-3-reasoning可用次数</div>
|
|
<div class="stat-value" id="grok-3-reasoning-count">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="refresh-icon" id="refreshTokens">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
|
|
<path d="M21 3v5h-5"/>
|
|
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
|
|
<path d="M3 21v-5h5"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="token-management-section">
|
|
<div class="token-input-container">
|
|
<h3>添加 SSO Token</h3>
|
|
<div class="token-input-section">
|
|
<input type="text" id="tokenInput" placeholder="输入新的 SSO Token">
|
|
<button id="addTokenBtn">添加 Token</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cf-input-container">
|
|
<h3>设置 CF Clearance</h3>
|
|
<div class="token-input-section">
|
|
<input type="text" id="cfInput" placeholder="输入 CF Clearance">
|
|
<button id="setCfBtn">设置 CF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tokenGrid" class="token-grid"></div>
|
|
</div>
|
|
|
|
<div id="notification"></div>
|
|
|
|
<script>
|
|
|
|
const modelConfig = {
|
|
"grok-2": { RequestFrequency: 30, ExpirationTime: 3600000 },
|
|
"grok-3": { RequestFrequency: 20, ExpirationTime: 7200000 },
|
|
"grok-3-deepsearch": { RequestFrequency: 10, ExpirationTime: 86400000 },
|
|
"grok-3-reasoning": { RequestFrequency: 10, ExpirationTime: 86400000 }
|
|
};
|
|
|
|
let tokenMap = {};
|
|
|
|
|
|
function getProgressColor(percentage) {
|
|
if (percentage > 70) return 'var(--danger-color)';
|
|
if (percentage > 30) return 'var(--warning-color)';
|
|
return 'var(--success-color)';
|
|
}
|
|
|
|
function calculateModelRemaining() {
|
|
const modelRemaining = {};
|
|
Object.keys(modelConfig).forEach(modelName => {
|
|
const maxRequests = modelConfig[modelName].RequestFrequency;
|
|
modelRemaining[modelName] = 0;
|
|
|
|
Object.values(tokenMap).forEach(tokenData => {
|
|
const modelData = tokenData[modelName];
|
|
if (modelData.isValid) {
|
|
modelRemaining[modelName] += maxRequests - modelData.totalRequestCount;
|
|
}
|
|
});
|
|
});
|
|
return modelRemaining;
|
|
}
|
|
|
|
function updateTokenCounters() {
|
|
document.getElementById('totalTokens').textContent = Object.keys(tokenMap).length;
|
|
|
|
const modelRemaining = calculateModelRemaining();
|
|
|
|
|
|
const modelIds = ['grok-2', 'grok-3', 'grok-3-deepsearch', 'grok-3-reasoning'];
|
|
modelIds.forEach(modelName => {
|
|
const countElement = document.getElementById(`${modelName}-count`);
|
|
if (countElement) {
|
|
countElement.textContent = modelRemaining[modelName] || 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
async function updateExpiredTokenTimers() {
|
|
const currentTime = Date.now();
|
|
const expiredBadges = document.querySelectorAll('.status-badge.status-expired');
|
|
for (const badge of expiredBadges) {
|
|
const invalidatedTime = parseInt(badge.getAttribute('data-invalidated-time'), 10);
|
|
const expirationTime = parseInt(badge.getAttribute('data-expiration-time'), 10);
|
|
const recoveryTime = invalidatedTime + expirationTime;
|
|
const remainingTime = recoveryTime - currentTime;
|
|
const tooltip = badge.querySelector('.tooltip');
|
|
if (tooltip) {
|
|
if (remainingTime > 0) {
|
|
const minutes = Math.floor(remainingTime / 60000);
|
|
const seconds = Math.floor((remainingTime % 60000) / 1000);
|
|
tooltip.textContent = `${minutes}分${seconds}秒后恢复`;
|
|
} else {
|
|
tooltip.textContent = '已可恢复';
|
|
await fetchTokenMap();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function renderTokens() {
|
|
const tokenGrid = document.getElementById('tokenGrid');
|
|
tokenGrid.innerHTML = '';
|
|
Object.entries(tokenMap).forEach(([token, tokenData]) => {
|
|
const tokenCard = document.createElement('div');
|
|
tokenCard.className = 'token-card';
|
|
tokenCard.setAttribute('data-token', token);
|
|
const tokenHeader = document.createElement('div');
|
|
tokenHeader.className = 'token-header';
|
|
const tokenTitle = document.createElement('div');
|
|
tokenTitle.className = 'token-title';
|
|
tokenTitle.textContent = token;
|
|
tokenTitle.title = token;
|
|
tokenTitle.style.cursor = 'pointer';
|
|
tokenTitle.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(token).then(() => {
|
|
showNotification('Token 已复制');
|
|
}).catch(err => {
|
|
showNotification('复制失败');
|
|
});
|
|
});
|
|
const deleteBtn = document.createElement('button');
|
|
deleteBtn.className = 'delete-btn';
|
|
deleteBtn.textContent = '删除';
|
|
deleteBtn.addEventListener('click', async () => {
|
|
if (confirm(`确认删除 token: ${token}?`)) {
|
|
try {
|
|
const response = await fetch('/manager/api/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ sso: token })
|
|
});
|
|
if (response.ok) {
|
|
await fetchTokenMap();
|
|
showNotification('Token 删除成功');
|
|
} else {
|
|
showNotification('删除 Token 失败');
|
|
}
|
|
} catch (error) {
|
|
showNotification('删除 Token 出错');
|
|
}
|
|
}
|
|
});
|
|
tokenHeader.appendChild(tokenTitle);
|
|
tokenHeader.appendChild(deleteBtn);
|
|
tokenCard.appendChild(tokenHeader);
|
|
|
|
Object.entries(modelConfig).forEach(([modelName, config]) => {
|
|
const modelRow = document.createElement('div');
|
|
modelRow.className = 'model-row';
|
|
const modelNameSpan = document.createElement('div');
|
|
modelNameSpan.className = 'model-name';
|
|
modelNameSpan.textContent = modelName;
|
|
const progressContainer = document.createElement('div');
|
|
progressContainer.className = 'progress-container';
|
|
const progressBar = document.createElement('div');
|
|
progressBar.className = 'progress-bar';
|
|
const progressBarFill = document.createElement('div');
|
|
progressBarFill.className = 'progress-bar-fill';
|
|
const modelData = tokenData[modelName];
|
|
const requestCount = modelData.totalRequestCount;
|
|
const maxRequests = config.RequestFrequency;
|
|
const percentage = (requestCount / maxRequests) * 100;
|
|
progressBarFill.style.width = `${percentage}%`;
|
|
progressBarFill.style.backgroundColor = getProgressColor(percentage);
|
|
progressBar.appendChild(progressBarFill);
|
|
const progressText = document.createElement('div');
|
|
progressText.className = 'progress-text';
|
|
progressText.textContent = `${requestCount}/${maxRequests}`;
|
|
const statusBadge = document.createElement('div');
|
|
statusBadge.className = 'status-badge';
|
|
if (!modelData.isValid) {
|
|
statusBadge.classList.add('status-expired');
|
|
statusBadge.textContent = '失效';
|
|
statusBadge.setAttribute('data-invalidated-time', modelData.invalidatedTime);
|
|
statusBadge.setAttribute('data-expiration-time', config.ExpirationTime);
|
|
const tooltip = document.createElement('div');
|
|
tooltip.className = 'tooltip';
|
|
statusBadge.appendChild(tooltip);
|
|
} else {
|
|
statusBadge.classList.add('status-active');
|
|
statusBadge.textContent = '活跃';
|
|
}
|
|
progressContainer.appendChild(progressBar);
|
|
progressContainer.appendChild(progressText);
|
|
modelRow.appendChild(modelNameSpan);
|
|
modelRow.appendChild(progressContainer);
|
|
modelRow.appendChild(statusBadge);
|
|
tokenCard.appendChild(modelRow);
|
|
});
|
|
tokenGrid.appendChild(tokenCard);
|
|
});
|
|
updateTokenCounters();
|
|
}
|
|
|
|
|
|
async function fetchTokenMap() {
|
|
try {
|
|
const response = await fetch('/manager/api/get');
|
|
if (!response.ok) throw new Error('获取 Token 失败');
|
|
tokenMap = await response.json();
|
|
renderTokens();
|
|
} catch (error) {
|
|
showNotification('获取 Token 出错');
|
|
}
|
|
}
|
|
|
|
|
|
document.getElementById('addTokenBtn').addEventListener('click', async () => {
|
|
const tokenInput = document.getElementById('tokenInput');
|
|
const newToken = tokenInput.value.trim();
|
|
if (newToken) {
|
|
try {
|
|
const response = await fetch('/manager/api/add', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ sso: newToken })
|
|
});
|
|
if (response.ok) {
|
|
tokenInput.value = '';
|
|
await fetchTokenMap();
|
|
showNotification('Token 添加成功');
|
|
} else {
|
|
showNotification('添加 Token 失败');
|
|
}
|
|
} catch (error) {
|
|
showNotification('添加 Token 出错');
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
document.getElementById('setCfBtn').addEventListener('click', async () => {
|
|
const cfInput = document.getElementById('cfInput');
|
|
const newCf = cfInput.value.trim();
|
|
if (newCf) {
|
|
try {
|
|
const response = await fetch('/manager/api/cf_clearance', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ cf_clearance: newCf })
|
|
});
|
|
if (response.ok) {
|
|
cfInput.value = '';
|
|
showNotification('CF Clearance 设置成功');
|
|
} else {
|
|
showNotification('设置 CF Clearance 失败');
|
|
}
|
|
} catch (error) {
|
|
showNotification('设置 CF Clearance 出错');
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
document.getElementById('searchInput').addEventListener('input', (e) => {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const tokenCards = document.querySelectorAll('.token-card');
|
|
tokenCards.forEach(card => {
|
|
const token = card.getAttribute('data-token').toLowerCase();
|
|
card.style.display = token.includes(searchTerm) ? 'block' : 'none';
|
|
});
|
|
});
|
|
|
|
|
|
document.getElementById('refreshTokens').addEventListener('click', async () => {
|
|
await fetchTokenMap();
|
|
showNotification('Token 列表已刷新');
|
|
});
|
|
|
|
|
|
fetchTokenMap();
|
|
|
|
setInterval(updateExpiredTokenTimers, 1000);
|
|
|
|
|
|
function showNotification(message) {
|
|
const notification = document.getElementById('notification');
|
|
notification.textContent = message;
|
|
notification.style.display = 'block';
|
|
setTimeout(() => {
|
|
notification.style.display = 'none';
|
|
}, 2000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
