feat(ui): 优化分组选择器交互体验

- 分组下拉添加搜索框,支持按名称/描述快速筛选
- 新建/编辑密钥弹窗的分组选择也支持搜索
- 智能弹出方向:底部空间不足时自动向上弹出
- 倍率独立为平台配色的圆角标签,更醒目
- 分组名称加粗,名称与描述之间增加间距
- 分组选项之间添加分隔线,视觉更清晰
- 切换图标旁增加"选择分组"文字提示
- 下拉宽度自适应内容长度
- i18n: 新增 searchGroup、noGroupFound 词条 (en/zh)
This commit is contained in:
bayma888
2026-03-08 18:26:17 +08:00
parent 785115c62b
commit 2ebbd4c94d
5 changed files with 142 additions and 27 deletions

View File

@@ -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;