Schema 规范

A2UI 定义了三种统一的 Schema 规范：PageSchema、FormSchema、FlowSchema。

公共字段

所有 Schema 均包含以下基础字段：

字段	类型	必填	说明
id	string	是	唯一标识
name	string	是	名称
version	string	是	版本号

PageSchema

页面配置 Schema，定义页面布局和组件。

interface PageSchema {
  id: string
  name: string
  version: string
  layout: LayoutConfig
  components: ComponentNode[]
}

interface LayoutConfig {
  type: 'grid' | 'flex' | 'absolute'
  columns?: number
  gap?: number
}

interface ComponentNode {
  id: string
  type: string           // xto-input, xto-table 等
  props: Record<string, any>
  position: { x: number; y: number; width: number; height: number }
}

示例

{
  "id": "page-001",
  "name": "用户列表",
  "version": "1.0.0",
  "layout": { "type": "grid", "columns": 12, "gap": 16 },
  "components": [
    {
      "id": "table-1",
      "type": "xto-table",
      "props": { "border": true },
      "position": { "x": 0, "y": 0, "width": 800, "height": 400 }
    }
  ]
}

FormSchema

表单配置 Schema，定义字段和校验规则。

interface FormSchema {
  id: string
  name: string
  version: string
  fields: FieldSchema[]
  layout?: FormLayout
}

interface FieldSchema {
  name: string
  label: string
  type: FieldType
  props?: Record<string, any>
  rules?: FieldValidation[]
}

type FieldType = 'input' | 'select' | 'date' | 'number' | 'textarea' | ...

字段类型映射

FieldType	组件
input	xto-input
select	xto-select
date	xto-date-picker
number	xto-input-number
textarea	xto-textarea

示例

{
  "id": "form-001",
  "name": "用户表单",
  "version": "1.0.0",
  "fields": [
    {
      "name": "username",
      "label": "用户名",
      "type": "input",
      "rules": [{ "type": "required", "message": "必填" }]
    }
  ]
}

FlowSchema

流程配置 Schema，定义节点和连线。

interface FlowSchema {
  id: string
  name: string
  version: string
  nodes: FlowNode[]
  edges: FlowEdge[]
}

interface FlowNode {
  id: string
  type: NodeType
  position: { x: number; y: number }
  data: { label: string; config: Record<string, any> }
}

type NodeType = 'start' | 'llm' | 'end' | 'condition' | 'loop' | 'tool'

示例

{
  "id": "flow-001",
  "name": "AI流程",
  "nodes": [
    { "id": "n1", "type": "start", "position": { "x": 100, "y": 100 } },
    { "id": "n2", "type": "llm", "position": { "x": 300, "y": 100 } },
    { "id": "n3", "type": "end", "position": { "x": 500, "y": 100 } }
  ],
  "edges": [
    { "id": "e1", "source": "n1", "target": "n2" },
    { "id": "e2", "source": "n2", "target": "n3" }
  ]
}

校验

使用 Zod 校验 Schema：

import { validatePageSchema, validateFormSchema } from '@xto/lowcode-shared'

const result = validateFormSchema(schema)
if (!result.success) {
  console.error(result.error.errors)
}

代码生成

生成 Vue 代码：

import { generatePageCode, generateFormCode } from '@xto/lowcode-shared'

const vueCode = generateFormCode(formSchema)