feat: Select 和 GroupSelector 组件支持自动搜索
当选项数量 > 5 时自动启用搜索过滤,无需修改任何使用处代码。 - Select.vue: searchable 默认值改为 'auto',内部自动判断 - GroupSelector.vue: 新增 searchable prop 和搜索输入框
This commit is contained in:
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user