第 5 篇：Schema 设计——AI 要生成的字段体系

第 5 篇Schema 设计——AI 要生成的字段体系本篇目标定义一套简单、扁平、AI 几乎不会生成错的字段配置Schema格式。这是「每次变」的那层也是第 8 篇提示词要约束 AI 产出的唯一格式。1. 一份 Schema 长什么样一个页面 一个 JSON 文件{title:客户资料,columns:2,fields:[{name:name,label:姓名,type:input,required:true,placeholder:请输入姓名},{name:gender,label:性别,type:radio,options:[{label:男,value:male},{label:女,value:female}]},{name:birth,label:出生日期,type:date},{name:phone,label:手机号,type:input,pattern:^1\\d{10}$,placeholder:11 位手机号},{name:dept,label:部门,type:select,options:[{label:研发,value:rd},{label:产品,value:pm}]},{name:active,label:启用,type:switch,default:true},{name:remark,label:备注,type:textarea,span:2}]}2. 字段类型清单全集就这 8 个type含义绑定的 shadcn-vue 组件值类型input单行文本Inputstringtextarea多行文本Textareastringnumber数字Input typenumbernumberselect下拉单选Selectstringradio单选组RadioGroupstringcheckbox复选Checkboxboolean单值switch开关Switchbooleandate日期自封装 DateFieldPopover Calendar 或原生 datestringYYYY-MM-DD刻意保持少而够用类型越多AI 越容易生成错、渲染器越难维护。新类型按第 8 篇「加字段类型」的步骤扩展而不是一上来就堆几十种。3. 字段公共属性可选的都省略属性类型说明namestring必填。字段标识对应表单数据键小写驼峰labelstring必填。展示给用户的文案typestring必填。上面 8 个之一requiredboolean是否必填第 7 篇做校验placeholderstring占位提示helpstring字段下方的辅助说明文字defaultany默认值disabledboolean禁用spannumber栅格跨列数2 占满一行配合 FormGridoptions{ label, value }[]select / radio / checkbox 选项patternstring正则校验第 7 篇showWhenobject联动显隐条件第 7 篇4. TypeScript 类型定义第 6 篇渲染器直接引用创建src/schema-form/schema.tsexporttypeFieldType|input|textarea|number|select|radio|checkbox|switch|dateexportinterfaceFieldOption{label:stringvalue:string}exportinterfaceShowWhen{field:string// 依赖的字段名equals:any// 当依赖字段等于该值时显示}exportinterfaceFieldSchema{name:stringlabel:stringtype:FieldType required?:booleanplaceholder?:stringhelp?:stringdefault?:anydisabled?:booleanspan?:number// 栅格跨列2 占满一行options?:FieldOption[]pattern?:stringshowWhen?:ShowWhen}exportinterfacePageSchema{title?:stringcolumns?:number// 表单列数默认 2fields:FieldSchema[]}5. 设计原则为什么 AI 不容易出错扁平字段就是{ name, label, type, ... }一层不搞嵌套组件树。枚举收敛type只有 8 个取值提示词里写死AI 不会发明新词。可选项全省略没有就不写JSON 干净。命名直白name用英文小驼峰label用中文文案AI 语义清晰。6. 验证写两个只有字段不同的 schema 文件如pages/customer.schema.json、pages/device.schema.json用 JSON 校验编辑器或pnpm dlx jsonlint确认格式合法、字段都来自清单。此时页面还没渲染——渲染是第 6 篇的事。本篇小结Schema 是「每次变」的层AI 只产出这个8 个字段类型 一组可选属性够覆盖绝大多数表单下一步写消费这份 Schema 的渲染器第 6 篇SchemaForm 核心实现