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>
2026-09-01 17:00:21 +08:00 · 2026-03-09 19:51:02 +08:00
parent 0258d01ee6
commit 46bab1b97f
10 changed files with 667 additions and 333 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
        "marked": "^16.0.0",
        "otpauth": "^9.5.0",
        "pinia": "^3.0.3",
+        "pinyin-pro": "^3.28.0",
        "radix-vue": "^1.9.17",
        "tailwind-merge": "^3.3.1",
        "three": "^0.180.0",
@@ -4718,6 +4719,12 @@
        }
      }
    },
+    "node_modules/pinyin-pro": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmmirror.com/pinyin-pro/-/pinyin-pro-3.28.0.tgz",
+      "integrity": "sha512-mMRty6RisoyYNphJrTo3pnvp3w8OMZBrXm9YSWkxhAfxKj1KZk2y8T2PDIZlDDRsvZ0No+Hz6FI4sZpA6Ey25g==",
+      "license": "MIT"
+    },
    "node_modules/pirates": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
    "marked": "^16.0.0",
    "otpauth": "^9.5.0",
    "pinia": "^3.0.3",
+    "pinyin-pro": "^3.28.0",
    "radix-vue": "^1.9.17",
    "tailwind-merge": "^3.3.1",
    "three": "^0.180.0",
--- a/frontend/src/components/common/ModelMultiSelect.vue
+++ b/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>
--- a/frontend/src/components/common/MultiSelect.vue
+++ b/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)
--- a/frontend/src/components/ui/select-content.vue
+++ b/frontend/src/components/ui/select-content.vue
@@ -10,7 +10,32 @@
      :align-offset="alignOffset"
    >
      <SelectViewport :class="viewportClass">
+        <div
+          v-if="showSearchInput"
+          class="sticky top-0 z-10 bg-card/95 px-1 pt-1 pb-2 backdrop-blur supports-[backdrop-filter]:bg-card/85"
+        >
+          <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
+              ref="searchInputRef"
+              v-model="searchQuery"
+              :placeholder="searchPlaceholder"
+              class="h-9 rounded-xl border-border/60 bg-background/80 pl-9 pr-3 text-sm"
+              @keydown.stop
+            />
+          </div>
+        </div>
+
        <slot />
+
+        <div
+          v-if="showEmptyState"
+          class="px-3 py-2 text-sm text-muted-foreground"
+        >
+          未找到匹配项
+        </div>
      </SelectViewport>
    </SelectContentPrimitive>
  </SelectPortal>
@@ -22,9 +47,25 @@ import {
  SelectPortal,
  SelectViewport,
 } from 'radix-vue'
+import { Search } from 'lucide-vue-next'
+import {
+  computed,
+  inject,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+} from 'vue'
+import Input from './input.vue'
 import { cn } from '@/lib/utils'
-import { computed, inject } from 'vue'
 import { DIALOG_CONTEXT_KEY } from './dialog/context'
