Skip to content

Schema 生命周期

Schema 是设计器和业务服务之间交换的页面快照。使用 exportSchema() 导出,使用 importSchema() 在打开页面时加载。

ts
import { useDesigner } from '@dragcraft/designer'

const { exportSchema, importSchema, undo, redo } = useDesigner(designer)

const response = await pageApi.getDraft(pageId)
importSchema(response.schema)

const schema = exportSchema()
await pageApi.saveDraft({ id: pageId, schema })

导出的 Schema 是深拷贝,业务可以安全序列化或传给 API。导入会替换当前页面并清空本地历史,因此应在用户确认放弃未保存修改后调用。

Schema 中保存什么

ts
const schema = {
  version: '1.0.0',
  globalConfig: { title: '夏日活动' },
  root: {
    id: 'root',
    type: 'root',
    props: {},
    children: [
      { id: 'notice-1', type: 'notice', props: { text: '限时优惠' } },
      {
        id: 'layout-1', type: 'column-container', props: {},
        container: {
          variant: 'single',
          regions: {
            content: [{ id: 'text-1', type: 'text', props: { content: '欢迎' } }],
          },
        },
      },
    ],
  },
}

root.children 保存页面顶层节点;节点的 type 必须能被业务的物料注册表解析。外部容器的普通子节点保存在 container.regions,导入导出时要把这棵 region 子树视为页面快照的一部分。图片、链接、表单选项等业务数据通常放进 props,页面级业务数据放进 globalConfig

容器 region 的约束和变体由当前物料注册表解释。导入含容器的页面前,先注册对应的 ContainerDefinition;未解析容器会保留数据但不能继续编辑结构。容器协议见 外部容器物料

WARNING

importSchema() 只负责最基本的 Schema 入口校验。服务端仍应校验页面归属、允许的物料类型、资源地址和业务字段,不能把客户端 Schema 当成可信输入。

区分编辑历史和页面版本

undo()redo() 只服务于当前浏览器中的编辑会话。草稿版本、发布版本、审核记录和并发冲突应由业务服务管理。

服务端保存草稿、解决版本冲突和发布页面的流程见 保存草稿与发布