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 <[email protected]>

frontend/src/components/common/ModelMultiSelect.vue

@@ -4,11 +4,18 @@
     <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"
+        class="flex h-10 w-full items-center justify-between rounded-lg border bg-background px-3 text-left transition-colors hover:bg-muted/50"
         @click="isOpen = !isOpen"
       >
-        <span :class="modelValue.length ? 'text-foreground' : 'text-muted-foreground'">
-          {{ modelValue.length ? `已选择 ${modelValue.length} 个` : '全部可用' }}
+        <span
+          class="truncate text-sm"
+          :class="
+            modelValue.length ? 'text-foreground' : 'text-muted-foreground'
+          "
+        >
+          {{
+            modelValue.length ? `已选择 ${modelValue.length} 个` : '全部可用'
+          }}
           <span
             v-if="invalidModels.length"
             class="text-destructive"
@@ -26,46 +33,67 @@
       />
       <div
         v-if="isOpen"
-        class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
+        class="absolute z-[90] mt-1 w-full rounded-lg border bg-popover shadow-lg"
       >
-        <!-- 失效模型（置顶显示，只能取消选择） -->
         <div
-          v-for="modelName in invalidModels"
-          :key="modelName"
-          class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer bg-destructive/5"
-          @click="removeModel(modelName)"
+          v-if="showSearch"
+          class="sticky top-0 z-10 border-b bg-popover/95 p-1 backdrop-blur supports-[backdrop-filter]:bg-popover/85"
         >
-          <input
-            type="checkbox"
-            :checked="true"
-            class="h-4 w-4 rounded border-gray-300 cursor-pointer"
-            @click.stop
-            @change="removeModel(modelName)"
-          >
-          <span class="text-sm text-destructive">{{ modelName }}</span>
-          <span class="text-xs text-destructive/70">(已失效)</span>
+          <div class="relative">
+            <Search
+              class="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              v-model="searchQuery"
+              :placeholder="searchPlaceholder"
+              class="h-8 rounded-md border-border/60 bg-popover pl-8 text-xs"
+              @keydown.stop
+            />
+          </div>
         </div>
-        <!-- 有效模型 -->
-        <div
-          v-for="model in models"
-          :key="model.name"
-          class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
-          @click="toggleModel(model.name)"
-        >
-          <input
-            type="checkbox"
-            :checked="modelValue.includes(model.name)"
-            class="h-4 w-4 rounded border-gray-300 cursor-pointer"
-            @click.stop
-            @change="toggleModel(model.name)"
+
+        <div class="max-h-48 overflow-y-auto">
+          <div
+            v-for="modelName in filteredInvalidModels"
+            :key="modelName"
+            class="flex cursor-pointer items-center gap-2 bg-destructive/5 px-3 py-2 hover:bg-muted/50"
+            @click="removeModel(modelName)"
           >
-          <span class="text-sm">{{ model.name }}</span>
-        </div>
-        <div
-          v-if="models.length === 0 && invalidModels.length === 0"
-          class="px-3 py-2 text-sm text-muted-foreground"
-        >
-          暂无可用模型
+            <input
+              type="checkbox"
+              :checked="true"
+              class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300"
+              @click.stop
+              @change="removeModel(modelName)"
+            >
+            <span class="min-w-0 truncate text-sm text-destructive">{{ modelName }}</span>
+            <span class="shrink-0 text-xs text-destructive/70">(已失效)</span>
+          </div>
+
+          <div
+            v-for="model in filteredModels"
+            :key="model.name"
+            class="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-muted/50"
+            @click="toggleModel(model.name)"
+          >
+            <input
+              type="checkbox"
+              :checked="modelValue.includes(model.name)"
+              class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300"
+              @click.stop
+              @change="toggleModel(model.name)"
+            >
+            <span class="min-w-0 truncate text-sm">{{ model.name }}</span>
+          </div>
+
+          <div
+            v-if="
+              filteredModels.length === 0 && filteredInvalidModels.length === 0
+            "
+            class="px-3 py-2 text-sm text-muted-foreground"
+          >
+            {{ searchQuery.trim() ? '未找到匹配项' : '暂无可用模型' }}
+          </div>
         </div>
       </div>
     </div>
