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

- 恢复每个速率限制字段的详细说明文字
- 恢复完整的使用示例，帮助用户理解功能
- 使用响应式3列网格布局，在大屏幕上更紧凑
- 优化示例说明的排版，减少垂直空间占用
- 调整modal宽度为max-w-lg，提供更好的横向空间

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,7 +75,8 @@
             <h4 class="font-semibold text-gray-800 text-sm">速率限制设置 (可选)</h4>
           </div>
           
-          <div class="grid grid-cols-3 gap-3">
+          <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 
@@ -85,7 +86,9 @@
                   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 
@@ -95,7 +98,9 @@
                   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 
@@ -104,9 +109,20 @@
                   placeholder="无限制" 
                   class="form-input w-full text-sm"
                 >
+                <p class="text-xs text-gray-500 mt-0.5">窗口内最大Token</p>
+              </div>
+            </div>
+            
+            <!-- 示例说明 -->
+            <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>