feat: Select 和 GroupSelector 组件支持自动搜索

当选项数量 > 5 时自动启用搜索过滤,无需修改任何使用处代码。
- Select.vue: searchable 默认值改为 'auto',内部自动判断
- GroupSelector.vue: 新增 searchable prop 和搜索输入框
This commit is contained in:
Derek
2026-05-02 23:57:10 +08:00
parent 48912014a1
commit f2f6bc6c04
2 changed files with 57 additions and 16 deletions

View File

@@ -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) => {