Merge pull request #191 from JinFanZheng/feature/api-key-quick-add-models

feat: add quick add buttons for model restrictions in API Key editor

web/admin-spa/src/components/apikeys/EditApiKeyModal.vue

@@ -366,21 +366,43 @@
                     暂无限制的模型
                   </span>
                 </div>
-                <div class="flex gap-2">
+                <div class="space-y-3">
-                  <input 
+                  <!-- 快速添加按钮 -->
-                    v-model="form.modelInput"
+                  <div class="flex flex-wrap gap-2">
-                    type="text"
+                    <button 
-                    placeholder="输入模型名称，按回车添加"
+                      v-for="model in availableQuickModels" 
-                    class="form-input flex-1"
+                      :key="model"
-                    @keydown.enter.prevent="addRestrictedModel"
+                      type="button"
-                  >
+                      class="px-3 py-1 text-xs sm:text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors flex-shrink-0"
-                  <button 
+                      @click="quickAddRestrictedModel(model)"
-                    type="button"
+                    >
-                    class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+                      {{ model }}
-                    @click="addRestrictedModel"
+                    </button>
-                  >
+                    <span
-                    <i class="fas fa-plus" />
+                      v-if="availableQuickModels.length === 0"
-                  </button>
+                      class="text-gray-400 text-sm italic"
+                    >
+                      所有常用模型已在限制列表中
+                    </span>
+                  </div>
+                  
+                  <!-- 手动输入 -->
+                  <div class="flex gap-2">
+                    <input 
+                      v-model="form.modelInput"
+                      type="text"
+                      placeholder="输入模型名称，按回车添加"
+                      class="form-input flex-1"
+                      @keydown.enter.prevent="addRestrictedModel"
+                    >
+                    <button 
+                      type="button"
+                      class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+                      @click="addRestrictedModel"
+                    >
+                      <i class="fas fa-plus" />
+                    </button>
+                  </div>
                 </div>
                 <p class="text-xs text-gray-500 mt-2">
                   设置此API Key无法访问的模型，例如：claude-opus-4-20250514
@@ -545,6 +567,24 @@ const removeRestrictedModel = (index) => {
   form.restrictedModels.splice(index, 1)
 }
 
+// 常用模型列表
+const commonModels = ref([
+  'claude-opus-4-20250514',
+  'claude-opus-4-1-20250805'
+])
+
+// 可用的快捷模型（过滤掉已在限制列表中的）
+const availableQuickModels = computed(() => {
+  return commonModels.value.filter(model => !form.restrictedModels.includes(model))
+})
+
+// 快速添加限制的模型
+const quickAddRestrictedModel = (model) => {
+  if (!form.restrictedModels.includes(model)) {
+    form.restrictedModels.push(model)
+  }
+}
+
 // 标签管理方法
 const addTag = () => {
   if (newTag.value && newTag.value.trim()) {