+import {
+  SELECT_SEARCH_CONTEXT_KEY,
+  type RegisteredSelectItem,
+} from './select-search-context'
+import { matchesSearchQuery, preloadPinyin } from '@/utils/search'

 interface Props {
  class?: string
@@ -34,6 +75,9 @@ interface Props {
  align?: 'start' | 'center' | 'end'
  alignOffset?: number
  disablePortal?: boolean
+  searchable?: boolean
+  searchThreshold?: number
+  searchPlaceholder?: string
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -44,19 +88,105 @@ const props = withDefaults(defineProps<Props>(), {
  align: undefined,
  alignOffset: undefined,
  disablePortal: false,
+  searchable: true,
+  searchThreshold: 8,
+  searchPlaceholder: '输入关键词搜索...',
 })

 const isInsideDialog = inject(DIALOG_CONTEXT_KEY, false)
-const shouldDisablePortal = computed(() => props.disablePortal || isInsideDialog)
+const shouldDisablePortal = computed(
+  () => props.disablePortal || isInsideDialog,
+)
+const searchQuery = ref('')
+const searchInputRef = ref<InstanceType<typeof Input> | null>(null)
+const registeredItems = ref<Record<string, RegisteredSelectItem>>({})
+
+const hiddenValues = computed(() => {
+  const query = searchQuery.value.trim()
+  if (!query) return new Set<string>()
+
+  const hidden = new Set<string>()
+  for (const item of Object.values(registeredItems.value)) {
+    if (!matchesSearchQuery(query, item.value, item.text)) {
+      hidden.add(item.value)
+    }
+  }
+  return hidden
+})
+
+provide(SELECT_SEARCH_CONTEXT_KEY, {
+  searchQuery,
+  hiddenValues,
+  registerItem(id, item) {
+    registeredItems.value = {
+      ...registeredItems.value,
+      [id]: item,
+    }
+  },
+  updateItem(id, item) {
+    const currentItem = registeredItems.value[id]
+    if (!currentItem) {
+      return
+    }
+
+    registeredItems.value = {
+      ...registeredItems.value,
+      [id]: {
+        ...currentItem,
+        ...item,
+      },
+    }
+  },
+  unregisterItem(id) {
+    if (!(id in registeredItems.value)) {
+      return
+    }
+
+    const nextItems = { ...registeredItems.value }
+    delete nextItems[id]
+    registeredItems.value = nextItems
+  },
+})
+
+const itemCount = computed(() => Object.keys(registeredItems.value).length)
+const showSearchInput = computed(
+  () => props.searchable && itemCount.value >= props.searchThreshold,
+)
+const showEmptyState = computed(
+  () =>
+    showSearchInput.value &&
+    searchQuery.value.trim().length > 0 &&
+    hiddenValues.value.size === itemCount.value,
+)
+
+onMounted(() => {
+  if (props.searchable) {
+    preloadPinyin()
+  }
+})
+
+watch(showSearchInput, async (visible) => {
+  if (!visible) {
+    searchQuery.value = ''
+    return
+  }
+
+  await nextTick()
+  searchInputRef.value?.inputRef?.focus()
+})

 const contentClass = computed(() =>
  cn(
    'z-[200] max-h-96 min-w-[8rem] overflow-hidden rounded-2xl border border-border bg-card text-foreground shadow-2xl backdrop-blur-xl pointer-events-auto',
    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-    props.class
-  )
+    props.class,
+  ),
 )

 const viewportClass = 'p-1 max-h-[var(--radix-select-content-available-height)]'
+
+onUnmounted(() => {
+  searchQuery.value = ''
+})
 </script>
--- a/frontend/src/components/ui/select-item.vue
+++ b/frontend/src/components/ui/select-item.vue
@@ -1,32 +1,100 @@
 <script setup lang="ts">
-import { SelectItem as SelectItemPrimitive, SelectItemIndicator, SelectItemText } from 'radix-vue'
+import {
+  SelectItem as SelectItemPrimitive,
+  SelectItemIndicator,
+  SelectItemText,
+} from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import { computed } from 'vue'
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  useSlots,
+  watch,
+} from 'vue'
+import { SELECT_SEARCH_CONTEXT_KEY } from './select-search-context'

 interface Props {
  class?: string
  value: string
  disabled?: boolean
+  textValue?: string
 }

 const props = defineProps<Props>()
+const slots = useSlots()
+const searchContext = inject(SELECT_SEARCH_CONTEXT_KEY, null)
+const instance = getCurrentInstance()
+const itemId = instance?.uid
+  ? `select-item-${instance.uid}`
+  : `select-item-${Math.random().toString(36).slice(2, 10)}`

+function extractText(node: unknown): string {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node)
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(extractText).join(' ')
+  }
+
+  if (node && typeof node === 'object') {
+    const vnode = node as { children?: unknown }
+    return extractText(vnode.children)
+  }
+
+  return ''
+}
+
+const normalizedText = computed(() => {
+  const slotText = extractText(slots.default?.()).replace(/\s+/g, ' ').trim()
+  return (props.textValue ?? slotText ?? props.value).trim()
+})
+
+const isHidden = computed(
+  () => searchContext?.hiddenValues.value.has(props.value) ?? false,
+)
 const itemClass = computed(() =>
  cn(
    'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none',
    'data-[highlighted]:bg-accent focus:bg-accent text-foreground',
    'transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-    props.class
-  )
+    isHidden.value && 'hidden',
+    props.class,
+  ),
 )
+
+onMounted(() => {
+  searchContext?.registerItem(itemId, {
+    value: props.value,
+    text: normalizedText.value,
+  })
+})
+
+watch(
+  () => [props.value, normalizedText.value] as const,
+  ([value, text]) => {
+    searchContext?.updateItem(itemId, {
+      value,
+      text,
+    })
+  },
+)
+
+onBeforeUnmount(() => {
+  searchContext?.unregisterItem(itemId)
+})
 </script>

 <template>
  <SelectItemPrimitive
    :class="itemClass"
    :value="value"
