参考 Airtable 优化 ListView 列表视图（Grid View）

[hotlong]

参考 Airtable 客户列表页面，对 ObjectUI 的 ListView + ObjectGrid + data-table 进行全面优化，使其在视觉和交互上达到 Airtable 同等水平。

---

📊 当前现状分析

✅ 已实现功能

功能	状态	位置
Airtable 风格工具栏 (Hide/Filter/Group/Sort/Color/Search)	✅	packages/plugin-list/src/ListView.tsx L634-888
FilterBuilder (Popover)	✅	ListView.tsx L694-729
SortBuilder (Popover)	✅	ListView.tsx L742-777
Hide Fields	✅	ListView.tsx L638-692
Search (可展开)	✅	ListView.tsx L850-887
Quick Filters (标签)	✅	ListView.tsx L894-917
Density / Row Height	✅	ListView.tsx L790-800
Export (CSV/JSON)	✅	ListView.tsx L802-832
列宽调整	✅	data-table.tsx
列顺序拖拽	✅	data-table.tsx
行选择	✅	data-table.tsx
行号显示	✅	ObjectGrid.tsx L745
冻结列	✅	ObjectGrid.tsx L747
分组数据	✅	ObjectGrid.tsx L978-998
自动类型推断 (日期/状态/金额等)	✅	ObjectGrid.tsx L346-388
Badge 单元格渲染	✅	ObjectGrid.tsx L370-379

---

🔴 Gap 分析：与 Airtable 的差距

P0 — 必须实现（视觉对齐）

1. 记录数量底栏 📊

现状：无记录计数显示
Airtable：底部显示 15 records，选中时显示选中数量

• 包：packages/plugin-list/src/ListView.tsx
• 方案：在 ListView 底部添加状态栏，显示 {data.length} records
• 选中行时切换显示 {selectedCount} of {total} selected
• 工作量：S (2-4h)

2. "+ Add record" 添加行 ➕

现状：无底部添加行入口
Airtable：表格最底行有 + Add record 可点击

• 包：packages/plugin-grid/src/ObjectGrid.tsx + packages/components/src/renderers/complex/data-table.tsx
• 方案：data-table 新增 showAddRow prop，当 operations.create 启用时渲染
• 点击触发 onAddRecord 回调或打开 NavigationOverlay 的创建表单
• 工作量：M (4-8h)

3. 首列复合单元格（Badge + 文本）🏷️

现状：Badge 字段和 Name 字段分别在各自列中独立渲染
Airtable：第一列同一个单元格内 [Enterprise Badge] Acme Corp

• 包：packages/types/src/views.ts (ListColumn 类型) + packages/plugin-grid/src/ObjectGrid.tsx
• 方案：ListColumn 新增 prefix 配置：

  { field: 'customer_name', label: 'Customer Name', prefix: { field: 'category', type: 'badge' } }

  在 generateColumns() 中检测 prefix 配置并合成 compound cell renderer
• 工作量：M (4-8h)

4. 日期时间分离显示 🕐

现状：日期字段使用 formatDate() 统一格式化
Airtable：Created Time 列显示 2/18/2026 12:57am（日期和时间视觉分离）

• 包：packages/fields/src/ (新增 datetime cell renderer)
• 方案：新增 datetime 类型的 cell renderer：

  <span>{date}</span>
  <span className="text-muted-foreground ml-2">{time}</span>

  ObjectGrid.inferColumnType() 中添加 created_time/created_at 等模式匹配
• 工作量：S (2-4h)

5. 行样式精细化 🎨

现状：可能有条纹背景（zebra striping），hover 效果较重
Airtable：纯白背景 + 细 border-b 分隔 + 极轻 hover

• 包：packages/components/src/renderers/complex/data-table.tsx
• 方案：
  • 移除 zebra striping（如有），确保所有行纯白背景
  • hover:bg-muted/30 替换为更轻的 hover
  • 确保 border-b border-border/50 分隔线
• 工作量：S (1-2h)

---

P1 — 锦上添花

6. 排序箭头内联到列标题 ⬆️

现状：使用 ChevronsUpDown 图标按钮
Airtable：标题文本后直接跟随小 ↑/↓

• 包：packages/components/src/renderers/complex/data-table.tsx
• 工作量：S (2h)

7. 列标题类型图标 🔤

现状：列标题只有文本
Airtable：列标题前显示字段类型图标（如 Aᵢ = 文本, # = 数字, 📅 = 日期）

• 包：packages/plugin-grid/src/ObjectGrid.tsx
• 工作量：M (4h)

8. 侧边栏视图导航 📋

现状：视图切换在工具栏顶部
Airtable：左侧边栏列出"客户互动日历"、"客户列表页面"等视图

• 包：packages/plugin-list/src/ListView.tsx
• 工作量：L (1-2d)

---

🔗 涉及文件

文件路径	改动范围
packages/plugin-list/src/ListView.tsx	底栏、侧边栏
packages/plugin-grid/src/ObjectGrid.tsx	复合单元格、类型图标
packages/components/src/renderers/complex/data-table.tsx	行样式、排序箭头、添加行
packages/types/src/views.ts	ListColumn prefix 类型
packages/fields/src/	datetime 渲染器
packages/plugin-list/src/__tests__/ListView.test.tsx	新功能测试
packages/plugin-grid/src/__tests__/	ObjectGrid 测试
packages/components/src/renderers/complex/__tests__/	data-table 测试
packages/components/src/stories-json/list-view.stories.tsx	Storybook 示例

---

✅ 完成标准

• P0-1: 记录数量底栏 — {n} records 显示正常
• P0-2: "+ Add record" 行 — 可点击触发创建流程
• P0-3: 首列复合单元格 — Badge + 文本在同一列渲染
• P0-4: 日期时间分离显示 — 日期和时间视觉区分
• P0-5: 行样式精细化 — 纯白行 + 细分隔线 + 轻 hover
• P1-6: 排序箭头内联
• P1-7: 列标题类型图标
• P1-8: 侧边栏视图导航
• 所有新增功能有对应单元测试
• Storybook 示例更新
• pnpm test 全部通过
• 更新 ROADMAP.md 相关条目

---

• 类型：增强 Enhancement
• 标签：enhancement
• 完成后需运行 test & 更新 roadmap