feat: 为下拉选择组件添加搜索过滤功能，支持拼音匹配

- 新增 search.ts 搜索工具，支持中文拼音（全拼/首字母）模糊匹配
- 新增 select-search-context.ts，通过 provide/inject 为 radix-vue Select 组件注入搜索能力
- MultiSelect、ModelMultiSelect 组件集成搜索框，选项超过阈值时自动显示
- select-content/select-item 组件支持搜索过滤与空状态提示
- StandaloneKeyFormDialog、UserFormDialog 中手写下拉框替换为复用 MultiSelect 组件
- 引入 pinyin-pro 依赖，按需懒加载

Closes #210

Co-authored-by: AoaoMH <kidxb@vip.qq.com>

frontend/src/features/api-keys/components/StandaloneKeyFormDialog.vue

@@ -7,7 +7,9 @@
     <template #header>
       <div class="border-b border-border px-6 py-4">
         <div class="flex items-center gap-3">
-          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
+          <div
+            class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0"
+          >
             <Plus
               v-if="!isEditMode"
               class="h-5 w-5 text-primary"
@@ -115,7 +117,10 @@
           <div class="space-y-2">
             <Label class="text-sm font-medium">无限制额度</Label>
             <div class="flex items-center gap-3">
-              <Switch v-model="form.unlimited_balance" />
+              <Switch
+                :model-value="form.unlimited_balance ?? false"
+                @update:model-value="(v) => form.unlimited_balance = v"
+              />
               <div class="flex flex-col">
                 <span class="text-sm text-foreground">
                   {{ form.unlimited_balance ? '已启用' : '已关闭' }}
@@ -161,103 +166,36 @@
           <!-- Provider 多选下拉框 -->
           <div class="space-y-2">
             <Label class="text-sm font-medium">允许的 Provider</Label>
-            <div class="relative">
-              <button
-                type="button"
-                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
-                @click="providerDropdownOpen = !providerDropdownOpen"
-              >
-                <span :class="form.allowed_providers.length ? 'text-foreground' : 'text-muted-foreground'">
-                  {{ form.allowed_providers.length ? `已选择 ${form.allowed_providers.length} 个` : '全部可用' }}
-                </span>
-                <ChevronDown
-                  class="h-4 w-4 text-muted-foreground transition-transform"
-                  :class="providerDropdownOpen ? 'rotate-180' : ''"
-                />
-              </button>
-              <div
-                v-if="providerDropdownOpen"
-                class="fixed inset-0 z-[80]"
-                @click.stop="providerDropdownOpen = false"
-              />
-              <div
-                v-if="providerDropdownOpen"
-                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
-              >
-                <div
-                  v-for="provider in providers"
-                  :key="provider.id"
-                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
-                  @click="toggleSelection('allowed_providers', provider.id)"
-                >
-                  <input
-                    type="checkbox"
-                    :checked="form.allowed_providers.includes(provider.id)"
-                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
-                    @click.stop
-                    @change="toggleSelection('allowed_providers', provider.id)"
-                  >
-                  <span class="text-sm">{{ provider.name }}</span>
-                </div>
-                <div
-                  v-if="providers.length === 0"
-                  class="px-3 py-2 text-sm text-muted-foreground"
-                >
-                  暂无可用 Provider
-                </div>
-              </div>
-            </div>
+            <MultiSelect
+              v-model="form.allowed_providers"
+              :options="providerOptions"
+              :search-threshold="0"
+              placeholder="全部可用"
+              empty-text="暂无可用 Provider"
+              no-results-text="未找到匹配的 Provider"
+              search-placeholder="搜索 Provider 名称..."
+            />
           </div>
 
           <!-- API 格式多选下拉框 -->
           <div class="space-y-2">
             <Label class="text-sm font-medium">允许的 API 格式</Label>