@@ -73,32 +101,70 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Label } from '@/components/ui'
-import { ChevronDown } from 'lucide-vue-next'
+import { computed, ref, watch } from 'vue'
+import { Input, Label } from '@/components/ui'
+import { ChevronDown, Search } from 'lucide-vue-next'
 import { useInvalidModels } from '@/composables/useInvalidModels'
+import { matchesSearchQuery } from '@/utils/search'
 
 export interface ModelWithName {
   name: string
 }
 
-const props = defineProps<{
-  modelValue: string[]
-  models: ModelWithName[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[]
+    models: ModelWithName[]
+    searchThreshold?: number
+    searchPlaceholder?: string
+  }>(),
+  {
+    searchThreshold: 8,
+    searchPlaceholder: '输入模型名搜索...',
+  },
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: string[]]
 }>()
 
 const isOpen = ref(false)
+const searchQuery = ref('')
 
-// 检测失效模型
 const { invalidModels } = useInvalidModels(
   computed(() => props.modelValue),
-  computed(() => props.models)
+  computed(() => props.models),
 )
 
+const showSearch = computed(
+  () =>
+    props.models.length + invalidModels.value.length >= props.searchThreshold,
+)
+const filteredInvalidModels = computed(() => {
+  if (!showSearch.value || !searchQuery.value.trim()) {
+    return invalidModels.value
+  }
+
+  return invalidModels.value.filter((modelName) =>
+    matchesSearchQuery(searchQuery.value, modelName),
+  )
+})
+const filteredModels = computed(() => {
+  if (!showSearch.value || !searchQuery.value.trim()) {
+    return props.models
+  }
+
+  return props.models.filter((model) =>
+    matchesSearchQuery(searchQuery.value, model.name),
+  )
+})
+
+watch(isOpen, (open) => {
+  if (!open) {
+    searchQuery.value = ''
+  }
+})
+
 function toggleModel(name: string) {
   const newValue = [...props.modelValue]
   const index = newValue.indexOf(name)
@@ -111,7 +177,7 @@ function toggleModel(name: string) {
 }
 
 function removeModel(name: string) {
-  const newValue = props.modelValue.filter(m => m !== name)
+  const newValue = props.modelValue.filter((m) => m !== name)
   emit('update:modelValue', newValue)
 }
 </script>

frontend/src/components/common/MultiSelect.vue

@@ -2,21 +2,23 @@
   <div class="relative">
     <button
       type="button"
-      :class="cn(
-        'h-9 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors gap-1',
-        triggerClass,
-      )"
+      :class="
+        cn(
+          'flex h-10 w-full items-center justify-between rounded-lg border bg-background px-3 text-left transition-colors hover:bg-muted/50',
+          triggerClass,
+        )
+      "
       :disabled="disabled"
       @click="isOpen = !isOpen"
     >
       <span
         :class="modelValue.length ? 'text-foreground' : 'text-muted-foreground'"
-        class="text-xs truncate"
+        class="truncate text-sm"
       >
         {{ displayText }}
       </span>
       <ChevronDown
-        class="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform"
+        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform"
         :class="isOpen ? 'rotate-180' : ''"
       />
     </button>
@@ -27,76 +29,128 @@
     />
     <div
       v-if="isOpen"
-      class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
+      class="absolute z-[90] w-full mt-1 rounded-lg border bg-popover shadow-lg"
       :style="dropdownMinWidth ? { minWidth: dropdownMinWidth } : undefined"
     >
       <div
-        v-for="item in options"
-        :key="item.value"
-        class="flex items-center gap-2 px-3 py-1.5 hover:bg-muted/50 cursor-pointer text-xs"
-        @click="toggle(item.value)"
+        v-if="showSearch"
+        class="sticky top-0 z-10 border-b bg-popover/95 p-1 backdrop-blur supports-[backdrop-filter]:bg-popover/85"
       >
