Skip to content

平台级 DetailView 渲染优化:自动分组、空值隐藏、Header 智能化、响应式修正 #921

@hotlong

Description

@hotlong

背景

通过 CRM Contact 详情页(代表性用例)发现平台 DetailView 渲染引擎存在通用性短板——影响所有通过 schema 生成的对象详情页。不涉及 spec 协议改动,spec 现有能力(sections/collapsible/columns/highlights/responsive)已足够,问题在于 objectui 未充分消费。

改动清单

1. RecordDetailView.tsx — 复用 form sections + 删除 columns: 2 硬编码

  • 文件: apps/console/src/components/RecordDetailView.tsx L200-225
  • 当前将所有字段塞入单个 Details section 并硬编码 columns: 2
  • 改法: 读取 objectDef.views?.form?.sections 生成分组;无配置时 fallback 但删除 columns 让 autoLayout 推断

2. DetailSection.tsx — 实现 hideEmpty 空值字段过滤

  • 文件: packages/plugin-detail/src/DetailSection.tsx L70-80
  • 当前空值统一渲染为 -,浪费空间
  • 改法: section.hideEmpty 为 true 时过滤 null/undefined/空字符串字段;空 section 隐藏
  • 类型: packages/types/src/views.ts DetailViewSectionhideEmpty?: boolean

3. DetailView.tsx — Header 显示记录主属性 + 关键 Badge

  • 文件: packages/plugin-detail/src/DetailView.tsx L252
  • 当前 header 显示静态 schema.title(如 "Contact"),不显示实际记录名
  • 改法:
    • DetailViewSchemaprimaryField?: string + summaryFields?: string[]
    • 渲染 data[primaryField] 为标题,summaryFields 渲染为 Badge
    • RecordDetailView 自动从 objectDef 找 name/title 字段填入

4. RecordActivityTimeline — 空态智能折叠

  • 文件: packages/plugin-detail/src/RecordActivityTimeline.tsx L287-294
  • 当前空态占满整个 Card + "No activity recorded"
  • 改法: 空数据时最小化为仅评论输入框,增加 collapseWhenEmpty prop

5. DetailSection.tsx — 响应式断点修正

  • 文件: packages/plugin-detail/src/DetailSection.tsx L159-165
  • 当前 sm: (640px) 断点在 iPad+侧边栏场景下过早触发多列
  • 改法: 改为 md:grid-cols-2 / lg:grid-cols-3,或集成 @object-ui/mobileuseBreakpoint()

6. 字段渲染器增强

  • 文件: packages/fields/ 各 CellRenderer
  • email → mailto + copy;phone → tel + call;boolean → 警告 Badge;经纬度 → 默认进 Metadata

测试要求

  • DetailSection.test.tsx: hideEmpty 过滤、空 section 隐藏
  • DetailView.test.tsx: primaryField 标题渲染、summaryFields Badge
  • autoLayout.test.ts: columns undefined 时自动推断不回归
  • 响应式测试: 断点类名验证

完成后

  • 更新 ROADMAP.md
  • 更新 Storybook DetailView.stories.tsx 展示新能力
  • 回归所有内置对象的 detail 页面一致性

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions