AuraBoot
免费开始
English简体中文

页面与布局

页面配置列表

AuraBoot 的 Page 是由前端运行时渲染的 JSON schema。一个 Page 描述渲染一个业务页面所需的 Model、布局、Block、字段、过滤器、Action 与数据源。这使得标准 CRUD 和 Dashboard 页面无需自定义 React 代码即可上线。

Page 类型

类型用途典型用途
list在可搜索表格中展示记录Lead、订单、任务
form创建或更新一条记录新建 Lead、编辑发票
detail只读记录视图客户档案、订单详情
dashboard聚合指标与图表销售概览

同一个 Model 可以拥有多个 Page。例如,crm_lead 可以同时有列表页、创建表单、编辑表单与详情页。

Page schema 结构

{
  "pageKey": "crm_lead_list",
  "name:zh-CN": "Lead List",
  "kind": "list",
  "schemaVersion": 4,
  "modelCode": "crm_lead",
  "layout": { "type": "stack" },
  "blocks": []
}

schema 在运行时被解释。导入或发布后,改 JSON 即改渲染的页面。

列表页

列表页组合列、过滤器、搜索、行 Action 与工具栏 Action:

{
  "pageKey": "crm_lead_list",
  "kind": "list",
  "schemaVersion": 4,
  "modelCode": "crm_lead",
  "layout": { "type": "stack" },
  "blocks": [
    {
      "id": "toolbar",
      "blockType": "toolbar",
      "buttons": [
        { "code": "create", "action": "create", "label": "New Lead" }
      ],
      "area": "toolbar"
    },
    {
      "id": "table",
      "blockType": "table",
      "columns": [
        { "field": "lead_name", "width": 220 },
        { "field": "company" },
        { "field": "status", "width": 130, "renderType": "tag", "dictCode": "crm_lead_status" },
        { "field": "assigned_to", "width": 160 }
      ],
      "searchFields": ["lead_name", "email", "company"],
      "area": "main"
    }
  ]
}

表单页

表单页通常由 Command 字段生成:

{
  "pageKey": "crm_lead_form",
  "kind": "form",
  "schemaVersion": 4,
  "modelCode": "crm_lead",
  "layout": { "type": "stack" },
  "blocks": [
    {
      "id": "basic",
      "blockType": "form-section",
      "title": "Basic Information",
      "fields": [
        { "field": "lead_name", "colSpan": 6, "required": true },
        { "field": "company", "colSpan": 6 },
        { "field": "email", "colSpan": 6 },
        { "field": "phone", "colSpan": 6 }
      ],
      "area": "main"
    },
    {
      "id": "buttons",
      "blockType": "form-buttons",
      "buttons": [
        { "code": "submit", "action": "save", "commandCode": "crm:create_lead", "primary": true, "label": "Submit" }
      ],
      "area": "footer"
    }
  ]
}

Command 决定哪些字段可写、必填,Page 决定这些字段的排版方式。

详情页

详情页组合只读数据、相关记录、活动时间线 Block 与 Action:

{
  "pageKey": "crm_account_detail",
  "kind": "detail",
  "schemaVersion": 4,
  "modelCode": "crm_account",
  "layout": { "type": "stack" },
  "blocks": [
    { "id": "overview", "blockType": "form-section", "title": "Overview", "readOnly": true, "area": "main" },
    {
      "id": "contacts",
      "blockType": "sub-table",
      "title": "Contacts",
      "modelCode": "crm_contact",
      "foreignKey": "account_id",
      "area": "sub-tables"
    },
    {
      "id": "activity",
      "blockType": "activity-timeline",
      "title": "Activity",
      "area": "main"
    }
  ]
}

Block

Block 是页面的构成单元:

Block用途
form-section按 1 到 4 列分组的字段
table子表或查询结果的表格
sub-table一对多关联记录
stat-card单一指标
chart可视化数据源
activity-timeline事件或活动历史
rich-text静态内容或上下文说明
tabs将 Block 组织为标签页

响应式行为

Page schema 应描述结构,而非像素级布局。运行时会针对小屏幕自适应表单列、表格与 Block 网格。宽数据表应在自身内容区域内滚动,而不是让整页溢出。

何时编写 React

业务标准页面使用 Page schema。仅在以下情况编写自定义 React:

  • 该交互无法用 Block 表达。
  • 该 Page 是平台工具或 Designer。
  • 该模块需要专门的可视化。
  • 该组件将作为扩展点被复用。

下一步