From 9320833b2c07fd614419686f1353ea786c275358 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Tue, 29 Jul 2025 19:15:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(admin-spa):=20=E6=81=A2=E5=A4=8D=E9=80=9F?=
 =?UTF-8?q?=E7=8E=87=E9=99=90=E5=88=B6=E8=AE=BE=E7=BD=AE=E7=9A=84=E8=AF=A6?=
 =?UTF-8?q?=E7=BB=86=E8=AF=B4=E6=98=8E=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 恢复每个速率限制字段的详细说明文字
- 恢复完整的使用示例，帮助用户理解功能
- 使用响应式3列网格布局，在大屏幕上更紧凑
- 优化示例说明的排版，减少垂直空间占用
- 调整modal宽度为max-w-lg，提供更好的横向空间
---
 .../components/apikeys/CreateApiKeyModal.vue  | 76 +++++++++++--------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
index 7c401fef..d643b173 100644
--- a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <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 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">
@@ -75,38 +75,54 @@
             <h4 class="font-semibold text-gray-800 text-sm">速率限制设置 (可选)</h4>
           </div>
           
-          <div class="grid grid-cols-3 gap-3">
-            <div>
-              <label class="block text-xs font-medium text-gray-700 mb-1">时间窗口(分钟)</label>
-              <input 
-                v-model="form.rateLimitWindow" 
-                type="number" 
-                min="1"
-                placeholder="无限制" 
-                class="form-input w-full text-sm"
-              >
+          <div class="space-y-2">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+              <div>
+                <label class="block text-xs font-medium text-gray-700 mb-1">时间窗口 (分钟)</label>
+                <input 
+                  v-model="form.rateLimitWindow" 
+                  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">请求次数限制</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>
-              <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"
-              >
-            </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 class="bg-blue-100 rounded-lg p-2">
+              <h5 class="text-xs font-semibold text-blue-800 mb-1">💡 使用示例</h5>
+              <div class="text-xs text-blue-700 space-y-0.5">
+                <div><strong>示例1:</strong> 时间窗口=60，请求次数=1000 → 每60分钟最多1000次请求</div>
+                <div><strong>示例2:</strong> 时间窗口=1，Token=10000 → 每分钟最多10,000个Token</div>
+                <div><strong>示例3:</strong> 窗口=30，请求=50，Token=100000 → 每30分钟50次请求且不超10万Token</div>
+              </div>
             </div>
           </div>
-          <p class="text-xs text-gray-500 mt-2">设置时间窗口内的请求次数和Token使用量限制</p>
         </div>
         
         <div>