JSON → UI 测试

通过 JSON Schema 配置实时渲染 XTO UI 组件，测试 Schema 骱动的 UI 生成效果。

测试界面

📝 Schema 输入 (JSON)

🎨 UI 渲染预览

📋

请先输入 Schema JSON 或点击「加载示例」

使用说明

1. 编辑 JSON Schema

左侧面板为 JSON 编辑区，可以输入或修改 FormSchema 配置。Schema 格式如下：

{
  "id": "form-test",
  "name": "测试表单",
  "version": "1.0.0",
  "fields": [
    {
      "name": "字段名",
      "label": "显示标签",
      "type": "input|select|date|number|textarea|switch|checkbox|radio|rate|slider",
      "props": {},
      "rules": []
    }
  ]
}

2. 查看渲染结果

右侧面板实时显示根据 Schema 生成的表单组件。

3. 测试交互功能

• 输入数据会在底部"表单数据"区域实时显示
• 可以测试各组件的数据绑定和交互效果

支持的字段类型

类型	组件	说明
input	XInput	文本输入框
select	XSelect	下拉选择器
date	XDatePicker	日期选择器
number	XInputNumber	数字输入框
textarea	XTextarea	多行文本域
switch	XSwitch	开关
checkbox	XCheckbox	复选框
radio	XRadioGroup	单选组
rate	XRate	评分
slider	XSlider	滑块

示例 Schema

基础表单

{
  "id": "basic-form",
  "name": "基础表单",
  "version": "1.0.0",
  "fields": [
    { "name": "name", "label": "姓名", "type": "input" },
    { "name": "age", "label": "年龄", "type": "number" },
    { "name": "gender", "label": "性别", "type": "select", "props": { "options": [{ "label": "男", "value": "male" }, { "label": "女", "value": "female" }] } },
    { "name": "birthday", "label": "生日", "type": "date" }
  ]
}

用户信息表单

{
  "id": "user-form",
  "name": "用户信息",
  "version": "1.0.0",
  "fields": [
    { "name": "username", "label": "用户名", "type": "input", "rules": [{ "type": "required", "message": "请输入用户名" }] },
    { "name": "email", "label": "邮箱", "type": "input" },
    { "name": "status", "label": "状态", "type": "select", "props": { "options": [{ "label": "活跃", "value": 1 }, { "label": "禁用", "value": 0 }] } },
    { "name": "score", "label": "评分", "type": "rate" },
    { "name": "active", "label": "是否激活", "type": "switch" },
    { "name": "bio", "label": "简介", "type": "textarea" }
  ]
}

API

renderFormSchema

import { renderFormSchema } from '@xto/lowcode-shared'

// 返回 Vue 组件配置
const componentConfig = renderFormSchema(formSchema)

validateFormSchema

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

const result = validateFormSchema(schema)
if (!result.success) {
  console.error('Schema 校验失败:', result.error.errors)
}

注意事项

1. 字段名称唯一性：每个字段的 name 必须唯一
2. 类型映射：type 会自动映射到对应的 XTO UI 组件
3. 依赖 XTO UI：A2UI 表单组件依赖 XTO UI 的现有组件，不自行扩展