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

- 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>
This commit is contained in:
Van Zheng
2025-08-06 09:44:26 +08:00
parent 63ba17e02d
commit 9781a39e09

View File

@@ -366,6 +366,27 @@
暂无限制的模型 暂无限制的模型
</span> </span>
</div> </div>
<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"> <div class="flex gap-2">
<input <input
v-model="form.modelInput" v-model="form.modelInput"
@@ -382,6 +403,7 @@
<i class="fas fa-plus" /> <i class="fas fa-plus" />
</button> </button>
</div> </div>
</div>
<p class="text-xs text-gray-500 mt-2"> <p class="text-xs text-gray-500 mt-2">
设置此API Key无法访问的模型例如claude-opus-4-20250514 设置此API Key无法访问的模型例如claude-opus-4-20250514
</p> </p>
@@ -545,6 +567,24 @@ const removeRestrictedModel = (index) => {
form.restrictedModels.splice(index, 1) 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 = () => { const addTag = () => {
if (newTag.value && newTag.value.trim()) { if (newTag.value && newTag.value.trim()) {