在 DTO 中使用 Form Layout 配置复杂表单，支持 Tabs/Groups/Sections

字段不多时让表单自动渲染就足够了。可当表单逐渐包含基本资料、联系方式、业务记录时我们还会关心字段怎样分组哪些字段应该并排哪些内容应该放进独立页签Cabloy 的 Form Layout 就是为这件事准备的。它允许我们在 DTO 中描述多个字段在表单中的位置和层级前端再按照这份配置展示布局。简单来说Form Layout 负责“字段放在哪里”字段类型、校验规则等仍由原有的 schema 和表单配置负责。Form Layout 能做什么通过 Form Layout可以在 DTO 中完成这些常见需求调整字段显示顺序将相关字段放进一个有标题的业务分组在桌面端使用多列在手机上自动改为单列将“基本信息”“培训记录”这类独立内容拆到不同 Tab让 Create、Update、View 等表单场景采用一致的结构思路。它常用的几个节点并不复杂field放置一个字段section把字段排成一列或多列group把一组相关字段组织在一起tabs/tab把不同业务内容分到标签页中。例子组织 Student 表单下面截取自 Student Create DTO 中与 Form Layout 有关的部分。为了突出布局省略了 DTO 外层定义、页面操作和其他字段配置。ZovaRender.block(basic-form:blockFormLayout, { formLayout: { children: [ { type: tabs, children: [ { type: tab, title: $locale(BasicInformation), children: [ { type: group, title: $locale(StudentProfile), children: [ { type: section, columns: { default: 1, md: 2 }, children: [ { type: field, name: name }, { type: field, name: mobile }, { type: field, name: imageId, span: { default: 1, md: 2 }, }, ], }, ], }, ], }, { type: tab, title: $locale(TrainingRecords), children: [ { type: field, name: level }, { type: field, name: trainingRecords }, ], }, ], }, ], }, });把这段代码从外到内读就很容易理解它最终要呈现什么。1.tabs和tab按业务内容拆分页面最外层的tabs创建一组标签页。这里有两个tabBasicInformation基本信息TrainingRecords培训记录。如果一张表单里有多个彼此独立的业务区域Tab 能帮助读者一次只关注当前内容。字段较少时则不必强行使用 Tab直接分组通常更直观。2.group给相关字段一个明确的归属基本信息页签中的group标题是StudentProfile。它把姓名、手机号和头像放在“学员资料”这个共同语义下。可以把group理解成一个带标题的业务分组。联系方式、收货地址、审批信息等也都是适合使用 Group 的场景。3.section控制响应式分栏columns: { default: 1, md: 2 }表示默认一列到md及以上宽度时改为两列。因此name与mobile可以在桌面端并排显示在手机上自然变成上下排列。4.field引用 DTO 中已经定义的字段每个field通过name对应 DTO schema 中的字段例如name。它的输入控件、标题和校验规则仍沿用字段本身已有的定义。imageId的span: { default: 1, md: 2 }表示它在默认一列时占一列在两列布局中横跨两列适合头像、备注、说明等希望独占一行的字段。怎么选择节点第一次配置 Form Layout 时可以从最小结构开始需求建议使用只想调整字段顺序field希望字段在宽屏并排显示section希望相关字段有共同标题和边界group希望拆分真正独立的业务内容tabs/tab一个常见组合是Tab 划分业务区域Group 表达业务分组Section 处理响应式分栏Field 放置具体字段。但不需要为了层级“完整”而把每个容器都套上。简单表单只用field需要两列时加section字段确实属于同一业务块时再加group。一个容易忽略的点Form Layout 控制的是字段放置的位置不是字段的可见性配置。如果某个字段不应该显示应在字段自身的 schema metadata 中设置可见性。仅仅不把它写进formLayout并不等同于隐藏该字段可见字段仍可能出现在表单末尾。小结Form Layout 让我们可以在 DTO 中描述复杂表单的结构用field决定字段顺序用section做响应式分栏用group表达业务分组用tabs/tab拆分独立内容。记住这个分工就够了DTO 描述字段结构schema 和表单运行时继续处理字段本身的行为。当表单字段增加或调整时我们只需要同步修改 DTO 中的布局配置而不必在多个页面重复维护字段排列。延伸阅读Form Layout GuideForm GuideStudent Create DTO 示例