fix: APIKey查询页面数据不正确的情况

This commit is contained in:
KevinLiao
2025-07-27 19:51:37 +08:00
parent dfabd77928
commit bdf125e001
5 changed files with 131 additions and 5 deletions

View File

@@ -169,9 +169,25 @@
<span class="text-gray-600">创建时间</span>
<span class="font-medium text-gray-900">{{ formatDate(statsData.createdAt) }}</span>
</div>
<div v-if="statsData.expiresAt" class="flex justify-between items-center">
<div class="flex justify-between items-center">
<span class="text-gray-600">过期时间</span>
<span class="font-medium text-gray-900">{{ formatDate(statsData.expiresAt) }}</span>
<div v-if="statsData.expiresAt">
<div v-if="isApiKeyExpired(statsData.expiresAt)" class="text-red-600 font-medium">
<i class="fas fa-exclamation-circle mr-1"></i>
已过期
</div>
<div v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)" class="text-orange-600 font-medium">
<i class="fas fa-clock mr-1"></i>
{{ formatExpireDate(statsData.expiresAt) }}
</div>
<div v-else class="text-gray-900 font-medium">
{{ formatExpireDate(statsData.expiresAt) }}
</div>
</div>
<div v-else class="text-gray-400 font-medium">
<i class="fas fa-infinity mr-1"></i>
永不过期
</div>
</div>
</div>
</div>
@@ -276,6 +292,88 @@
<span class="text-gray-600">每日费用限制</span>
<span class="font-medium text-gray-900">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">模型限制</span>
<span class="font-medium text-gray-900">
<span v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="text-orange-600">
<i class="fas fa-exclamation-triangle mr-1"></i>
限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
</span>
<span v-else class="text-green-600">
<i class="fas fa-check-circle mr-1"></i>
允许所有模型
</span>
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">客户端限制</span>
<span class="font-medium text-gray-900">
<span v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="text-orange-600">
<i class="fas fa-exclamation-triangle mr-1"></i>
限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
</span>
<span v-else class="text-green-600">
<i class="fas fa-check-circle mr-1"></i>
允许所有客户端
</span>
</span>
</div>
</div>
</div>
</div>
<!-- 📋 详细限制信息 -->
<div v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) ||
(statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)"
class="card p-6 mb-8">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-list-alt mr-3 text-amber-500"></i>
详细限制信息
</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- 模型限制详情 -->
<div v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="bg-amber-50 border border-amber-200 rounded-lg p-4">
<h4 class="font-bold text-amber-800 mb-3 flex items-center">
<i class="fas fa-robot mr-2"></i>
受限模型列表
</h4>
<div class="space-y-2">
<div v-for="model in statsData.restrictions.restrictedModels"
:key="model"
class="bg-white rounded px-3 py-2 text-sm border border-amber-200">
<i class="fas fa-ban mr-2 text-red-500"></i>
<span class="text-gray-800">{{ model }}</span>
</div>
</div>
<p class="text-xs text-amber-700 mt-3">
<i class="fas fa-info-circle mr-1"></i>
此 API Key 不能访问以上列出的模型
</p>
</div>
<!-- 客户端限制详情 -->
<div v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h4 class="font-bold text-blue-800 mb-3 flex items-center">
<i class="fas fa-desktop mr-2"></i>
允许的客户端
</h4>
<div class="space-y-2">
<div v-for="client in statsData.restrictions.allowedClients"
:key="client"
class="bg-white rounded px-3 py-2 text-sm border border-blue-200">
<i class="fas fa-check mr-2 text-green-500"></i>
<span class="text-gray-800">{{ client }}</span>
</div>
</div>
<p class="text-xs text-blue-700 mt-3">
<i class="fas fa-info-circle mr-1"></i>
此 API Key 只能被以上列出的客户端使用
</p>
</div>
</div>
</div>