-            <div class="relative">
-              <button
-                type="button"
-                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
-                @click="apiFormatDropdownOpen = !apiFormatDropdownOpen"
-              >
-                <span :class="form.allowed_api_formats.length ? 'text-foreground' : 'text-muted-foreground'">
-                  {{ form.allowed_api_formats.length ? `已选择 ${form.allowed_api_formats.length} 个` : '全部可用' }}
-                </span>
-                <ChevronDown
-                  class="h-4 w-4 text-muted-foreground transition-transform"
-                  :class="apiFormatDropdownOpen ? 'rotate-180' : ''"
-                />
-              </button>
-              <div
-                v-if="apiFormatDropdownOpen"
-                class="fixed inset-0 z-[80]"
-                @click.stop="apiFormatDropdownOpen = false"
-              />
-              <div
-                v-if="apiFormatDropdownOpen"
-                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
-              >
-                <div
-                  v-for="format in allApiFormats"
-                  :key="format"
-                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
-                  @click="toggleSelection('allowed_api_formats', format)"
-                >
-                  <input
-                    type="checkbox"
-                    :checked="form.allowed_api_formats.includes(format)"
-                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
-                    @click.stop
-                    @change="toggleSelection('allowed_api_formats', format)"
-                  >
-                  <span class="text-sm">{{ format }}</span>
-                </div>
-              </div>
-            </div>
+            <MultiSelect
+              v-model="form.allowed_api_formats"
+              :options="apiFormatOptions"
+              :search-threshold="0"
+              placeholder="全部可用"
+              empty-text="暂无可用 API 格式"
+              no-results-text="未找到匹配的 API 格式"
+              search-placeholder="搜索 API 格式..."
+            />
           </div>
 
           <!-- 模型多选下拉框 -->
           <ModelMultiSelect
             v-model="form.allowed_models"
             :models="globalModels"
+            :search-threshold="0"
           />
         </div>
       </div>
@@ -292,9 +230,9 @@ import {
   Label,
   Switch,
 } from '@/components/ui'
-import { Plus, SquarePen, ChevronDown, X } from 'lucide-vue-next'
+import { Plus, SquarePen, X } from 'lucide-vue-next'
 import { useFormDialog } from '@/composables/useFormDialog'
-import { ModelMultiSelect } from '@/components/common'
+import { ModelMultiSelect, MultiSelect } from '@/components/common'
 import { getProvidersSummary } from '@/api/endpoints/providers'
 import { getGlobalModels } from '@/api/global-models'
 import { adminApi } from '@/api/admin'
