From 9781a39e0938c09f30fb25ca2ce1e8b51530e16a Mon Sep 17 00:00:00 2001
From: Van Zheng <zheng_jinfan@126.com>
Date: Wed, 6 Aug 2025 09:44:26 +0800
Subject: [PATCH] feat: add quick add buttons for model restrictions in API Key
 editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add quick add buttons for common Claude models including claude-opus-4-1-20250805
- Implement dynamic filtering to hide models already in restriction list
- Add mobile-responsive design with proper text sizing and layout
- Show helpful message when all common models are restricted

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/apikeys/EditApiKeyModal.vue    | 70 +++++++++++++++----
 1 file changed, 55 insertions(+), 15 deletions(-)

diff --git a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
index 9b23dbb6..ff8cfbe5 100644
--- a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
@@ -366,21 +366,43 @@
                     暂无限制的模型
                   </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 class="space-y-3">
+                  <!-- 快速添加按钮 -->
+                  <div class="flex flex-wrap gap-2">
+                    <button 
+                      v-for="model in availableQuickModels" 
+                      :key="model"
+                      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"
+                      @click="quickAddRestrictedModel(model)"
+                    >
+                      {{ model }}
+                    </button>
+                    <span
+                      v-if="availableQuickModels.length === 0"
+                      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()) {