feat: 增加每日费用限制

This commit is contained in:
KevinLiao
2025-07-27 14:47:59 +08:00
parent bf9ffa831e
commit ac1e367a69
10 changed files with 471 additions and 20 deletions

View File

@@ -133,7 +133,8 @@ const app = createApp({
allowedClients: [],
expireDuration: '', // 过期时长选择
customExpireDate: '', // 自定义过期日期
expiresAt: null // 实际的过期时间戳
expiresAt: null, // 实际的过期时间戳
dailyCostLimit: '' // 每日费用限制
},
apiKeyModelStats: {}, // 存储每个key的模型统计数据
expandedApiKeys: {}, // 跟踪展开的API Keys
@@ -192,7 +193,8 @@ const app = createApp({
restrictedModels: [],
modelInput: '',
enableClientRestriction: false,
allowedClients: []
allowedClients: [],
dailyCostLimit: ''
},
// 支持的客户端列表
@@ -2075,7 +2077,8 @@ const app = createApp({
restrictedModels: this.apiKeyForm.restrictedModels,
enableClientRestriction: this.apiKeyForm.enableClientRestriction,
allowedClients: this.apiKeyForm.allowedClients,
expiresAt: this.apiKeyForm.expiresAt
expiresAt: this.apiKeyForm.expiresAt,
dailyCostLimit: this.apiKeyForm.dailyCostLimit && this.apiKeyForm.dailyCostLimit.trim() ? parseFloat(this.apiKeyForm.dailyCostLimit) : 0
})
});
@@ -2113,7 +2116,8 @@ const app = createApp({
allowedClients: [],
expireDuration: '',
customExpireDate: '',
expiresAt: null
expiresAt: null,
dailyCostLimit: ''
};
// 重新加载API Keys列表
@@ -2280,7 +2284,8 @@ const app = createApp({
restrictedModels: key.restrictedModels ? [...key.restrictedModels] : [],
modelInput: '',
enableClientRestriction: key.enableClientRestriction || false,
allowedClients: key.allowedClients ? [...key.allowedClients] : []
allowedClients: key.allowedClients ? [...key.allowedClients] : [],
dailyCostLimit: key.dailyCostLimit || ''
};
this.showEditApiKeyModal = true;
},
@@ -2301,7 +2306,8 @@ const app = createApp({
restrictedModels: [],
modelInput: '',
enableClientRestriction: false,
allowedClients: []
allowedClients: [],
dailyCostLimit: ''
};
},
@@ -2321,7 +2327,8 @@ const app = createApp({
enableModelRestriction: this.editApiKeyForm.enableModelRestriction,
restrictedModels: this.editApiKeyForm.restrictedModels,
enableClientRestriction: this.editApiKeyForm.enableClientRestriction,
allowedClients: this.editApiKeyForm.allowedClients
allowedClients: this.editApiKeyForm.allowedClients,
dailyCostLimit: this.editApiKeyForm.dailyCostLimit && this.editApiKeyForm.dailyCostLimit.toString().trim() !== '' ? parseFloat(this.editApiKeyForm.dailyCostLimit) : 0
})
});

View File

@@ -663,6 +663,13 @@
<span class="text-gray-600">费用:</span>
<span class="font-medium text-green-600">{{ calculateApiKeyCost(key.usage) }}</span>
</div>
<!-- 每日费用限制 -->
<div v-if="key.dailyCostLimit > 0" class="flex justify-between text-sm">
<span class="text-gray-600">今日费用:</span>
<span :class="['font-medium', (key.dailyCost || 0) >= key.dailyCostLimit ? 'text-red-600' : 'text-blue-600']">
${{ (key.dailyCost || 0).toFixed(2) }} / ${{ key.dailyCostLimit.toFixed(2) }}
</span>
</div>
<!-- 并发限制 -->
<div class="flex justify-between text-sm">
<span class="text-gray-600">并发限制:</span>
@@ -2088,6 +2095,27 @@
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">每日费用限制 (美元)</label>
<div class="space-y-3">
<div class="flex gap-2">
<button type="button" @click="apiKeyForm.dailyCostLimit = '50'" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">$50</button>
<button type="button" @click="apiKeyForm.dailyCostLimit = '100'" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">$100</button>
<button type="button" @click="apiKeyForm.dailyCostLimit = '200'" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">$200</button>
<button type="button" @click="apiKeyForm.dailyCostLimit = ''" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">自定义</button>
</div>
<input
v-model="apiKeyForm.dailyCostLimit"
type="number"
min="0"
step="0.01"
placeholder="0 表示无限制"
class="form-input w-full"
>
<p class="text-xs text-gray-500">设置此 API Key 每日的费用限制超过限制将拒绝请求0 或留空表示无限制</p>
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">并发限制 (可选)</label>
<input
@@ -2422,6 +2450,27 @@
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">每日费用限制 (美元)</label>
<div class="space-y-3">
<div class="flex gap-2">
<button type="button" @click="editApiKeyForm.dailyCostLimit = '50'" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">$50</button>
<button type="button" @click="editApiKeyForm.dailyCostLimit = '100'" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">$100</button>
<button type="button" @click="editApiKeyForm.dailyCostLimit = '200'" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">$200</button>
<button type="button" @click="editApiKeyForm.dailyCostLimit = ''" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">自定义</button>
</div>
<input
v-model="editApiKeyForm.dailyCostLimit"
type="number"
min="0"
step="0.01"
placeholder="0 表示无限制"
class="form-input w-full"
>
<p class="text-xs text-gray-500">设置此 API Key 每日的费用限制超过限制将拒绝请求0 或留空表示无限制</p>
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">并发限制</label>
<input