目标
对比当前 ObjectUI 的表格组件(Grid/List/ObjectGrid)与 Airtable 的体验,综合落地以下优化,以实现用户感知上的高一致度。所有子项可单独提交 PR。
1. 日期字段人性化格式默认展示
- 将所有日期型列的值从 ISO 格式(如 2024-01-15T00:00:00.000Z)自动格式化为本地化、人类可读格式(如 2024/2/28 12:57am),优先跟随浏览器 locale。
- 涉及:cell renderer、Grid/ListView/fields 层的 formatDate 自动调用。
2. 行悬浮"Open >"按钮/行为规范
- Grid 和 ListView 统一:鼠标悬浮于首列或整行时,出现 "Open >" 文字按钮(含展开 icon),点击直达详情页(record detail)。
- 优化现有 row-expand-button,去除仅 icon/tooltip 的做法,改用文字按钮。
3. 单击单元格即进入编辑状态(单击编辑)
- grid cell 默认支持 "点击即编辑"(editMode: 'click'),双击可作为快捷保存。
- 相关属性:singleClickEdit、editMode,新建选项,默认值为 click。
- InlineEditing 组件兼容此交互。
4. 默认紧凑行高/密度模式
- Grid 和 List 行高默认32-36px(densityMode: 'compact')。
- 工具栏保留密度切换,但默认使用紧凑。
5. 列头样式极简化
- 表头背景统一为浅灰(bg-muted/30),去除冗余分割线/色块。
- 列名用 font-normal text-muted-foreground,排序箭头与文本内联。
- 字段类型图标(如A,#,📅)全部启用。
6. 搜索框移至工具栏
- 搜索框与筛选、分组按钮并列在 toolbar 区域,而不用嵌入表头或首行。
7. 筛选器 pill/chip 样式美化
- 快速筛选条件区块采用更轻量化、Airtable 风格的 pill/chip,支持多条件并列、x移除。
8. 列宽自适应内容
- 启用自动列宽(autoSizeColumns),智能为文本/数值类等分配最优宽度。
9. 行选择 Checkbox 交互样式
- 新增 selectionStyle: 'hover'|'always',支持始终显示 checkbox,适配批量操作。
10. 空表格 ghost row 占位
- 无数据时,底部以半透明 ghost row 显示示例数据轮廓,占位整体表格高度。
- 工具栏支持 dock/浮动切换
- Dashboard/table 编辑右侧联动配置 panel 交互再精细
对应参考图:


目标
对比当前 ObjectUI 的表格组件(Grid/List/ObjectGrid)与 Airtable 的体验,综合落地以下优化,以实现用户感知上的高一致度。所有子项可单独提交 PR。
1. 日期字段人性化格式默认展示
2. 行悬浮"Open >"按钮/行为规范
3. 单击单元格即进入编辑状态(单击编辑)
4. 默认紧凑行高/密度模式
5. 列头样式极简化
6. 搜索框移至工具栏
7. 筛选器 pill/chip 样式美化
8. 列宽自适应内容
9. 行选择 Checkbox 交互样式
10. 空表格 ghost row 占位
对应参考图:

