NocoBase FlowEngine 实战FlowModel 事件流注册与配置化registerFlow / openFlowSettings 完全指南【免费下载链接】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 FlowEngine 中FlowModel 事件流与配置化机制的实战指南。核心聚焦三个能力如何通过继承FlowModel创建自定义组件模型、如何用registerFlow为模型注册「事件流Flow」从而把配置逻辑与交互步骤声明式地挂载到模型上以及如何通过showFlowSettings自动渲染配置入口、或用openFlowSettings()在代码中手动打开配置表单。读完本文你将能够独立实现一个可被无代码编排的自定义组件并在界面搭建场景中把它的行为、属性完全配置化。一、背景为什么 FlowModel 需要配置化在 NocoBase 的 FlowEngine 中界面上的所有组件都是事件驱动Event-driven的组件的行为、交互和数据变化都由事件Event触发、并通过流Flow执行。而FlowModel正是这套体系的核心载体——它同时管理组件的属性、状态、Flow事件流与渲染是理解 FlowEngine 的第一入口参见 flow-model.md。配置化的意义在于开发者把组件的可调项抽象成一个个Flow每个 Flow 包含若干配置步骤Step步骤里用uiSchema兼容 Formily Schema描述配置表单。这样最终用户不需要接触代码就能在界面搭建器中通过表单完成对组件行为与属性的编排——这正是 NocoBase 无代码编排 能力在自定义组件上的落地方式。二、自定义 Model继承 FlowModel 并实现 render()配置化的前提是有一个自定义组件模型。通过继承FlowModel即可创建自定义模型模型必须实现render()方法来定义组件的渲染逻辑class MyModel extends FlowModel { render() { return Button {...this.props} /; } }render()返回的 JSX 就是该组件模型最终渲染出的 UIthis.props是模型当前持有的属性——后续注册的 Flow 正是通过修改这些 props 来驱动界面变化的。NocoBase 内置了若干可直接继承的基类见 flow-model.md 的可用的 FlowModel 基类表基类名称说明BlockModel所有区块的基类CollectionBlockModel数据表区块继承自BlockModelActionModel所有操作的基类三、注册 Flow事件流把配置逻辑挂到模型上每个模型可以注册一个或多个 Flow用于描述组件的配置逻辑与交互步骤。文档给出的完整注册示例如下MyModel.registerFlow({ key: buttonSettings, title: 按钮设置, steps: { general: { title: 通用配置, uiSchema: { title: { type: string, title: 按钮标题, x-decorator: FormItem, x-component: Input, }, }, defaultParams: { type: primary, }, handler(ctx, params) { ctx.model.setProps(children, params.title); ctx.model.setProps(type, params.type); }, }, }, });各字段含义keyFlow 的唯一标识用于在打开配置表单时定位该 FlowtitleFlow 的名称用于 UI 展示例如配置面板中的标题steps定义配置步骤Step每个步骤包括title步骤标题uiSchema配置表单结构兼容 Formily Schematype定义字段类型、title定义表单项标签、x-decorator: FormItem指定装饰器、x-component: Input指定渲染组件defaultParams默认参数保存前未修改时使用的取值handler(ctx, params)保存时触发用于更新模型状态。这里的ctx是流上下文FlowContext体系ctx.model即当前模型实例示例中通过setProps把表单值写回按钮的children文案和type样式类型。源码视角静态注册与实例注册从源码看registerFlow在FlowModel上同时提供了静态与实例两种形式flowModel.tsx静态注册FlowModel.registerFlow/ 类上调用写入globalFlowRegistry作用于该模型类的所有实例属于事件流概念中的静态流Static Flow实例注册model.registerFlow/ 实例上调用写入该实例的flowRegistry只对当前实例生效即动态流Dynamic Flow。两者在读取时的优先级由getFlow()与getFlows()保证flowModel.tsx实例流优先于静态流同名时实例流覆盖静态流静态流内部按sort与继承深度排序。这与 event-flow.md 中静态流是定义在类上的逻辑模板动态流是定义在实例上的个性化逻辑的划分完全一致。概念层级Flow 的内部结构从概念上一个 Flow 的完整定义结构是见 flow-definition.md 与 event-flow.mdFlowModel └── FlowDefinition ├── FlowEventDefinition 定义触发源全局事件如应用启动局部事件如字段变化、按钮点击 └── FlowActionDefinition 定义可执行动作全局操作如刷新页面局部操作如修改字段值registerFlow中steps里的每个 Step其handler本质上对应FlowActionDefinition的执行逻辑而触发时机由FlowEventDefinition描述。这种事件on 步骤steps的抽象让配置化逻辑与 FlowEngine 的事件流执行引擎完全打通。四、渲染 Model用 showFlowSettings 开启配置入口在渲染组件模型时通过showFlowSettings参数控制是否启用配置化功能。若启用组件右上角将自动显示配置入口如设置图标或按钮用户点击即可进入配置表单FlowModelRenderer model{model} showFlowSettings /FlowModelRenderer是 FlowEngine 提供的统一渲染器详见 flow-model-renderer.md。showFlowSettings打开后渲染器会为模型挂载设置入口入口的点击行为内部即调用下一节要讲的openFlowSettings。这一机制让配置入口零成本地出现在任意自定义模型上开发者无需自行实现按钮与弹窗。五、手动打开配置表单openFlowSettings 完全指南除了依赖内置交互入口也可以在代码中手动调用openFlowSettings()打开配置表单。其 API 签名如下flowSettings.open(options: FlowSettingsOpenOptions): Promiseboolean; model.openFlowSettings(options?: OmitFlowSettingsOpenOptions, model): Promiseboolean;model.openFlowSettings是挂在FlowModel实例上的便捷方法flowModel.tsx调用时无需再传model由实例自身补全flowSettings.open则需要显式传入model。参数定义FlowSettingsOpenOptions定义于 flowSettings.ts各字段如下interface FlowSettingsOpenOptions { model: FlowModel; // 必填所属模型实例 preset?: boolean; // 仅渲染标记为 presettrue 的步骤默认 false flowKey?: string; // 指定单个 Flow flowKeys?: string[]; // 指定多个 Flow当同时提供 flowKey 时被忽略 stepKey?: string; // 指定单个步骤通常与 flowKey 搭配 uiMode?: dialog | drawer; // 表单展示容器默认 dialog onCancel?: () void; // 点击取消时回调 onSaved?: () void; // 配置保存成功后回调 }参数使用要点flowKey/flowKeys对应registerFlow时定义的key用于精确定位要展示哪些 Flow 的配置二者同时提供时flowKey优先stepKey可进一步只打开某个 Flow 中的单个步骤分步配置场景preset用于只展示预设步骤的场景配置必填参数的分步表单uiMode决定配置表单的承载容器dialog居中弹窗默认或drawer侧边抽屉方法返回Promiseboolean可据此判断配置流程是否完成保存成功返回true。需要说明的是源码中的uiMode实际支持更宽的类型集合包括select | switch | dialog | drawer | embed以及一个可传props如title、width、footer自定义底部的对象形式见 flowSettings.ts。在公开文档语境下dialog | drawer是最常用、最稳定的两种容器日常开发优先使用这两个值。示例以 Drawer 模式打开特定 Flow 的配置表单await model.openFlowSettings({ flowKey: buttonSettings, uiMode: drawer, onSaved: () { console.log(按钮配置已保存); }, });该示例对应前面registerFlow注册的buttonSettings这个 Flow以抽屉形式展示通用配置步骤的表单用户在表单中修改按钮标题等内容并保存后handler会被触发将新值写入模型 props同时onSaved回调执行。源码视角保存链路与配置态上下文打开配置表单时内部会为模型构造一个mode: settings配置态的FlowRuntimeContext来承载表单渲染见 flowModel.tsx 中openStepSettingsDialog的实现逻辑。配置态下上下文属性访问返回变量模板字符串如{{ ctx.steps.step1.result }}便于表达式与变量选择而保存后真正执行时则切换到mode: runtime运行态返回真实数据——这就是 flow-context.md 中运行态与配置态双模式设计的体现。保存动作最终通过applyFlow(flowKey, ...)把配置好的步骤参数交给FlowEngine的执行器executor.runFlow(...)执行flowModel.tsx。也就是说配置表单只是编辑入口真正的行为仍由 Flow 执行引擎统一驱动配置化与运行时的逻辑因此天然一致。六、完整示例一个可配置的按钮模型把以上各节串起来一个完整的最小可运行示例// 1. 自定义模型继承 FlowModel实现 render class MyButtonModel extends FlowModel { render() { return Button {...this.props}按钮/Button; } } // 2. 注册 Flow定义按钮设置配置步骤 MyButtonModel.registerFlow({ key: buttonSettings, title: 按钮设置, steps: { general: { title: 通用配置, uiSchema: { title: { type: string, title: 按钮标题, x-decorator: FormItem, x-component: Input, }, type: { type: string, title: 按钮类型, x-decorator: FormItem, x-component: Select, enum: [ { label: 主按钮, value: primary }, { label: 默认, value: default }, ], }, }, defaultParams: { type: primary, }, handler(ctx, params) { ctx.model.setProps(children, params.title); ctx.model.setProps(type, params.type); }, }, }, }); // 3. 渲染启用配置入口 FlowModelRenderer model{model} showFlowSettings /; // 4. 需要时手动打开配置表单 await model.openFlowSettings({ flowKey: buttonSettings, uiMode: drawer, onSaved: () console.log(按钮配置已保存), });七、小结能力API / 写法作用自定义模型class MyModel extends FlowModel { render() {...} }定义组件渲染逻辑注册 FlowMyModel.registerFlow({ key, title, steps })静态或model.registerFlow(...)实例把配置逻辑/交互步骤挂到模型类级或实例级自动配置入口FlowModelRenderer model{model} showFlowSettings /组件右上角自动显示配置入口手动打开配置model.openFlowSettings({ flowKey, uiMode, onSaved })或flowSettings.open({ model, ... })代码中按需打开配置表单支持 dialog / drawer相关测试可参考 flowSettings.open.test.tsx 与 flowModel.test.ts它们覆盖了registerFlow、openFlowSettings及默认参数解析等核心行为可作为深入理解与二次开发的起点。至此你已经掌握了 FlowModel 事件流配置化的完整链路继承模型 → 注册 Flow → 渲染配置入口 → 手动/自动打开配置表单 → handler 写回模型属性 → FlowEngine 执行。基于这套机制你可以在 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NocoBase FlowEngine 实战：FlowModel 事件流注册与配置化（registerFlow / openFlowSettings 完全指南）
NocoBase FlowEngine 实战FlowModel 事件流注册与配置化registerFlow / openFlowSettings 完全指南【免费下载链接】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 FlowEngine 中FlowModel 事件流与配置化机制的实战指南。核心聚焦三个能力如何通过继承FlowModel创建自定义组件模型、如何用registerFlow为模型注册「事件流Flow」从而把配置逻辑与交互步骤声明式地挂载到模型上以及如何通过showFlowSettings自动渲染配置入口、或用openFlowSettings()在代码中手动打开配置表单。读完本文你将能够独立实现一个可被无代码编排的自定义组件并在界面搭建场景中把它的行为、属性完全配置化。一、背景为什么 FlowModel 需要配置化在 NocoBase 的 FlowEngine 中界面上的所有组件都是事件驱动Event-driven的组件的行为、交互和数据变化都由事件Event触发、并通过流Flow执行。而FlowModel正是这套体系的核心载体——它同时管理组件的属性、状态、Flow事件流与渲染是理解 FlowEngine 的第一入口参见 flow-model.md。配置化的意义在于开发者把组件的可调项抽象成一个个Flow每个 Flow 包含若干配置步骤Step步骤里用uiSchema兼容 Formily Schema描述配置表单。这样最终用户不需要接触代码就能在界面搭建器中通过表单完成对组件行为与属性的编排——这正是 NocoBase 无代码编排 能力在自定义组件上的落地方式。二、自定义 Model继承 FlowModel 并实现 render()配置化的前提是有一个自定义组件模型。通过继承FlowModel即可创建自定义模型模型必须实现render()方法来定义组件的渲染逻辑class MyModel extends FlowModel { render() { return Button {...this.props} /; } }render()返回的 JSX 就是该组件模型最终渲染出的 UIthis.props是模型当前持有的属性——后续注册的 Flow 正是通过修改这些 props 来驱动界面变化的。NocoBase 内置了若干可直接继承的基类见 flow-model.md 的可用的 FlowModel 基类表基类名称说明BlockModel所有区块的基类CollectionBlockModel数据表区块继承自BlockModelActionModel所有操作的基类三、注册 Flow事件流把配置逻辑挂到模型上每个模型可以注册一个或多个 Flow用于描述组件的配置逻辑与交互步骤。文档给出的完整注册示例如下MyModel.registerFlow({ key: buttonSettings, title: 按钮设置, steps: { general: { title: 通用配置, uiSchema: { title: { type: string, title: 按钮标题, x-decorator: FormItem, x-component: Input, }, }, defaultParams: { type: primary, }, handler(ctx, params) { ctx.model.setProps(children, params.title); ctx.model.setProps(type, params.type); }, }, }, });各字段含义keyFlow 的唯一标识用于在打开配置表单时定位该 FlowtitleFlow 的名称用于 UI 展示例如配置面板中的标题steps定义配置步骤Step每个步骤包括title步骤标题uiSchema配置表单结构兼容 Formily Schematype定义字段类型、title定义表单项标签、x-decorator: FormItem指定装饰器、x-component: Input指定渲染组件defaultParams默认参数保存前未修改时使用的取值handler(ctx, params)保存时触发用于更新模型状态。这里的ctx是流上下文FlowContext体系ctx.model即当前模型实例示例中通过setProps把表单值写回按钮的children文案和type样式类型。源码视角静态注册与实例注册从源码看registerFlow在FlowModel上同时提供了静态与实例两种形式flowModel.tsx静态注册FlowModel.registerFlow/ 类上调用写入globalFlowRegistry作用于该模型类的所有实例属于事件流概念中的静态流Static Flow实例注册model.registerFlow/ 实例上调用写入该实例的flowRegistry只对当前实例生效即动态流Dynamic Flow。两者在读取时的优先级由getFlow()与getFlows()保证flowModel.tsx实例流优先于静态流同名时实例流覆盖静态流静态流内部按sort与继承深度排序。这与 event-flow.md 中静态流是定义在类上的逻辑模板动态流是定义在实例上的个性化逻辑的划分完全一致。概念层级Flow 的内部结构从概念上一个 Flow 的完整定义结构是见 flow-definition.md 与 event-flow.mdFlowModel └── FlowDefinition ├── FlowEventDefinition 定义触发源全局事件如应用启动局部事件如字段变化、按钮点击 └── FlowActionDefinition 定义可执行动作全局操作如刷新页面局部操作如修改字段值registerFlow中steps里的每个 Step其handler本质上对应FlowActionDefinition的执行逻辑而触发时机由FlowEventDefinition描述。这种事件on 步骤steps的抽象让配置化逻辑与 FlowEngine 的事件流执行引擎完全打通。四、渲染 Model用 showFlowSettings 开启配置入口在渲染组件模型时通过showFlowSettings参数控制是否启用配置化功能。若启用组件右上角将自动显示配置入口如设置图标或按钮用户点击即可进入配置表单FlowModelRenderer model{model} showFlowSettings /FlowModelRenderer是 FlowEngine 提供的统一渲染器详见 flow-model-renderer.md。showFlowSettings打开后渲染器会为模型挂载设置入口入口的点击行为内部即调用下一节要讲的openFlowSettings。这一机制让配置入口零成本地出现在任意自定义模型上开发者无需自行实现按钮与弹窗。五、手动打开配置表单openFlowSettings 完全指南除了依赖内置交互入口也可以在代码中手动调用openFlowSettings()打开配置表单。其 API 签名如下flowSettings.open(options: FlowSettingsOpenOptions): Promiseboolean; model.openFlowSettings(options?: OmitFlowSettingsOpenOptions, model): Promiseboolean;model.openFlowSettings是挂在FlowModel实例上的便捷方法flowModel.tsx调用时无需再传model由实例自身补全flowSettings.open则需要显式传入model。参数定义FlowSettingsOpenOptions定义于 flowSettings.ts各字段如下interface FlowSettingsOpenOptions { model: FlowModel; // 必填所属模型实例 preset?: boolean; // 仅渲染标记为 presettrue 的步骤默认 false flowKey?: string; // 指定单个 Flow flowKeys?: string[]; // 指定多个 Flow当同时提供 flowKey 时被忽略 stepKey?: string; // 指定单个步骤通常与 flowKey 搭配 uiMode?: dialog | drawer; // 表单展示容器默认 dialog onCancel?: () void; // 点击取消时回调 onSaved?: () void; // 配置保存成功后回调 }参数使用要点flowKey/flowKeys对应registerFlow时定义的key用于精确定位要展示哪些 Flow 的配置二者同时提供时flowKey优先stepKey可进一步只打开某个 Flow 中的单个步骤分步配置场景preset用于只展示预设步骤的场景配置必填参数的分步表单uiMode决定配置表单的承载容器dialog居中弹窗默认或drawer侧边抽屉方法返回Promiseboolean可据此判断配置流程是否完成保存成功返回true。需要说明的是源码中的uiMode实际支持更宽的类型集合包括select | switch | dialog | drawer | embed以及一个可传props如title、width、footer自定义底部的对象形式见 flowSettings.ts。在公开文档语境下dialog | drawer是最常用、最稳定的两种容器日常开发优先使用这两个值。示例以 Drawer 模式打开特定 Flow 的配置表单await model.openFlowSettings({ flowKey: buttonSettings, uiMode: drawer, onSaved: () { console.log(按钮配置已保存); }, });该示例对应前面registerFlow注册的buttonSettings这个 Flow以抽屉形式展示通用配置步骤的表单用户在表单中修改按钮标题等内容并保存后handler会被触发将新值写入模型 props同时onSaved回调执行。源码视角保存链路与配置态上下文打开配置表单时内部会为模型构造一个mode: settings配置态的FlowRuntimeContext来承载表单渲染见 flowModel.tsx 中openStepSettingsDialog的实现逻辑。配置态下上下文属性访问返回变量模板字符串如{{ ctx.steps.step1.result }}便于表达式与变量选择而保存后真正执行时则切换到mode: runtime运行态返回真实数据——这就是 flow-context.md 中运行态与配置态双模式设计的体现。保存动作最终通过applyFlow(flowKey, ...)把配置好的步骤参数交给FlowEngine的执行器executor.runFlow(...)执行flowModel.tsx。也就是说配置表单只是编辑入口真正的行为仍由 Flow 执行引擎统一驱动配置化与运行时的逻辑因此天然一致。六、完整示例一个可配置的按钮模型把以上各节串起来一个完整的最小可运行示例// 1. 自定义模型继承 FlowModel实现 render class MyButtonModel extends FlowModel { render() { return Button {...this.props}按钮/Button; } } // 2. 注册 Flow定义按钮设置配置步骤 MyButtonModel.registerFlow({ key: buttonSettings, title: 按钮设置, steps: { general: { title: 通用配置, uiSchema: { title: { type: string, title: 按钮标题, x-decorator: FormItem, x-component: Input, }, type: { type: string, title: 按钮类型, x-decorator: FormItem, x-component: Select, enum: [ { label: 主按钮, value: primary }, { label: 默认, value: default }, ], }, }, defaultParams: { type: primary, }, handler(ctx, params) { ctx.model.setProps(children, params.title); ctx.model.setProps(type, params.type); }, }, }, }); // 3. 渲染启用配置入口 FlowModelRenderer model{model} showFlowSettings /; // 4. 需要时手动打开配置表单 await model.openFlowSettings({ flowKey: buttonSettings, uiMode: drawer, onSaved: () console.log(按钮配置已保存), });七、小结能力API / 写法作用自定义模型class MyModel extends FlowModel { render() {...} }定义组件渲染逻辑注册 FlowMyModel.registerFlow({ key, title, steps })静态或model.registerFlow(...)实例把配置逻辑/交互步骤挂到模型类级或实例级自动配置入口FlowModelRenderer model{model} showFlowSettings /组件右上角自动显示配置入口手动打开配置model.openFlowSettings({ flowKey, uiMode, onSaved })或flowSettings.open({ model, ... })代码中按需打开配置表单支持 dialog / drawer相关测试可参考 flowSettings.open.test.tsx 与 flowModel.test.ts它们覆盖了registerFlow、openFlowSettings及默认参数解析等核心行为可作为深入理解与二次开发的起点。至此你已经掌握了 FlowModel 事件流配置化的完整链路继承模型 → 注册 Flow → 渲染配置入口 → 手动/自动打开配置表单 → handler 写回模型属性 → FlowEngine 执行。基于这套机制你可以在 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考