diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/actions/open-form-dialog.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/actions/open-form-dialog.tsx index 79d00ba34c..b82c5d1372 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/actions/open-form-dialog.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/actions/open-form-dialog.tsx @@ -32,7 +32,7 @@ export const openFormDialogAction: EventFlowActionOptions = { const { title = '请填写表单', width = 600 } = params; // 创建初始值,使用context中传入的数据 - const initialValues = context || {}; + const initialValues = context?.payload || {}; const formData = await new Promise>((resolve) => { // 保存表单数据的状态 diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-eventflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-eventflow.tsx new file mode 100644 index 0000000000..c47c3055ba --- /dev/null +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-eventflow.tsx @@ -0,0 +1,121 @@ +import { Button } from 'antd'; +import React from 'react'; +import { EventFlowManager } from '../libs/eventflow-manager'; +import { openSimpleDialogAction } from '../actions/open-simple-dialog'; +import { openNotificationAction } from '../actions/open-notification'; +import { openFormDialogAction } from '../actions/open-form-dialog'; +import { EventManager } from '../libs/event-manager'; + +// 创建事件管理器 +const eventManager = new EventManager(); + +// 创建事件流管理器实例 +const eventFlowManager = new EventFlowManager(); + +// 注册事件组 +eventFlowManager.addEventGroup({ + name: 'component', + title: '组件事件', + sort: 1, +}); + +// 注册按钮点击事件 +eventFlowManager.addEvent({ + name: 'eventflow:button:click', + title: '按钮点击', + description: '用户点击按钮时触发', + group: 'component', + sort: 1, + uiSchema: {}, +}); + +// 注册动作组 +eventFlowManager.addActionGroup({ + name: 'ui', + title: 'UI操作', + sort: 1, +}); + +// 注册三个动作 +eventFlowManager.addAction(openSimpleDialogAction); +eventFlowManager.addAction(openNotificationAction); +eventFlowManager.addAction(openFormDialogAction); + +// 创建事件流:按钮点击后依次执行三个动作 +eventFlowManager.addFlow({ + key: 'demo-button-click-flow', + title: '按钮点击演示流程', + on: { + event: 'eventflow:button:click', + title: '当按钮被点击时', + }, + steps: [ + { + key: 'step1', + title: '打开简单对话框', + action: 'openSimpleDialog', + params: { + title: '第一步:简单对话框', + width: 600, + }, + isAwait: true, // 等待对话框关闭后再继续 + }, + { + key: 'step2', + title: '显示通知', + action: 'openNotification', + params: { + title: '第二步:通知', + description: '这是事件流的第二步,显示通知消息', + duration: 3, + }, + isAwait: true, // 等待通知操作完成后再继续 + }, + { + key: 'step3', + title: '打开表单对话框', + action: 'openFormDialog', + params: { + title: '第三步:表单对话框', + width: 500, + }, + isAwait: true, // 等待表单对话框关闭后再继续 + }, + ], +}); + +eventManager.on('button:click', (ctx) => { + // eventFlowManager的内部事件 + eventFlowManager.dispatchEvent('eventflow:button:click', ctx); +}); + +const BasicEventFlow = () => { + const handleClick = () => { + // 准备事件上下文 + const ctx = { + payload: { + name: 'eventflow-demo', + time: new Date().toLocaleString(), + }, + source: { + type: 'user-interaction', + component: 'Button', + }, + }; + + // 触发事件 + eventManager.dispatchEvent('button:click', ctx); + }; + + return ( +
+

事件流演示

+

点击按钮将依次触发三个动作:简单对话框 → 通知 → 表单对话框

+ +
+ ); +}; + +export default BasicEventFlow; diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-form.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-form.tsx index 66f06feefb..ed48701dae 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-form.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/basic-form.tsx @@ -16,7 +16,7 @@ async function showFormResult(formData: Record) { const eventManager = new EventManager(); // 监听表单提交事件 eventManager.on('form:submit', async (ctx) => { - const formData = await openFormDialogAction.handler({}, ctx.payload); + const formData = await openFormDialogAction.handler({}, ctx); await showFormResult(formData); }); diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/event.md b/packages/core/client/docs/zh-CN/core/event-and-filter/event.md index 369f93a90f..f23ff76593 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/event.md +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/event.md @@ -22,4 +22,7 @@ - +# 事件流顺序执行多个action +通过EventFlowManager注册事件与多个action,依次执行 + +