From f2f6bc6c045dcb9d0f556a4a288639559d2aadc9 Mon Sep 17 00:00:00 2001
From: Derek <imzhangdeyu@foxmail.com>
Date: Sat, 2 May 2026 23:57:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Select=20=E5=92=8C=20GroupSelector=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E8=87=AA=E5=8A=A8=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

当选项数量 > 5 时自动启用搜索过滤，无需修改任何使用处代码。
- Select.vue: searchable 默认值改为 'auto'，内部自动判断
- GroupSelector.vue: 新增 searchable prop 和搜索输入框
---
 .../src/components/common/GroupSelector.vue   | 58 +++++++++++++++----
 frontend/src/components/common/Select.vue     | 15 +++--
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/common/GroupSelector.vue b/frontend/src/components/common/GroupSelector.vue
index 582b6f0b..e5980ef5 100644
--- a/frontend/src/components/common/GroupSelector.vue
+++ b/frontend/src/components/common/GroupSelector.vue
@@ -5,7 +5,24 @@
       <span class="font-normal text-gray-400">{{ t('common.selectedCount', { count: modelValue.length }) }}</span>
     </label>
     <div
-      class="grid max-h-32 grid-cols-2 gap-1 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-dark-600 dark:bg-dark-800"
+      v-if="isSearchable"
+      class="flex items-center gap-2 rounded-t-lg border border-b-0 border-gray-200 bg-gray-50 px-3 py-2 dark:border-dark-600 dark:bg-dark-800"
+    >
+      <Icon name="search" size="sm" class="shrink-0 text-gray-400" />
+      <input
+        v-model="searchText"
+        type="text"
+        :placeholder="t('common.searchPlaceholder')"
+        class="flex-1 bg-transparent text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-gray-100 dark:placeholder:text-dark-400"
+      />
+    </div>
+    <div
+      :class="[
+        'grid max-h-32 grid-cols-2 gap-1 overflow-y-auto p-2',
+        isSearchable
+          ? 'rounded-b-lg border border-t-0 border-gray-200 bg-gray-50 dark:border-dark-600 dark:bg-dark-800'
+          : 'rounded-lg border border-gray-200 bg-gray-50 dark:border-dark-600 dark:bg-dark-800'
+      ]"
     >
       <label
         v-for="group in filteredGroups"
@@ -40,9 +57,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import GroupBadge from './GroupBadge.vue'
+import Icon from '@/components/icons/Icon.vue'
 import type { AdminGroup, GroupPlatform } from '@/types'
 
 const { t } = useI18n()
@@ -52,26 +70,44 @@ interface Props {
   groups: AdminGroup[]
   platform?: GroupPlatform // Optional platform filter
   mixedScheduling?: boolean // For antigravity accounts: allow anthropic/gemini groups
+  searchable?: boolean | 'auto'
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  searchable: 'auto'
+})
 const emit = defineEmits<{
   'update:modelValue': [value: number[]]
 }>()
 
+const searchText = ref('')
+
+const isSearchable = computed(() => {
+  if (props.searchable === 'auto') return props.groups.length > 5
+  return props.searchable
+})
+
 // Filter groups by platform if specified
 const filteredGroups = computed(() => {
-  if (!props.platform) {
-    return props.groups
+  let result: AdminGroup[] = props.groups
+  if (props.platform) {
+    // antigravity 账户启用混合调度后，可选择 anthropic/gemini 分组
+    if (props.platform === 'antigravity' && props.mixedScheduling) {
+      result = result.filter(
+        (g) => g.platform === 'antigravity' || g.platform === 'anthropic' || g.platform === 'gemini'
+      )
+    } else {
+      // 默认：只能选择同 platform 的分组
+      result = result.filter((g) => g.platform === props.platform)
+    }
   }
-  // antigravity 账户启用混合调度后，可选择 anthropic/gemini 分组
-  if (props.platform === 'antigravity' && props.mixedScheduling) {
-    return props.groups.filter(
-      (g) => g.platform === 'antigravity' || g.platform === 'anthropic' || g.platform === 'gemini'
+  if (isSearchable.value && searchText.value) {
+    const q = searchText.value.toLowerCase()
+    result = result.filter(
+      (g) => g.name.toLowerCase().includes(q) || g.description?.toLowerCase().includes(q)
     )
   }
-  // 默认：只能选择同 platform 的分组
-  return props.groups.filter((g) => g.platform === props.platform)
+  return result
 })
 
 const handleChange = (groupId: number, checked: boolean) => {
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index a06a6581..a8948145 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -46,7 +46,7 @@
           @keydown="onDropdownKeyDown"
         >
           <!-- Search input -->
-          <div v-if="searchable" class="select-search">
+          <div v-if="isSearchable" class="select-search">
             <Icon name="search" size="sm" class="text-gray-400" />
             <input
               ref="searchInputRef"
@@ -128,7 +128,7 @@ interface Props {
   placeholder?: string
   disabled?: boolean
   error?: boolean
-  searchable?: boolean
+  searchable?: boolean | 'auto'
   searchPlaceholder?: string
   emptyText?: string
   valueKey?: string
@@ -145,7 +145,7 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   error: false,
-  searchable: false,
+  searchable: 'auto',
   creatable: false,
   creatablePrefix: '',
   valueKey: 'value',
@@ -170,6 +170,11 @@ const placeholderText = computed(() => props.placeholder ?? t('common.selectOpti
 const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t('common.searchPlaceholder'))
 const emptyTextDisplay = computed(() => props.emptyText ?? t('common.noOptionsFound'))
 
+const isSearchable = computed(() => {
+  if (props.searchable === 'auto') return props.options.length > 5
+  return props.searchable
+})
+
 // Computed style for teleported dropdown
 const dropdownStyle = computed(() => {
   if (!triggerRect.value) return {}
@@ -236,7 +241,7 @@ const selectedLabel = computed(() => {
 
 const filteredOptions = computed(() => {
   let opts = props.options as any[]
-  if (props.searchable && searchQuery.value) {
+  if (isSearchable.value && searchQuery.value) {
     const query = searchQuery.value.toLowerCase()
     opts = opts.filter((opt) => {
       // Match label
@@ -328,7 +333,7 @@ watch(isOpen, (open) => {
         : initialIdx
     }
 
-    if (props.searchable) {
+    if (isSearchable.value) {
       nextTick(() => searchInputRef.value?.focus())
     }
     // Add scroll listener to update position