NocoBase 编辑弹窗配置指南：打开方式、弹窗尺寸与模板复用

NocoBase 编辑弹窗配置指南打开方式、弹窗尺寸与模板复用【免费下载链接】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导读在 NocoBase 中凡是点击后能打开弹窗的操作按钮如查看、编辑、新增、关联等与字段都可以通过编辑弹窗配置其打开方式抽屉/对话框/子页面、弹窗尺寸与标题。本文基于 NocoBase 官方文档与客户端源码完整讲解弹窗配置的每一项选项、默认值与底层实现原理帮助你精确控制界面弹窗的展示形态。介绍哪些元素支持弹窗配置NocoBase 界面中凡是点击能打开弹窗的操作或字段都支持配置弹窗的打开方式、尺寸等。典型场景包括数据块操作表格/详情块上的查看View、编辑Edit、新增Add new、添加子记录Add child、关联Associate等操作按钮字段关联字段如记录选择器、日期、下拉选择等可触发弹窗的字段自定义弹窗操作通过操作设置配置的弹窗类操作。从源码看这些操作按钮的弹窗配置项统一由SchemaSettingOpenModeSchemaItems提供并被注册进多个操作的设置面板中例如编辑操作editActionSettings.tsx、自定义弹窗操作customizePopupActionSettings.tsx以及新增、添加子记录、关联等操作。字段组件如 Input、Select、DatePicker同样复用了这套弹窗配置项。在操作配置中打开方式/弹窗尺寸的配置项受全局上下文控制当useOpenModeContext()返回的hideOpenMode为true时会隐藏这两个选项。打开方式在操作/字段的设置面板中通过打开方式Open mode下拉选项可以将弹窗切换为以下三种形态之一抽屉Drawer从页面一侧滑出的侧边抽屉保留当前页面上下文适合承载表单、详情等较长内容对话框Dialog / Modal居中的模态对话框聚焦当前任务适合短小、需要强制交互的场景子页面Page以独立子页面的形式打开拥有完整的页面空间适合内容量大、需要独立路由的场景。源码视角打开方式的三种实现打开方式并非简单的视觉切换而是对应三种不同的底层组件。在 OpenModeProvider.tsx 中type OpenMode drawer | page | modal; const defaultContext: OpenModeProviderProps { defaultOpenMode: drawer, openModeToComponent: { drawer: ActionDrawer, page: ActionPage, modal: ActionModal, }, hideOpenMode: false, };可以看到默认打开方式是drawer抽屉未显式配置openMode时使用该值三种模式分别映射到ActionDrawer、ActionPage、ActionModal三个组件通过OpenModeProvider的openModeToComponent属性甚至可以自定义每种模式对应的渲染组件OpenModeProvider还支持hideOpenMode隐藏打开方式配置与isMobile移动端路由等全局能力。配置值存储在操作 schema 的x-component-props.openMode字段中。在 OpenModeSchemaItems.tsx 中切换打开方式时会同步更新fieldSchema[x-component-props].openMode并通过dn.emit(patch)触发 schema 变更实现即时生效。另外需要注意子页面Page模式并非在所有场景都可用。在新增操作初始化Initializer场景中modeOptions会根据isPopupVisibleControlledByURL()动态决定——只有开启弹窗可见性由 URL 控制时才会出现 Page 选项详见 OpenModeSchemaItems.tsx而在操作设置SchemaSettings场景中默认提供抽屉、对话框、子页面三种选项。弹窗尺寸当打开方式为抽屉或对话框时可以进一步配置弹窗尺寸Popup size可选值为大Large中Middle默认小Small尺寸配置同样存储在 schema 的x-component-props.openSize字段中。切换打开方式时源码会自动删除旧的openSize配置并回落到对应默认值OpenModeSchemaItems.tsx。源码视角不同打开方式的尺寸映射抽屉与对话框的大/中/小对应的是不同的实际宽度百分比抽屉Action.Drawer.tsx尺寸抽屉宽度对话框宽度small30%40%middle默认50%60%large70%80%其中对话框Modal的宽度映射定义在 Action.Modal.tsx。表格中抽屉宽度来自ActionDrawer对话框宽度来自ActionModal。同时要注意默认尺寸的差异当未显式配置openSize时代码会按打开方式取默认值——抽屉默认middle50%对话框默认large80%OpenModeSchemaItems.tsx。子页面模式不提供尺寸配置项因为其占满整个页面空间。模板如果希望多个操作/字段复用同一套弹窗配置打开方式、尺寸、弹窗内的界面与交互逻辑可以使用弹窗模板详见 UI 模板 - 弹窗模板。弹窗模板的核心机制是复用一套弹窗界面与交互逻辑选择器会根据当前操作场景自动过滤/禁用不兼容的模板并提示不满足条件的原因。模板匹配遵循以下规则Collection 操作只能使用同一 Collection 的 Collection 操作创建的弹窗模板非关联 Record 操作可使用同一 Collection 的 Collection 操作或非关联 Record 操作创建的弹窗模板关联 Record 操作可使用同一 Collection 的 Collection 操作或非关联 Record 操作创建的模板也可使用同一关联字段的关联 Record 操作创建的模板关系弹窗模板严格匹配从关联 Record 操作创建的模板带有associationName只能被完全相同关联字段的操作/字段使用。例如在订单.客户关系字段上创建的模板不能被订单.推荐人关系字段使用即使两者的目标数据表都是客户因为模板内部的变量和配置依赖特定的关联关系上下文。小结NocoBase 的编辑弹窗配置以操作/字段的 schema 属性x-component-props.openMode与openSize为核心配合OpenModeProvider提供的组件映射与默认值机制实现了抽屉、对话框、子页面三种打开方式与三档尺寸的灵活组合。理解这一配置体系后你可以为不同操作场景选择最合适的弹窗形态数据量大的内容用抽屉或子页面强交互任务用对话框依据内容量级精确控制弹窗宽度抽屉 30%/50%/70%对话框 40%/60%/80%通过弹窗模板将一套弹窗配置沉淀为可复用资产并借助模板匹配规则保障关联场景下的配置一致性。相关阅读UI 模板 - 弹窗模板。【免费下载链接】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），仅供参考