概述
LayoutBuilder 是 One Platform 的可视化画面布局编辑器，提供完整的所见即所得（WYSIWYG）布局设计体验。基于 @dnd-kit 拖拽库和 React Redux 状态管理，用户可以像搭建积木一样设计对象的记录详情和编辑页面布局。
界面布局
LayoutBuilder 界面布局
BuilderHeader (顶部工具栏)
组件面板 (Palette)
- 对象选择
- 字段列表
- 组件列表
画布 (Canvas)
Section 1
字段1
字段2
字段3
字段4
Section 2
...
属性面板 (PropertyPanel)
- 字段名称
- 显示标签
- 行为设置
- 组件类型
- 占位符文本
三栏详解
1. 左侧面板 — ComponentPalette
- 对象选择器：下拉选择对象，加载该对象的字段列表
- 字段列表：显示选中对象的所有可用字段，可拖入画布
- 预置组件：系统提供的通用组件
- 删除区域：从画布中拖出组件到此区域即可删除
2. 中间面板 — Canvas（画布）
- Section：布局的顶层组织单元，可展开/折叠
- Column：每个 Section 内分为多列，支持 1-4 列布局
- LayoutItem：每个列中的具体字段或组件
支持从左侧拖入新字段、画布内拖拽调整位置、拖出画布到删除区域移除字段、点击选中编辑属性。
3. 右侧面板 — PropertyPanel
选中组件后显示属性编辑器：字段名称、显示标签、行为设置（必填/只读）、组件类型、占位符文本。
拖拽系统
基于 @dnd-kit/core 实现，使用 PointerSensor 配置（移动 5px 以上才触发拖拽以区分点击和拖拽）。
拖拽流程
- 从 Palette 拖入字段：onDragStart 记录类型和 ID → onDragEnd 在 Canvas 创建新 LayoutItem
- 在 Canvas 内移动：记录源位置 → 更新目标位置重新排列
- 拖到删除区域：检测 drop zone → 从布局中移除
拖拽 ID 约定
field-xxx：从 Palette 拖入的新字段comp-xxx：从 Palette 拖入的预置组件- 其他 ID：Canvas 中已存在的布局项
核心 Hooks
| Hook | 职责 |
|---|---|
useLayoutStore | 管理布局状态（添加/删除/移动组件） |
useLayoutData | 加载和转换布局数据 |
useObjectData | 加载对象和字段列表 |
useDragDrop | 处理拖拽事件 |
技术架构
| 技术 | 用途 |
|---|---|
@dnd-kit/core | 拖拽系统核心库 |
| React Redux | 全局状态管理 |
@salesforce/design-system-react | UI 组件库 |
| Custom Hooks | 数据加载 |
| Zustand Store | 布局编辑器内部状态 |
录制视频脚本
视频场景
| 场景 | 时间 | 内容 |
|---|---|---|
| 打开 Builder | 0:00-0:20 | 从 ObjectLayouts 页面点击编辑，新标签页打开 |
| 界面概览 | 0:20-0:50 | 展示三栏式布局 |
| 拖入字段 | 0:50-1:30 | 选择对象 → 拖拽字段到画布 |
| 调整位置 | 1:30-2:00 | 画布内拖拽移动字段 |
| 编辑属性 | 2:00-2:30 | 修改标签、组件类型等 |
| 删除字段 | 2:30-2:50 | 拖回左侧删除区域 |
| 保存布局 | 2:50-3:10 | 保存到后端，前台查看效果 |
| 总结 | 3:10-3:30 | LayoutBuilder 价值总结 |
录制准备清单
- 准备一个包含多个字段的测试对象
- 创建至少一个测试布局
- 确保浏览器窗口分辨率 1920×1080 或更高
- 关闭无关标签页和通知
- 准备录屏软件（OBS Studio / Camtasia / Screen Studio）
截图
属性面板编辑状态 — 待插入
../../images/product/one_platform/layout-builder-properties.png
