Skip to content

合并列表视图的筛选、查找、排序���工具栏为一行,并支持字段筛选折叠 #896

Description

@hotlong

变更评估

参考 Airtable 的 Interfaces 工具栏及 Airtable界面截图 优化 ObjectUI 的 ListView 组件,合并筛选、查找、排序相关两行工具栏为一行,并当左侧字段筛选过多时自动折叠。

需要修改的模块与细节:

  1. UserFilters.tsx(字段筛选徽章组件)
    • 增加 maxVisible 属性,超出时将多余字段筛选徽章折叠为 "More" 下拉按钮。
    • 支持 Popover 展开所有隐藏字段筛选。
    • 响应式处理,移动端按 1~2 个徽章显示。
  2. ListView.tsx(列表视图主组件)
    • 合并原有的 UserFilters 行和工具按钮行,在 toolbar 栏内左侧显示字段筛选徽章,右侧显示排序、查找等工具按钮。
    • 左侧徽章与右侧按钮通过分隔线视觉隔开。
    • toolbar 行内采用 flex 布局,保证工具按钮固定显示,字段筛选徽章溢出时自动压缩、折叠。
    • 查找(Search)按钮改为 icon,弹出输入框。
    • 移除原先单独的 UserFilters 工具栏。
  3. QuickFilters 行 保持未变,仍然展示快速筛选。
  4. 兼容响应式
    • toolbar 在各屏幕尺寸下布局合理。
    • 工��栏和筛选徽章均支持溢出时折叠,移动端显示合理。

设计与体验要求:

  • 与 Airtable 界面风格接近,信息密集区提升一行展示能力。
  • 多字段筛选能方便折叠扩展,支持更多字段但不挤占工具按钮空间。

参考资料:

  • Airtable 工具栏界面(见上传截图)
  • packages/plugin-list/src/ListView.tsx
  • packages/plugin-list/src/UserFilters.tsx

任务要求:

  • 按上述细节评估,对 ListView 相关工具栏���构进行重构,实现一行合并与折叠。
  • 编写必要的单元测试,确保折叠行为和交互逻辑。
  • 更新 ROADMAP.md 和相关 issue。

Airtable界面截图

Metadata

Metadata

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions