NocoBase DialogFormLayout 实战在 dialog 中构建标准表单的容器组件【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobaseDialogFormLayout是 NocoBasenocobase/client-v2提供的表单容器组件用于在ctx.viewer.dialog()打开的 dialog 中统一标题区、内容区和底部按钮布局是短表单与确认类表单的标准外壳。读完本文你将掌握 DialogFormLayout 的完整用法、全部 API 参数、它背后的 FlowView 视图机制以及如何与 AntdForm协作实现校验、提交、关闭拦截等实战场景。组件定位只做外壳不接管表单DialogFormLayout的核心设计原则是职责单一它只负责 dialog 的外壳——统一渲染标题区view.Header、内容区children和底部按钮区view.Footer不接管表单实例、字段校验和接口请求。表单逻辑仍然完全由调用方使用 AntdForm编写这与DrawerFormLayoutdrawer 版本保持一致的约定。从源码注释可以确认这一分工DialogFormLayout.tsxCallers own theForminstance, validation, and the actual API call. This component only handles the chrome and close behaviour.即调用方负责Form实例、校验与实际 API 请求组件只负责外壳chrome和关闭行为close behaviour。基本用法在 viewer.dialog 中放置标准表单以下示例完整来自 NocoBase 中文文档展示了在ctx.viewer.dialog()中使用DialogFormLayout创建绑定验证器表单的典型写法import { DialogFormLayout } from nocobase/client-v2; import { Form, Input } from antd; ctx.viewer.dialog({ closable: true, content: () ( DialogFormLayout title{t(Bind verifier)} onCancel{async () { // 可以在这里做未保存确认。 }} onSubmit{async () { const values await form.validateFields(); await ctx.api.resource(verifiers).create({ values }); }} Form form{form} layoutvertical Form.Item namecode label{t(Code)} Input / /Form.Item /Form /DialogFormLayout ), });使用要点必须传closable: true短表单或确认类表单默认使用DialogFormLayout调用方需要在ctx.viewer.dialog()上传closable: true让 Antd Modal 渲染原生关闭按钮。原因是DialogComponent内部对 Modal 固定了closable{false}见 DialogComponent.tsx只有调用方显式传closable: true才能通过 props 展开覆盖这一默认值。onSubmit中自行校验与请求组件不会帮你校验你需要调用form.validateFields()再调用ctx.api.resource(...).create({ values })等接口。onCancel可做拦截确认点击 Cancel 或右上角关闭按钮前会先调用onCancel适合做未保存离开确认。交互流程onSubmit resolve 后自动关闭DialogFormLayout对关闭行为有明确的约定理解它有助于正确编排异步逻辑点击Submit按钮 → 调用onSubmit若传入→ 等待其 resolve → 自动调用view.close()关闭 dialog点击Cancel按钮或右上角 X → 调用onCancel若传入→ 等待其 resolve → 自动关闭若onSubmit抛出异常如校验失败dialog 保持打开不会误关闭。对应源码实现位于 DialogFormLayout.tsxconst handleCancel useCallback(async () { await props.onCancel?.(); await view.close(); }, [props, view]); const handleSubmit useCallback(async () { await props.onSubmit?.(); await view.close(); }, [props, view]);因此在onSubmit中若想阻止关闭只需让 Promise 抛出例如form.validateFields()校验失败时会 rejectview.close()就不会执行。API 参数详解DialogFormLayout的全部 props 定义见 DialogFormLayout.tsx完整说明如下参数类型说明titleReact.ReactNode标题内容渲染到 dialog 的 Header 槽位左对齐childrenReact.ReactNode表单主体通常是 AntdForm包裹的Form.Item字段onCancel() void \| Promisevoid点击 Cancel 或右上角关闭按钮前调用resolve 后才真正关闭onSubmit() void \| Promisevoid点击 Submit 时调用resolve 后自动关闭当前 view抛出异常则保持打开submittingbooleanSubmit 按钮的 loading 状态控制按钮转圈与禁用submitTextReact.ReactNodeSubmit 按钮文案默认 SubmitcancelTextReact.ReactNodeCancel 按钮文案默认 CancelfooterReact.ReactNode完全替换默认 footer传入后默认的 Cancel Submit 按钮被替换适合需要预览、保存草稿等额外操作的场景默认 footer 的渲染逻辑DialogFormLayout.tsx当view.Footer槽位存在时渲染props.footer或默认的Space按钮组——Cancel 为普通ButtonSubmit 为typeprimary主按钮并透传submitting作为loading。源码级原理DialogFormLayout 与 FlowView 视图体系要深入理解 DialogFormLayout需要了解它依赖的 NocoBase FlowView 视图体系。useFlowView获取当前挂载的 viewDialogFormLayout内部通过useFlowView()拿到当前挂载的 view 实例DialogFormLayout.tsx。useFlowView定义于 FlowContextProvider.tsxexport function useFlowView() { const ctx useFlowContext(); return ctx.view as FlowView; }它从FlowReactContext读取ctx.view返回类型为FlowView。FlowView的完整类型定义在 FlowView.tsx关键成员包括typedrawer | popover | dialog | embed标识当前 view 的种类Header/Footer可选的槽位组件DialogFormLayout正是通过它们把标题和按钮注入到 dialog 的原生头尾区域close(result?, force?)关闭当前 view 的方法beforeClose关闭前的拦截钩子。与useFlowView()相对的是useFlowViewer()FlowContextProvider.tsx前者返回当前已挂载的 view用于关闭自己、渲染 Header/Footer 槽位后者返回打开新 view的FlowViewer表面。viewer.dialog 的打开链路ctx.viewer.dialog()是FlowViewer类的方法最终走open({ type: dialog, ...props })FlowView.tsx。打开后由useDialoguseDialog.tsx创建 dialog 并渲染DialogComponent。DialogComponent内部渲染 AntdModal其中closable{false}被硬编码DialogComponent.tsx但后续{...modalProps}会展开调用方传入的配置因此调用方传closable: true即可覆盖让 Modal 渲染右上角原生 X 关闭按钮——这正是文档中反复强调必须在ctx.viewer.dialog()上传closable: true的底层原因。进阶实践场景一未保存确认拦截利用onCancel的resolve 后才会关闭特性可以实现未保存提示DialogFormLayout title{t(Bind verifier)} onCancel{async () { const dirty Object.keys(form.getFieldsValue()).length 0; if (dirty !(await ctx.confirm(t(Discard changes?)))) { // 抛错或直接 return 一个 rejected promise 以阻止关闭 throw new Error(cancelled); } }} ... /DialogFormLayout注意如果只需要在关闭前做同步确认也可以直接使用更底层的viewer.dialog({ preventClose, beforeClose, ... })钩子参考 DrawerFormLayout.tsx 的注释说明。场景二提交中 loading 与文案定制submitting驱动按钮 loadingsubmitText/cancelText定制按钮文案DialogFormLayout title{t(Bind verifier)} submitting{submitting} submitText{t(Bind)} cancelText{t(Cancel)} onSubmit{handleSubmit} ... /DialogFormLayoutsubmitting状态需要调用方自行维护例如在onSubmit开始时 setState(true)结束后 setState(false)组件不感知具体请求状态。场景三自定义 footer当表单需要保存草稿预览等额外操作时用footer完全接管底部DialogFormLayout title{t(Create template)} footer{ Space Button onClick{handlePreview}{t(Preview)}/Button Button onClick{handleCancel}{t(Cancel)}/Button Button typeprimary onClick{handleSubmit}{t(Save)}/Button /Space } ... /DialogFormLayout与 DrawerFormLayout 的选型对比DialogFormLayout与 DrawerFormLayout 是同一套设计的一对组件差异主要体现在维度DialogFormLayoutDrawerFormLayout容器viewer.dialog()Modalviewer.drawer()抽屉适用场景短表单、确认类表单内容较多、需要更宽空间的长表单可配width: 50%等onCancel有可拦截 Cancel/X 做未保存确认无Cancel 直接view.close()关闭按钮右上角 X需调用方传closable: true左侧 X同样需传closable: true布局标题左对齐 内容 底部按钮flex 纵向布局height: 100%标题 内容 底部按钮选型建议短表单两三个字段或确认删除/绑定这类轻交互用DialogFormLayout字段多、需要宽屏编辑的表单用DrawerFormLayout。相关源码与文档索引组件实现DialogFormLayout.tsx抽屉版实现DrawerFormLayout.tsx组件导出入口form/index.tsxexport * from ./DialogFormLayout视图体系FlowView.tsx、FlowContextProvider.tsxdialog 底层实现useDialog.tsx、DialogComponent.tsx姊妹文档DrawerFormLayout 指南【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考