feat(ui): 优化分组选择器交互体验
- 分组下拉添加搜索框,支持按名称/描述快速筛选 - 新建/编辑密钥弹窗的分组选择也支持搜索 - 智能弹出方向:底部空间不足时自动向上弹出 - 倍率独立为平台配色的圆角标签,更醒目 - 分组名称加粗,名称与描述之间增加间距 - 分组选项之间添加分隔线,视觉更清晰 - 切换图标旁增加"选择分组"文字提示 - 下拉宽度自适应内容长度 - i18n: 新增 searchGroup、noGroupFound 词条 (en/zh)
This commit is contained in:
@@ -224,7 +224,13 @@ const filteredOptions = computed(() => {
|
||||
let opts = props.options as any[]
|
||||
if (props.searchable && searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
opts = opts.filter((opt) => getOptionLabel(opt).toLowerCase().includes(query))
|
||||
opts = opts.filter((opt) => {
|
||||
// Match label
|
||||
if (getOptionLabel(opt).toLowerCase().includes(query)) return true
|
||||
// Also match description if present
|
||||
if (opt.description && String(opt.description).toLowerCase().includes(query)) return true
|
||||
return false
|
||||
})
|
||||
}
|
||||
return opts
|
||||
})
|
||||
@@ -434,7 +440,7 @@ onUnmounted(() => {
|
||||
|
||||
<style>
|
||||
.select-dropdown-portal {
|
||||
@apply w-max min-w-[200px] max-w-[480px];
|
||||
@apply w-max min-w-[200px];
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply rounded-xl;
|
||||
@apply border border-gray-200 dark:border-dark-700;
|
||||
|
||||
Reference in New Issue
Block a user