feat(api-keys): 添加模型筛选功能

web/admin-spa/src/views/ApiKeysView.vue

@@ -116,6 +116,29 @@
                 </div>
               </div>
 
+              <!-- 模型筛选器 -->
+              <div class="group relative min-w-[140px]">
+                <div
+                  class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+                ></div>
+                <div class="relative">
+                  <CustomDropdown
+                    v-model="selectedModels"
+                    icon="fa-cube"
+                    icon-color="text-orange-500"
+                    :options="modelOptions"
+                    placeholder="所有模型"
+                    :multiple="true"
+                  />
+                  <span
+                    v-if="selectedModels.length > 0"
+                    class="absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-orange-500 text-xs text-white shadow-sm"
+                  >
+                    {{ selectedModels.length }}
+                  </span>
+                </div>
+              </div>
+
               <!-- 搜索模式与搜索框 -->
               <div class="flex min-w-[240px] flex-col gap-2 sm:flex-row sm:items-center">
                 <div class="sm:w-44">
@@ -2220,6 +2243,10 @@ const selectedApiKeyForDetail = ref(null)
 const selectedTagFilter = ref('')
 const availableTags = ref([])
 
+// 模型筛选相关
+const selectedModels = ref([])
+const availableModels = ref([])
+
 // 搜索相关
 const searchKeyword = ref('')
 const searchMode = ref('apiKey')
@@ -2236,6 +2263,14 @@ const tagOptions = computed(() => {
   return options
 })
 
+const modelOptions = computed(() => {
+  return availableModels.value.map((model) => ({
+    value: model,
+    label: model,
+    icon: 'fa-cube'
+  }))
+})
+
 const selectedTagCount = computed(() => {
   if (!selectedTagFilter.value) return 0
   return apiKeys.value.filter((key) => key.tags && key.tags.includes(selectedTagFilter.value))
@@ -2474,6 +2509,18 @@ const loadAccounts = async (forceRefresh = false) => {
   }
 }
 
+// 加载已使用的模型列表
+const loadUsedModels = async () => {
+  try {
+    const data = await apiClient.get('/admin/api-keys/used-models')
+    if (data.success) {
+      availableModels.value = data.data || []
+    }
+  } catch (error) {
+    console.error('Failed to load used models:', error)
+  }
+}
+
 // 加载API Keys（使用后端分页）
 const loadApiKeys = async (clearStatsCache = true) => {
   apiKeysLoading.value = true
@@ -2502,6 +2549,11 @@ const loadApiKeys = async (clearStatsCache = true) => {
       params.set('tag', selectedTagFilter.value)
     }
 
+    // 模型筛选参数
+    if (selectedModels.value.length > 0) {
+      params.set('models', selectedModels.value.join(','))
+    }
+
     // 排序参数（支持费用排序）
     const validSortFields = [
       'name',
@@ -4711,6 +4763,12 @@ watch(selectedTagFilter, () => {
   loadApiKeys(false)
 })
 
+// 监听模型筛选变化
+watch(selectedModels, () => {
+  currentPage.value = 1
+  loadApiKeys(false)
+})
+
 // 监听排序变化，重新加载数据
 watch([apiKeysSortBy, apiKeysSortOrder], () => {
   loadApiKeys(false)
@@ -4745,7 +4803,7 @@ onMounted(async () => {
   fetchCostSortStatus()
 
   // 先加载 API Keys（优先显示列表）
-  await Promise.all([clientsStore.loadSupportedClients(), loadApiKeys()])
+  await Promise.all([clientsStore.loadSupportedClients(), loadApiKeys(), loadUsedModels()])
 
   // 初始化全选状态
   updateSelectAllState()