github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-22 16:43:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: APIKey列表费用及Token显示不准确的问题，目前显示总数

Browse Source 
feat: 增加APIKey过期设置，以及到期续期的能力
This commit is contained in:
KevinLiao
2025-07-25 09:34:40 +08:00
parent 561f5ffc7f
commit f614d54ab5
19 changed files with 3908 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
web/admin/app.js
View File

@@ -125,7 +125,10 @@ const app = createApp({
permissions: 'all', // 'claude', 'gemini', 'all'
enableModelRestriction: false,
restrictedModels: [],
modelInput: ''
modelInput: '',
expireDuration: '', // 过期时长选择
customExpireDate: '', // 自定义过期日期
expiresAt: null // 实际的过期时间戳
},
apiKeyModelStats: {}, // 存储每个key的模型统计数据
expandedApiKeys: {}, // 跟踪展开的API Keys
@@ -154,6 +157,18 @@ const app = createApp({
description: '',
showFullKey: false
},
// API Key续期
showRenewApiKeyModal: false,
renewApiKeyLoading: false,
renewApiKeyForm: {
id: '',
name: '',
currentExpiresAt: null,
renewDuration: '30d',
customExpireDate: '',
newExpiresAt: null
},
// 编辑API Key
showEditApiKeyModal: false,
@@ -284,6 +299,13 @@ const app = createApp({
return this.accounts.filter(account =>
account.accountType === 'dedicated' && account.isActive === true
);
},
// 计算最小日期时间（当前时间）
minDateTime() {
const now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
return now.toISOString().slice(0, 16);
}
},
@@ -527,6 +549,72 @@ const app = createApp({
});
},
// 更新过期时间
updateExpireAt() {
const duration = this.apiKeyForm.expireDuration;
if (!duration) {
this.apiKeyForm.expiresAt = null;
return;
}
if (duration === 'custom') {
// 自定义日期需要用户选择
return;
}
const now = new Date();
const durationMap = {
'1d': 1,
'7d': 7,
'30d': 30,
'90d': 90,
'180d': 180,
'365d': 365
};
const days = durationMap[duration];
if (days) {
const expireDate = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
this.apiKeyForm.expiresAt = expireDate.toISOString();
}
},
// 更新自定义过期时间
updateCustomExpireAt() {
if (this.apiKeyForm.customExpireDate) {
const expireDate = new Date(this.apiKeyForm.customExpireDate);
this.apiKeyForm.expiresAt = expireDate.toISOString();
}
},
// 格式化过期日期
formatExpireDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
},
// 检查 API Key 是否已过期
isApiKeyExpired(expiresAt) {
if (!expiresAt) return false;
return new Date(expiresAt) < new Date();
},
// 检查 API Key 是否即将过期（7天内）
isApiKeyExpiringSoon(expiresAt) {
if (!expiresAt) return false;
const expireDate = new Date(expiresAt);
const now = new Date();
const daysUntilExpire = (expireDate - now) / (1000 * 60 * 60 * 24);
return daysUntilExpire > 0 && daysUntilExpire <= 7;
},
// 打开创建账户模态框
openCreateAccountModal() {
console.log('Opening Account modal...');
@@ -1784,7 +1872,8 @@ const app = createApp({
geminiAccountId: this.apiKeyForm.geminiAccountId || null,
permissions: this.apiKeyForm.permissions || 'all',
enableModelRestriction: this.apiKeyForm.enableModelRestriction,
restrictedModels: this.apiKeyForm.restrictedModels
restrictedModels: this.apiKeyForm.restrictedModels,
expiresAt: this.apiKeyForm.expiresAt
})
});
@@ -1805,7 +1894,23 @@ const app = createApp({
// 关闭创建弹窗并清理表单
this.showCreateApiKeyModal = false;
this.apiKeyForm = { name: '', tokenLimit: '', description: '', concurrencyLimit: '', rateLimitWindow: '', rateLimitRequests: '', claudeAccountId: '', enableModelRestriction: false, restrictedModels: [], modelInput: '' };
this.apiKeyForm = {
name: '',
tokenLimit: '',
description: '',
concurrencyLimit: '',
rateLimitWindow: '',
rateLimitRequests: '',
claudeAccountId: '',
geminiAccountId: '',
permissions: 'all',
enableModelRestriction: false,
restrictedModels: [],
modelInput: '',
expireDuration: '',
customExpireDate: '',
expiresAt: null
};
// 重新加载API Keys列表
await this.loadApiKeys();
@@ -1851,6 +1956,111 @@ const app = createApp({
}
},
// 打开续期弹窗
openRenewApiKeyModal(key) {
this.renewApiKeyForm = {
id: key.id,
name: key.name,
currentExpiresAt: key.expiresAt,
renewDuration: '30d',
customExpireDate: '',
newExpiresAt: null
};
this.showRenewApiKeyModal = true;
// 立即计算新的过期时间
this.updateRenewExpireAt();
},
// 关闭续期弹窗
closeRenewApiKeyModal() {
this.showRenewApiKeyModal = false;
this.renewApiKeyForm = {
id: '',
name: '',
currentExpiresAt: null,
renewDuration: '30d',
customExpireDate: '',
newExpiresAt: null
};
},
// 更新续期过期时间
updateRenewExpireAt() {
const duration = this.renewApiKeyForm.renewDuration;
if (duration === 'permanent') {
this.renewApiKeyForm.newExpiresAt = null;
return;
}
if (duration === 'custom') {
// 自定义日期需要用户选择
return;
}
// 计算新的过期时间
const baseTime = this.renewApiKeyForm.currentExpiresAt
? new Date(this.renewApiKeyForm.currentExpiresAt)
: new Date();
// 如果当前已过期，从现在开始计算
if (baseTime < new Date()) {
baseTime.setTime(new Date().getTime());
}
const durationMap = {
'7d': 7,
'30d': 30,
'90d': 90,
'180d': 180,
'365d': 365
};
const days = durationMap[duration];
if (days) {
const expireDate = new Date(baseTime.getTime() + days * 24 * 60 * 60 * 1000);
this.renewApiKeyForm.newExpiresAt = expireDate.toISOString();
}
},
// 更新自定义续期时间
updateCustomRenewExpireAt() {
if (this.renewApiKeyForm.customExpireDate) {
const expireDate = new Date(this.renewApiKeyForm.customExpireDate);
this.renewApiKeyForm.newExpiresAt = expireDate.toISOString();
}
},
// 执行续期操作
async renewApiKey() {
this.renewApiKeyLoading = true;
try {
const data = await this.apiRequest('/admin/api-keys/' + this.renewApiKeyForm.id, {
method: 'PUT',
body: JSON.stringify({
expiresAt: this.renewApiKeyForm.newExpiresAt
})
});
if (!data) {
return;
}
if (data.success) {
this.showToast('API Key 续期成功', 'success');
this.closeRenewApiKeyModal();
await this.loadApiKeys();
} else {
this.showToast(data.message || '续期失败', 'error');
}
} catch (error) {
console.error('Error renewing API key:', error);
this.showToast('续期失败，请检查网络连接', 'error');
} finally {
this.renewApiKeyLoading = false;
}
},
openEditApiKeyModal(key) {
this.editApiKeyForm = {
id: key.id,
@@ -2889,23 +3099,13 @@ const app = createApp({
calculateApiKeyCost(usage) {
if (!usage || !usage.total) return '$0.000000';
// 使用通用模型价格估算
const totalInputTokens = usage.total.inputTokens || 0;
const totalOutputTokens = usage.total.outputTokens || 0;
const totalCacheCreateTokens = usage.total.cacheCreateTokens || 0;
const totalCacheReadTokens = usage.total.cacheReadTokens || 0;
// 使用后端返回的准确费用数据
if (usage.total.formattedCost) {
return usage.total.formattedCost;
}
// 简单估算（使用Claude 3.5 Sonnet价格）
const inputCost = (totalInputTokens / 1000000) * 3.00;
const outputCost = (totalOutputTokens / 1000000) * 15.00;
const cacheCreateCost = (totalCacheCreateTokens / 1000000) * 3.75;
const cacheReadCost = (totalCacheReadTokens / 1000000) * 0.30;
const totalCost = inputCost + outputCost + cacheCreateCost + cacheReadCost;
if (totalCost < 0.000001) return '$0.000000';
if (totalCost < 0.01) return '$' + totalCost.toFixed(6);
return '$' + totalCost.toFixed(4);
// 如果没有后端费用数据，返回默认值
return '$0.000000';
},
// 初始化日期筛选器

148
web/admin/index.html
View File

@@ -568,6 +568,7 @@
<th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">状态</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">使用统计</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">创建时间</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">过期时间</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">操作</th>
</tr>
</thead>
@@ -654,6 +655,11 @@
<span>输入: {{ formatNumber((key.usage && key.usage.total && key.usage.total.inputTokens) || 0) }}</span>
<span>输出: {{ formatNumber((key.usage && key.usage.total && key.usage.total.outputTokens) || 0) }}</span>
</div>
<!-- 缓存Token细节 -->
<div v-if="((key.usage && key.usage.total && key.usage.total.cacheCreateTokens) || 0) > 0 || ((key.usage && key.usage.total && key.usage.total.cacheReadTokens) || 0) > 0" class="flex justify-between text-xs text-orange-500">
<span>缓存创建: {{ formatNumber((key.usage && key.usage.total && key.usage.total.cacheCreateTokens) || 0) }}</span>
<span>缓存读取: {{ formatNumber((key.usage && key.usage.total && key.usage.total.cacheReadTokens) || 0) }}</span>
</div>
<!-- RPM/TPM -->
<div class="flex justify-between text-xs text-blue-600">
<span>RPM: {{ (key.usage && key.usage.averages && key.usage.averages.rpm) || 0 }}</span>
@@ -678,6 +684,25 @@
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ new Date(key.createdAt).toLocaleDateString() }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<div v-if="key.expiresAt">
<div v-if="isApiKeyExpired(key.expiresAt)" class="text-red-600">
<i class="fas fa-exclamation-circle mr-1"></i>
已过期
</div>
<div v-else-if="isApiKeyExpiringSoon(key.expiresAt)" class="text-orange-600">
<i class="fas fa-clock mr-1"></i>
{{ formatExpireDate(key.expiresAt) }}
</div>
<div v-else class="text-gray-600">
{{ formatExpireDate(key.expiresAt) }}
</div>
</div>
<div v-else class="text-gray-400">
<i class="fas fa-infinity mr-1"></i>
永不过期
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<div class="flex gap-2">
<button
@@ -686,6 +711,13 @@
>
<i class="fas fa-edit mr-1"></i>编辑
</button>
<button
v-if="key.expiresAt && (isApiKeyExpired(key.expiresAt) || isApiKeyExpiringSoon(key.expiresAt))"
@click="openRenewApiKeyModal(key)"
class="text-green-600 hover:text-green-900 font-medium hover:bg-green-50 px-3 py-1 rounded-lg transition-colors"
>
<i class="fas fa-clock mr-1"></i>续期
</button>
<button
@click="deleteApiKey(key.id)"
class="text-red-600 hover:text-red-900 font-medium hover:bg-red-50 px-3 py-1 rounded-lg transition-colors"
@@ -2000,6 +2032,36 @@
></textarea>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">有效期限</label>
<select
v-model="apiKeyForm.expireDuration"
@change="updateExpireAt"
class="form-input w-full"
>
<option value="">永不过期</option>
<option value="1d">1 天</option>
<option value="7d">7 天</option>
<option value="30d">30 天</option>
<option value="90d">90 天</option>
<option value="180d">180 天</option>
<option value="365d">365 天</option>
<option value="custom">自定义日期</option>
</select>
<div v-if="apiKeyForm.expireDuration === 'custom'" class="mt-3">
<input
v-model="apiKeyForm.customExpireDate"
type="datetime-local"
class="form-input w-full"
:min="minDateTime"
@change="updateCustomExpireAt"
>
</div>
<p v-if="apiKeyForm.expiresAt" class="text-xs text-gray-500 mt-2">
将于 {{ formatExpireDate(apiKeyForm.expiresAt) }} 过期
</p>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">服务权限</label>
<div class="flex gap-4">
@@ -2410,6 +2472,92 @@
</div>
</div>
<!-- API Key 续期弹窗 -->
<div v-if="showRenewApiKeyModal" class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
<div class="modal-content w-full max-w-md p-8 mx-auto max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
<i class="fas fa-clock text-white"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">续期 API Key</h3>
</div>
<button
@click="closeRenewApiKeyModal"
class="text-gray-400 hover:text-gray-600 transition-colors"
>
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div class="space-y-6 modal-scroll-content custom-scrollbar flex-1">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-info text-white text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800 mb-1">API Key 信息</h4>
<p class="text-sm text-gray-700">{{ renewApiKeyForm.name }}</p>
<p class="text-xs text-gray-600 mt-1">
当前过期时间：{{ renewApiKeyForm.currentExpiresAt ? formatExpireDate(renewApiKeyForm.currentExpiresAt) : '永不过期' }}
</p>
</div>
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">续期时长</label>
<select
v-model="renewApiKeyForm.renewDuration"
@change="updateRenewExpireAt"
class="form-input w-full"
>
<option value="7d">延长 7 天</option>
<option value="30d">延长 30 天</option>
<option value="90d">延长 90 天</option>
<option value="180d">延长 180 天</option>
<option value="365d">延长 365 天</option>
<option value="custom">自定义日期</option>
<option value="permanent">设为永不过期</option>
</select>
<div v-if="renewApiKeyForm.renewDuration === 'custom'" class="mt-3">
<input
v-model="renewApiKeyForm.customExpireDate"
type="datetime-local"
class="form-input w-full"
:min="minDateTime"
@change="updateCustomRenewExpireAt"
>
</div>
<p v-if="renewApiKeyForm.newExpiresAt" class="text-xs text-gray-500 mt-2">
新的过期时间：{{ formatExpireDate(renewApiKeyForm.newExpiresAt) }}
</p>
</div>
</div>
<div class="flex gap-3 pt-4">
<button
type="button"
@click="closeRenewApiKeyModal"
class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition-colors"
>
取消
</button>
<button
type="button"
@click="renewApiKey"
:disabled="renewApiKeyLoading || !renewApiKeyForm.renewDuration"
class="btn btn-primary flex-1 py-3 px-6 font-semibold"
>
<div v-if="renewApiKeyLoading" class="loading-spinner mr-2"></div>
<i v-else class="fas fa-clock mr-2"></i>
{{ renewApiKeyLoading ? '续期中...' : '确认续期' }}
</button>
</div>
</div>
</div>
<!-- 新创建的 API Key 展示弹窗 -->
<div v-if="showNewApiKeyModal" class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
<div class="modal-content w-full max-w-lg p-8 mx-auto max-h-[90vh] overflow-y-auto custom-scrollbar">