-    :disabled="disabled"
+    :disabled="disabled || isHidden"
+    :text-value="normalizedText"
  >
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectItemIndicator>
--- a/frontend/src/components/ui/select-search-context.ts
+++ b/frontend/src/components/ui/select-search-context.ts
@@ -0,0 +1,17 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface RegisteredSelectItem {
+  value: string
+  text: string
+}
+
+export interface SelectSearchContext {
+  searchQuery: Ref<string>
+  hiddenValues: Ref<Set<string>>
+  registerItem: (id: string, item: RegisteredSelectItem) => void
+  updateItem: (id: string, item: Partial<RegisteredSelectItem>) => void
+  unregisterItem: (id: string) => void
+}
+
+export const SELECT_SEARCH_CONTEXT_KEY: InjectionKey<SelectSearchContext> =
+  Symbol('select-search-context')
--- a/frontend/src/features/api-keys/components/StandaloneKeyFormDialog.vue
+++ b/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
--- a/frontend/src/features/users/components/UserFormDialog.vue
+++ b/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>
--- a/frontend/src/utils/search.ts
+++ b/frontend/src/utils/search.ts
@@ -0,0 +1,111 @@
+const CHINESE_CHAR_REGEX = /[\u3400-\u9fff]/u
+
+type PinyinModule = typeof import('pinyin-pro')
+
+let pinyinMod: PinyinModule | null = null
+let pinyinLoading: Promise<void> | null = null
+
+function loadPinyin(): Promise<void> {
+  if (pinyinMod) return Promise.resolve()
+  if (pinyinLoading) return pinyinLoading
+
+  pinyinLoading = import('pinyin-pro')
+    .then((mod) => {
+      pinyinMod = mod
+    })
+    .catch(() => {
+      pinyinLoading = null
+    })
+  return pinyinLoading
+}
+
+export function preloadPinyin(): void {
+  loadPinyin()
+}
+
+function normalizeSearchText(value: string): string {
+  return value.normalize('NFKC').toLocaleLowerCase().replace(/\s+/g, ' ').trim()
+}
+
+function compactSearchText(value: string): string {
+  return normalizeSearchText(value).replace(/\s+/g, '')
+}
+
+function addSearchTerm(terms: Set<string>, value: string): void {
+  const normalizedValue = normalizeSearchText(value)
+  if (!normalizedValue) {
+    return
+  }
+
+  terms.add(normalizedValue)
+
+  const compactValue = normalizedValue.replace(/\s+/g, '')
+  if (compactValue && compactValue !== normalizedValue) {
+    terms.add(compactValue)
+  }
+}
+
+function getPinyinSearchTerms(value: string): string[] {
+  if (!CHINESE_CHAR_REGEX.test(value) || !pinyinMod) {
+    return []
+  }
+
+  const fullPinyin = pinyinMod.pinyin(value, {
+    toneType: 'none',
+    type: 'array',
+  })
+  const initials = pinyinMod.pinyin(value, {
+    pattern: 'first',
+    toneType: 'none',
+    type: 'array',
+  })
+
+  return [
+    fullPinyin.join(' '),
+    fullPinyin.join(''),
+    initials.join(' '),
+    initials.join(''),
+  ]
+}
+
+export function buildSearchTerms(
+  ...values: Array<string | null | undefined>
+): string[] {
+  const terms = new Set<string>()
+
+  for (const rawValue of values) {
+    const value = rawValue?.trim()
+    if (!value) {
+      continue
+    }
+
+    addSearchTerm(terms, value)
+
+    for (const pinyinTerm of getPinyinSearchTerms(value)) {
+      addSearchTerm(terms, pinyinTerm)
+    }
+  }
+
+  return Array.from(terms)
+}
+
+export function matchesSearchQuery(
+  query: string,
+  ...values: Array<string | null | undefined>
+): boolean {
+  const normalizedQuery = normalizeSearchText(query)
+  if (!normalizedQuery) {
+    return true
+  }
+
+  const compactQuery = compactSearchText(normalizedQuery)
+  const queryVariants =
+    compactQuery && compactQuery !== normalizedQuery
+      ? [normalizedQuery, compactQuery]
+      : [normalizedQuery]
+
+  const searchTerms = buildSearchTerms(...values)
+  return searchTerms.some((term) =>
+    queryVariants.some((variant) => term.includes(variant)),
+  )
+}