背景
通过 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 DetailViewSection 加 hideEmpty?: boolean
3. DetailView.tsx — Header 显示记录主属性 + 关键 Badge
- 文件:
packages/plugin-detail/src/DetailView.tsx L252
- 当前 header 显示静态
schema.title(如 "Contact"),不显示实际记录名
- 改法:
DetailViewSchema 加 primaryField?: 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/mobile 的 useBreakpoint()
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 页面一致性
背景
通过 CRM Contact 详情页(代表性用例)发现平台 DetailView 渲染引擎存在通用性短板——影响所有通过 schema 生成的对象详情页。不涉及 spec 协议改动,spec 现有能力(sections/collapsible/columns/highlights/responsive)已足够,问题在于 objectui 未充分消费。
改动清单
1.
RecordDetailView.tsx— 复用 form sections + 删除columns: 2硬编码apps/console/src/components/RecordDetailView.tsxL200-225Detailssection 并硬编码columns: 2objectDef.views?.form?.sections生成分组;无配置时 fallback 但删除 columns 让autoLayout推断2.
DetailSection.tsx— 实现 hideEmpty 空值字段过滤packages/plugin-detail/src/DetailSection.tsxL70-80-,浪费空间section.hideEmpty为 true 时过滤 null/undefined/空字符串字段;空 section 隐藏packages/types/src/views.tsDetailViewSection加hideEmpty?: boolean3.
DetailView.tsx— Header 显示记录主属性 + 关键 Badgepackages/plugin-detail/src/DetailView.tsxL252schema.title(如 "Contact"),不显示实际记录名DetailViewSchema加primaryField?: string+summaryFields?: string[]data[primaryField]为标题,summaryFields渲染为 BadgeRecordDetailView自动从 objectDef 找 name/title 字段填入4.
RecordActivityTimeline— 空态智能折叠packages/plugin-detail/src/RecordActivityTimeline.tsxL287-294collapseWhenEmptyprop5.
DetailSection.tsx— 响应式断点修正packages/plugin-detail/src/DetailSection.tsxL159-165sm:(640px) 断点在 iPad+侧边栏场景下过早触发多列md:grid-cols-2/lg:grid-cols-3,或集成@object-ui/mobile的useBreakpoint()6. 字段渲染器增强
packages/fields/各 CellRenderer测试要求
DetailSection.test.tsx: hideEmpty 过滤、空 section 隐藏DetailView.test.tsx: primaryField 标题渲染、summaryFields BadgeautoLayout.test.ts: columns undefined 时自动推断不回归完成后
ROADMAP.mdDetailView.stories.tsx展示新能力