🗂️ 对象页面通用布局（ObjectPageLayout）

概述

ObjectPageLayout 是对象详情各子页面的通用布局容器组件。它为对象的字段管理、布局管理、列表视图管理等子页面提供统一的 SplitView 布局结构，左侧显示 ObjectNavigationBar，右侧渲染具体的子页面内容组件。

设计理念

ObjectPageLayout 将"对象详情"这个概念的公共布局逻辑抽取出来，任何需要"对象级导航 + 详情内容"的页面都可以复用此组件，只需传入 detailComponent、selectedType 和 emptyMessage。

页面结构

核心逻辑

1. 参数获取

通过 Next.js 的 useParams() 获取路由参数：object_name 和 field_id（可选）。

2. 导航切换

当用户在左侧导航栏点击不同选项时，通过 onSelect 事件更新 selectedType 状态。

3. 高度控制

通过 useHeightWrapper 属性控制是否需要设置 calc(100vh - 100px) 的高度包裹层。

4. 空状态处理

当 object_name 不存在时，显示警告提示信息。

技术要点

• 组件模式：高阶组件/布局组件模式，通过 detailComponent prop 注入内容
• 路由参数：支持 Next.js App Router 的 useParams()
• 组件库：@salesforce/design-system-react 的 SplitView

截图