AuraBoot
免费开始
English简体中文

Page Designer

Page Designer — 页面 schema 列表

Page Designer 是 AuraBoot 的可视化页面构建器。它让你通过将 Block 拖拽到画布上来创建列表 Page、表单、详情视图与 Dashboard —— 无需手写 JSON。Designer 中的每一次变更都会产出标准的 DSL JSON,可被导出、纳入版本控制并部署。

在 Designer 体系中的定位

Page Designer 是事务型应用界面的主要 Designer。使用它构建 CRUD Page、Filter、Toolbar、表单分区与详情布局。其他专用输出请使用对应的 Designer:

需求使用
运营图表与 KPI 大盘Dashboard Designer
审批与编排流BPMN Designer
可复用的图编辑器Flow Designer
共享分析查询Query Builder
可打印/可导出报表Report Designer

打开 Designer

在侧边栏进入 Meta > Pages,然后点击 New Page 或编辑现有 Page。Designer 在全屏工作区中打开,包含三个面板:

面板位置用途
Block Palette左侧边栏可拖到画布的 Block 类型
Canvas中部Page 布局的实时预览
Properties右侧边栏所选 Block 的配置

Block 类型

可将以下任一 Block 拖到画布上:

Block描述可用于
Form Section以 1-4 列网格组织的输入分区Form、Detail
Sub-Table以子表展示的关联记录Detail
Stat Card带可选对比的单一 KPI 指标Dashboard
Chart柱图、线图、饼图、面积图或漏斗图Dashboard
Rich Text带格式的静态内容 Block任意
Timeline时间顺序的活动流Detail
Tab Group将 Block 组织进 Tab 分区Detail、Dashboard
Columns表格列配置List
Filters搜索与筛选栏List

Page Type（页面类型）

每个 Page 都有一个 Page Type（DSL 中的 kind 字段）。平台支持以下五种取值：list（列表）、form（表单）、detail（详情）、dashboard（仪表盘）、composite（复合页）。

构建列表 Page

  1. 创建新 Page 并将 Page Type 设置为 list
  2. 选择 Model(例如 crm_lead)
  3. 在 Columns 面板,从 Model 拖入字段以定义可见列
  4. 设置列宽和排序顺序
  5. 添加 Toolbar Actions(例如绑定到 create Command 的 "New Lead" 按钮)
  6. 可选添加 Tabs 进行基于状态的过滤(如 All / New / Qualified / Lost)
  7. 配置 Search Fields 以在指定列上启用关键字搜索

构建表单 Page

  1. 将 Page Type 设置为 form 并选择 Model
  2. 将 Form Section Block 拖到画布
  3. 从 Model 将字段拖入每个分区
  4. 配置分区标题、列数(1-4)与字段顺序
  5. 设置字段级覆盖:required、readonly、placeholder
  6. 表单会自动连线到 Model 的 create/update Command

构建 Dashboard

  1. 将 Page Type 设置为 dashboard
  2. 为关键指标(Lead 总数、转化率、收入)拖入 Stat Card Block
  3. 每张 Stat Card 绑定一个 Data Source —— 一个返回聚合数据的命名查询
  4. 添加 Chart Block,并配置图表类型、Data Source 与轴映射
  5. 使用 Tab Group Block 按类别组织图表

配置 Data Source

Chart 和 Stat Card 从 Data Source 拉取数据 —— 在 DSL 中注册的命名 SQL 查询:

{
  "code": "crm_leads_by_status",
  "title:zh-CN": "按状态统计 Lead",
  "title:en": "Leads by Status",
  "fromSql": "SELECT status, COUNT(*) as count FROM mt_crm_lead GROUP BY status",
  "outputFields": [{ "code": "status" }, { "code": "count" }]
}

在 Designer 中选中一个 Chart Block,然后从下拉中选择 Data Source。把查询结果列映射到图表轴上。

预览与发布

  • Preview —— 点击预览按钮,以终端用户视角查看该页,使用数据库中的真实数据
  • Save —— 将 Page schema 保存为草稿。它在 Designer 中可见,但尚未上线
  • Publish —— 将 Page 发布到其配置的路由。更新立即生效

导出为 DSL JSON

Designer 中创建的每个 Page 都可以导出为 JSON,用于纳入 Plugin:

  1. 在 Designer 中打开该 Page
  2. 点击工具栏的 Export
  3. 将 JSON 文件保存到 Plugin 的 pages/ 目录

由此形成一种工作流:可视化设计 Page、导出、提交到 Git,并通过 Plugin 体系部署。

后续步骤