@@ -328,15 +266,24 @@ const emit = defineEmits<{
 const isOpen = computed(() => props.open)
 const saving = ref(false)
 
-// 下拉框状态
-const providerDropdownOpen = ref(false)
-const apiFormatDropdownOpen = ref(false)
-
 // 选项数据
 const providers = ref<ProviderWithEndpointsSummary[]>([])
 const globalModels = ref<GlobalModelResponse[]>([])
 const allApiFormats = ref<string[]>([])
 
+const providerOptions = computed(() =>
+  providers.value.map((provider) => ({
+    value: provider.id,
+    label: provider.name,
+  }))
+)
+const apiFormatOptions = computed(() =>
+  allApiFormats.value.map((format) => ({
+    value: format,
+    label: format,
+  }))
+)
+
 // 表单数据
 const form = ref<StandaloneKeyFormData>({
   name: '',
@@ -347,7 +294,7 @@ const form = ref<StandaloneKeyFormData>({
   auto_delete_on_expiry: false,
   allowed_providers: [],
   allowed_api_formats: [],
-  allowed_models: []
+  allowed_models: [],
 })
 
 // 计算最小可选日期（明天）
@@ -367,10 +314,8 @@ function resetForm() {
     auto_delete_on_expiry: false,
     allowed_providers: [],
     allowed_api_formats: [],
-    allowed_models: []
+    allowed_models: [],
   }
-  providerDropdownOpen.value = false
-  apiFormatDropdownOpen.value = false
 }
 
 function loadKeyData() {
@@ -385,7 +330,7 @@ function loadKeyData() {
     auto_delete_on_expiry: props.apiKey.auto_delete_on_expiry,
     allowed_providers: props.apiKey.allowed_providers || [],
     allowed_api_formats: props.apiKey.allowed_api_formats || [],
-    allowed_models: props.apiKey.allowed_models || []
+    allowed_models: props.apiKey.allowed_models || [],
   }
 }
 
@@ -414,17 +359,6 @@ async function loadAccessRestrictionOptions() {
   }
 }
 
-// 切换选择
-function toggleSelection(field: 'allowed_providers' | 'allowed_api_formats' | 'allowed_models', value: string) {
-  const arr = form.value[field]
-  const index = arr.indexOf(value)
-  if (index === -1) {
-    arr.push(value)
-  } else {
-    arr.splice(index, 1)
-  }
-}
-
 // 清空过期日期（同时清空到期删除选项）
 function clearExpiryDate() {
   form.value.expires_at = undefined

frontend/src/features/users/components/UserFormDialog.vue

@@ -7,7 +7,9 @@
     <template #header>
       <div class="border-b border-border px-6 py-4">
         <div class="flex items-center gap-3">
-          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
+          <div
+            class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0"
+          >
             <UserPlus
               v-if="!isEditMode"
               class="h-5 w-5 text-primary"
@@ -71,7 +73,8 @@
 
           <div class="space-y-2">
             <Label class="text-sm font-medium">
-              {{ isEditMode ? '新密码 (留空保持不变)' : '密码' }} <span
+              {{ isEditMode ? '新密码 (留空保持不变)' : '密码' }}
+              <span
                 v-if="!isEditMode"
                 class="text-muted-foreground"
               >*</span>
@@ -87,7 +90,11 @@
               :required="!isEditMode"
               minlength="6"
               :placeholder="isEditMode ? '留空保持原密码' : '至少6个字符'"
-              :class="!passwordFocused && form.password.length === 0 ? 'h-10 text-transparent' : 'h-10'"
+              :class="
+                !passwordFocused && form.password.length === 0
+                  ? 'h-10 text-transparent'
+                  : 'h-10'
+              "
               @focus="passwordFocused = true"
               @blur="passwordFocused = form.password.length > 0"
             />
@@ -120,7 +127,10 @@
               class="h-10"
             />
             <p
-              v-if="form.confirmPassword.length > 0 && form.password !== form.confirmPassword"
+              v-if="
+                form.confirmPassword.length > 0 &&
+                  form.password !== form.confirmPassword
+              "
               class="text-xs text-destructive"
             >
               两次输入的密码不一致
@@ -202,109 +212,36 @@
           <!-- Provider 多选下拉框 -->
           <div class="space-y-2">
             <Label class="text-sm font-medium">允许的 Provider</Label>
-            <div class="relative">
-              <button
-                type="button"
-                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
-                @click="providerDropdownOpen = !providerDropdownOpen"
-              >
-                <span :class="form.allowed_providers.length ? 'text-foreground' : 'text-muted-foreground'">
-                  {{ form.allowed_providers.length ? `已选择 ${form.allowed_providers.length} 个` : '全部可用' }}
-                </span>
-                <ChevronDown
-                  class="h-4 w-4 text-muted-foreground transition-transform"
-                  :class="providerDropdownOpen ? 'rotate-180' : ''"
-                />
-              </button>
-              <div
-                v-if="providerDropdownOpen"
-                class="fixed inset-0 z-[80]"
-                @click.stop="providerDropdownOpen = false"
-              />
-              <div
-                v-if="providerDropdownOpen"
-                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
-              >
-                <div
-                  v-for="provider in providers"
-                  :key="provider.id"
-                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
-                  @click="toggleSelection('allowed_providers', provider.id)"
-                >
-                  <input
-                    type="checkbox"
-                    :checked="form.allowed_providers.includes(provider.id)"
-                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
-                    @click.stop
-                    @change="toggleSelection('allowed_providers', provider.id)"
-                  >
-                  <span class="text-sm">{{ provider.name }}</span>
-                </div>
-                <div
-                  v-if="providers.length === 0"
-                  class="px-3 py-2 text-sm text-muted-foreground"
-                >
-                  暂无可用 Provider
-                </div>
-              </div>
-            </div>
+            <MultiSelect
+              v-model="form.allowed_providers"
+              :options="providerOptions"
+              :search-threshold="0"
+              placeholder="全部可用"
+              empty-text="暂无可用 Provider"
+              no-results-text="未找到匹配的 Provider"
+              search-placeholder="搜索 Provider 名称..."
+            />
           </div>
 
           <!-- API 格式多选下拉框 -->
           <div class="space-y-2">
             <Label class="text-sm font-medium">允许的 API 格式</Label>
-            <div class="relative">
-              <button
-                type="button"
-                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
-                @click="endpointDropdownOpen = !endpointDropdownOpen"
-              >
-                <span :class="form.allowed_api_formats.length ? 'text-foreground' : 'text-muted-foreground'">
-                  {{ form.allowed_api_formats.length ? `已选择 ${form.allowed_api_formats.length} 个` : '全部可用' }}
-                </span>
-                <ChevronDown
-                  class="h-4 w-4 text-muted-foreground transition-transform"
-                  :class="endpointDropdownOpen ? 'rotate-180' : ''"
-                />
-              </button>
-              <div
-                v-if="endpointDropdownOpen"
-                class="fixed inset-0 z-[80]"
-                @click.stop="endpointDropdownOpen = false"
-              />
-              <div
-                v-if="endpointDropdownOpen"
-                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
-              >
-                <div
-                  v-for="format in apiFormats"
-                  :key="format.value"
-                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
-                  @click="toggleSelection('allowed_api_formats', format.value)"
-                >
-                  <input
-                    type="checkbox"
-                    :checked="form.allowed_api_formats.includes(format.value)"
-                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
-                    @click.stop
-                    @change="toggleSelection('allowed_api_formats', format.value)"
-                  >
-                  <span class="text-sm">{{ format.label }}</span>
-                </div>
-                <div
-                  v-if="apiFormats.length === 0"
-                  class="px-3 py-2 text-sm text-muted-foreground"
-                >
-                  暂无可用 API 格式
-                </div>
-              </div>
-            </div>
+            <MultiSelect
+              v-model="form.allowed_api_formats"
+              :options="apiFormatOptions"
+              :search-threshold="0"
+              placeholder="全部可用"
+              empty-text="暂无可用 API 格式"
+              no-results-text="未找到匹配的 API 格式"
+              search-placeholder="搜索 API 格式..."
+            />
           </div>
 
           <!-- 模型多选下拉框 -->
           <ModelMultiSelect
             v-model="form.allowed_models"
             :models="globalModels"
+            :search-threshold="0"
           />
 
           <div class="space-y-2">
@@ -362,7 +299,7 @@
         :disabled="saving || !isFormValid"
         @click="handleSubmit"
       >
-        {{ saving ? '处理中...' : (isEditMode ? '更新' : '创建') }}
+        {{ saving ? '处理中...' : isEditMode ? '更新' : '创建' }}
       </Button>
     </template>
   </Dialog>
@@ -382,15 +319,18 @@ import {
   SelectContent,
   SelectItem,
 } from '@/components/ui'
-import { UserPlus, SquarePen, ChevronDown } from 'lucide-vue-next'
+import { UserPlus, SquarePen } from 'lucide-vue-next'
 import { useFormDialog } from '@/composables/useFormDialog'
-import { ModelMultiSelect } from '@/components/common'
+import { ModelMultiSelect, MultiSelect } from '@/components/common'
 import { getProvidersSummary } from '@/api/endpoints/providers'
 import { getGlobalModels } from '@/api/global-models'
 import { adminApi } from '@/api/admin'
 import { log } from '@/utils/logger'
 import { parseNumberInput } from '@/utils/form'
-import type { ProviderWithEndpointsSummary, GlobalModelResponse } from '@/api/endpoints/types'
+import type {
+  ProviderWithEndpointsSummary,
+  GlobalModelResponse,
+} from '@/api/endpoints/types'
 
 export interface UserFormData {
   id?: string
@@ -420,15 +360,24 @@ const saving = ref(false)
 const formNonce = ref(createFieldNonce())
 const passwordFocused = ref(false)
 
-// 下拉框状态
-const providerDropdownOpen = ref(false)
-const endpointDropdownOpen = ref(false)
-
 // 选项数据
 const providers = ref<ProviderWithEndpointsSummary[]>([])
 const globalModels = ref<GlobalModelResponse[]>([])
 const apiFormats = ref<Array<{ value: string; label: string }>>([])
 
+const providerOptions = computed(() =>
+  providers.value.map((provider) => ({
+    value: provider.id,
+    label: provider.name,
+  })),
+)
+const apiFormatOptions = computed(() =>
+  apiFormats.value.map((format) => ({
+    value: format.value,
+    label: format.label,
+  })),
+)
+
 // 表单数据
 const form = ref({
   username: '',
@@ -441,7 +390,7 @@ const form = ref({
   is_active: true,
   allowed_providers: [] as string[],
   allowed_api_formats: [] as string[],
-  allowed_models: [] as string[]
+  allowed_models: [] as string[],
 })
 
 function createFieldNonce(): string {
@@ -462,7 +411,7 @@ function resetForm() {
     is_active: true,
     allowed_providers: [],
     allowed_api_formats: [],
-    allowed_models: []
+    allowed_models: [],
   }
 }
 
@@ -482,7 +431,7 @@ function loadUserData() {
     is_active: props.user.is_active ?? true,
     allowed_providers: [...(props.user.allowed_providers || [])],
     allowed_api_formats: [...(props.user.allowed_api_formats || [])],
-    allowed_models: [...(props.user.allowed_models || [])]
+    allowed_models: [...(props.user.allowed_models || [])],
   }
 }
 
@@ -502,7 +451,8 @@ const usernameError = computed(() => {
   if (!username) return ''
   if (username.length < 3) return '用户名长度至少为3个字符'
   if (username.length > 30) return '用户名长度不能超过30个字符'
-  if (!usernameRegex.test(username)) return '用户名只能包含字母、数字、下划线、连字符和点号'
+  if (!usernameRegex.test(username))
+    return '用户名只能包含字母、数字、下划线、连字符和点号'
   return ''
 })
 
@@ -539,7 +489,7 @@ async function loadAccessControlOptions(): Promise<void> {
     const [providersResponse, modelsData, formatsData] = await Promise.all([
       getProvidersSummary({ page_size: 9999 }),
       getGlobalModels({ limit: 1000, is_active: true }),
-      adminApi.getApiFormats()
+      adminApi.getApiFormats(),
     ])
     providers.value = providersResponse.items
     globalModels.value = modelsData.models || []
@@ -549,17 +499,6 @@ async function loadAccessControlOptions(): Promise<void> {
   }
 }
 
-// 切换选择
-function toggleSelection(field: 'allowed_providers' | 'allowed_api_formats' | 'allowed_models', value: string) {
-  const arr = form.value[field]
-  const index = arr.indexOf(value)
-  if (index === -1) {
-    arr.push(value)
-  } else {
-    arr.splice(index, 1)
-  }
-}
-
 // 提交表单
 async function handleSubmit() {
   saving.value = true
@@ -569,9 +508,16 @@ async function handleSubmit() {
       email: form.value.email.trim() || '',
       unlimited: form.value.unlimited,
       role: form.value.role,
-      allowed_providers: form.value.allowed_providers.length > 0 ? form.value.allowed_providers : null,
-      allowed_api_formats: form.value.allowed_api_formats.length > 0 ? form.value.allowed_api_formats : null,
-      allowed_models: form.value.allowed_models.length > 0 ? form.value.allowed_models : null
+      allowed_providers:
+        form.value.allowed_providers.length > 0
+          ? form.value.allowed_providers
+          : null,
+      allowed_api_formats:
+        form.value.allowed_api_formats.length > 0
+          ? form.value.allowed_api_formats
+          : null,
+      allowed_models:
+        form.value.allowed_models.length > 0 ? form.value.allowed_models : null,
     }
 
     if (isEditMode.value && props.user?.id) {
@@ -625,6 +571,6 @@ watch(
 )
 
 defineExpose({
-  setSaving
+  setSaving,
 })
 </script>