-        <input
-          type="checkbox"
-          :checked="modelValue.includes(item.value)"
-          class="h-4 w-4 rounded border-border/60 bg-card/80 text-primary shadow-sm accent-primary cursor-pointer"
-          @click.stop
-          @change="toggle(item.value)"
-        >
-        <span class="text-sm">{{ item.label }}</span>
+        <div class="relative">
+          <Search
+            class="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground"
+          />
+          <Input
+            v-model="searchQuery"
+            :placeholder="searchPlaceholder"
+            class="h-8 rounded-md border-border/60 bg-popover pl-8 text-xs"
+            @keydown.stop
+          />
+        </div>
       </div>
-      <div
-        v-if="options.length === 0"
-        class="px-3 py-2 text-sm text-muted-foreground"
-      >
-        {{ emptyText }}
+
+      <div class="max-h-48 overflow-y-auto">
+        <div
+          v-for="item in filteredOptions"
+          :key="item.value"
+          class="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-muted/50"
+          @click="toggle(item.value)"
+        >
+          <input
+            type="checkbox"
+            :checked="modelValue.includes(item.value)"
+            class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300"
+            @click.stop
+            @change="toggle(item.value)"
+          >
+          <span class="min-w-0 truncate text-sm">{{ item.label }}</span>
+        </div>
+        <div
+          v-if="filteredOptions.length === 0"
+          class="px-3 py-2 text-sm text-muted-foreground"
+        >
+          {{ searchQuery.trim() ? noResultsText : emptyText }}
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { ChevronDown } from 'lucide-vue-next'
+import { computed, ref, watch } from 'vue'
+import { ChevronDown, Search } from 'lucide-vue-next'
+import { Input } from '@/components/ui'
 import { cn } from '@/lib/utils'
+import { matchesSearchQuery } from '@/utils/search'
 
 export interface MultiSelectOption {
   value: string
   label: string
 }
 
-const props = withDefaults(defineProps<{
-  modelValue: string[]
-  options: MultiSelectOption[]
-  placeholder?: string
-  emptyText?: string
-  triggerClass?: string
-  dropdownMinWidth?: string
-  disabled?: boolean
-}>(), {
-  placeholder: '请选择',
-  emptyText: '暂无选项',
-  triggerClass: '',
-  dropdownMinWidth: undefined,
-  disabled: false,
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[]
+    options: MultiSelectOption[]
+    placeholder?: string
+    emptyText?: string
+    noResultsText?: string
+    triggerClass?: string
+    dropdownMinWidth?: string
+    disabled?: boolean
+    searchable?: boolean
+    searchThreshold?: number
+    searchPlaceholder?: string
+  }>(),
+  {
+    placeholder: '请选择',
+    emptyText: '暂无选项',
+    noResultsText: '未找到匹配项',
+    triggerClass: '',
+    dropdownMinWidth: undefined,
+    disabled: false,
+    searchable: true,
+    searchThreshold: 8,
+    searchPlaceholder: '输入关键词搜索...',
+  },
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: string[]]
 }>()
 
 const isOpen = ref(false)
+const searchQuery = ref('')
+
+const showSearch = computed(
+  () => props.searchable && props.options.length >= props.searchThreshold,
+)
+const filteredOptions = computed(() => {
+  if (!showSearch.value || !searchQuery.value.trim()) {
+    return props.options
+  }
+
+  return props.options.filter((item) =>
+    matchesSearchQuery(searchQuery.value, item.label, item.value),
+  )
+})
 
 const displayText = computed(() => {
   if (props.modelValue.length === 0) return props.placeholder
   if (props.modelValue.length <= 2) {
     return props.modelValue
-      .map(v => props.options.find(o => o.value === v)?.label ?? v)
+      .map((v) => props.options.find((o) => o.value === v)?.label ?? v)
       .join(', ')
   }
   return `已选择 ${props.modelValue.length} 项`
 })
 
+watch(isOpen, (open) => {
+  if (!open) {
+    searchQuery.value = ''
+  }
+})
+
 function toggle(value: string) {
   const newValue = [...props.modelValue]
   const index = newValue.indexOf(value)