Appearance
AtSchemaGenerator
沈孟平
最后更新于 2026-04-23 19:53:53
一个表单生成器，将 JSON Schema 配置可视化。
- 支持拖拽排序字段
- 校验必填字段
- 可选实时结果或者懒加载结果
- 支持自动滚动到新增项
- 适配各个尺寸的 UI
- 支持回显数据
- 支持多种类型
组件定位
AtSchemaGenerator 适合做“接口入参、配置结构、字段协议”的可视化维护。它把同一份数据提供了两种视角：
- 表单模式：适合产品、测试、后端联调时快速维护字段结构
- 编码模式：适合直接查看和编辑最终的
JSON Schema
组件内部会在这两种模式之间互转，因此很适合做“低代码配置面板”或“协议编辑器”。
使用建议
set-model传入的根 schema 至少需要包含type和title，否则会直接抛错。get-schema会先触发表单校验，因此适合放在“保存”动作中调用。- 如果你的项目已经用
AtConfigProvider维护暗黑模式，编码模式下的 Monaco 编辑器主题会自动跟随切换。
代码演示
基础示例
不显示标题栏和切换按钮
API
AtSchemaGenerator Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| title | string | '' | 表单标题 | |
| max-height | number | 400 | 超过该高度会出现纵向滚动条 | |
| scroll-to-new-item | boolean | true | 是否自动滚动到新增的那一项 | |
| show-switch-mode | boolean | true | 是否显示切换模式按钮 |
AtSchemaGenerator Expose
| 名称 | 类型 | 说明 | 版本 |
|---|---|---|---|
| schema | ComputedRef<JsonSchema> | 实时计算的 schema 对象 | |
| set-model | (schema: JsonSchema) => void | 设置 schema 数据，详情见类型声明 | |
| reset-model | () => void | 重置为默认 schema | |
| get-schema | () => Promise<JsonSchema> | 获取 schema 对象 ，会校验必填项，校验失败会返回 rejected Promise |
类型声明
显示类型声明
Typescript
interface FieldItem {
key: string
title: string
type: 'string' | 'number' | 'boolean' | 'object' | 'array'
required: 0 | 1
description: string
children?: FieldItem[]
sortedProps?: string[]
usedByScrollIntoView?: 1
}
interface JsonSchema {
type: 'string' | 'number' | 'boolean' | 'object' | 'array'
title: string
description: string
properties?: { [key: string]: JsonSchema }
items?: JsonSchema
required?: string[]
sortedProps?: string[]
}