页面设计器 ​

拖拽式低代码页面设计器：从左侧物料区拖入组件到画布，在右侧配置 属性 / 样式 / 事件，最终产出可渲染的结构化数据，并可用 GrowRenderer 预览或落地。

界面分区 ​

┌─────────────────────────────────────────────────────────────┐
│ 工具栏：清空 / 预览                                           │
├────┬──────────────┬──────────────────────────┬──────────────┤
│ 轨 │ 左侧面板      │ 画布                      │ 右侧属性面板  │
│ 道 │ 组件库/树/…   │ 拖拽放置、选中、复制删除     │ 属性/样式/事件 │
└────┴──────────────┴──────────────────────────┴──────────────┘

核心能力 ​

1. 物料拖拽：基础元素、表单、布局、展示类与业务组件（映射到 Grow* 或原生标签）
2. 样式可视化：尺寸与间距、圆角、边框、背景、阴影、布局模式（display / flex）；文字类可配颜色 / 字号 / 对齐等
3. 结构树与 JSON：查看 / 定位节点，导出设计数据
4. 数据源 / 计算属性 / 数据请求：静态数据、派生 state、远程接口配置
5. 页面事件与数据监听：生命周期脚本、state 监听
6. 变量绑定 / 函数绑定：属性支持 text / bind / function 三种模式
7. 渲染分离：编辑态 GrowDesigner，运行态 GrowRenderer 消费同一套 schema

与 报表设计器 的关系：报表复用本模块的页面级数据面板与运行时；图表区块用独立的 dataBinding 注入 data，见 报表 · 数据绑定。

工具链全景见 低代码设计器。

推荐阅读 ​

1. 基础用法 — 接入演示模块、画布操作
2. 样式面板 — 样式项、display 内外层约定
3. 数据源与数据请求 — 左侧数据面板与字段说明
4. 变量绑定 — 属性绑定 state、函数绑定
5. 事件与生命周期 — 组件事件、页面事件、监听、计算属性
6. 数据模型 — structures / props / propBindModes / pageConfig