github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 09:38:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(admin-spa): 恢复速率限制设置的详细说明并优化布局

Browse Source 
- 恢复每个速率限制字段的详细说明文字
- 恢复完整的使用示例，帮助用户理解功能
- 使用响应式3列网格布局，在大屏幕上更紧凑
- 优化示例说明的排版，减少垂直空间占用
- 调整modal宽度为max-w-lg，提供更好的横向空间
This commit is contained in:
shaw
2025-07-29 19:15:44 +08:00
parent 8f9272bc43
commit 9320833b2c
1 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div class="fixed inset-0 modal z-50 flex items-center justify-center p-4"> <div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
<div class="modal-content w-full max-w-md p-6 mx-auto max-h-[85vh] flex flex-col"> <div class="modal-content w-full max-w-lg p-6 mx-auto max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center"> <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
@@ -75,38 +75,54 @@
<h4 class="font-semibold text-gray-800 text-sm">速率限制设置 (可选)</h4> <h4 class="font-semibold text-gray-800 text-sm">速率限制设置 (可选)</h4>
</div> </div>
<div class="grid grid-cols-3 gap-3"> <div class="space-y-2">
<div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
<label class="block text-xs font-medium text-gray-700 mb-1">时间窗口(分钟)</label> <div>
<input <label class="block text-xs font-medium text-gray-700 mb-1">时间窗口 (分钟)</label>
v-model="form.rateLimitWindow" <input
type="number" v-model="form.rateLimitWindow"
min="1" type="number"
placeholder="无限制" min="1"
class="form-input w-full text-sm" placeholder="无限制"
> class="form-input w-full text-sm"
>
<p class="text-xs text-gray-500 mt-0.5">时间段单位</p>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">请求次数限制</label>
<input
v-model="form.rateLimitRequests"
type="number"
min="1"
placeholder="无限制"
class="form-input w-full text-sm"
>
<p class="text-xs text-gray-500 mt-0.5">窗口内最大请求</p>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Token 限制</label>
<input
v-model="form.tokenLimit"
type="number"
placeholder="无限制"
class="form-input w-full text-sm"
>
<p class="text-xs text-gray-500 mt-0.5">窗口内最大Token</p>
</div>
</div> </div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">请求次数限制</label> <!-- 示例说明 -->
<input <div class="bg-blue-100 rounded-lg p-2">
v-model="form.rateLimitRequests" <h5 class="text-xs font-semibold text-blue-800 mb-1">💡 使用示例</h5>
type="number" <div class="text-xs text-blue-700 space-y-0.5">
min="1" <div><strong>示例1:</strong> 时间窗口=60，请求次数=1000 → 每60分钟最多1000次请求</div>
placeholder="无限制" <div><strong>示例2:</strong> 时间窗口=1，Token=10000 → 每分钟最多10,000个Token</div>
class="form-input w-full text-sm" <div><strong>示例3:</strong> 窗口=30，请求=50，Token=100000 → 每30分钟50次请求且不超10万Token</div>
> </div>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Token限制</label>
<input
v-model="form.tokenLimit"
type="number"
placeholder="无限制"
class="form-input w-full text-sm"
>
</div> </div>
</div> </div>
<p class="text-xs text-gray-500 mt-2">设置时间窗口内的请求次数和Token使用量限制</p>
</div> </div>
<div> <div>