diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/conditional-eventflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/conditional-eventflow.tsx new file mode 100644 index 0000000000..c6b1999c6c --- /dev/null +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/conditional-eventflow.tsx @@ -0,0 +1,114 @@ +import { Button, Radio, Space } from 'antd'; +import React, { useState } from 'react'; +import { EventFlowManager } from '../libs/eventflow-manager'; +import { openSimpleDialogAction } from '../actions/open-simple-dialog'; +import { openNotificationAction } from '../actions/open-notification'; +import { EventManager } from '../libs/event-manager'; + +// Event and flow managers +const eventManager = new EventManager(); +const eventFlowManager = new EventFlowManager(); + +// Register event groups and events +eventFlowManager.addEventGroup({ + name: 'component', + title: '组件事件', + sort: 1, +}); + +eventFlowManager.addEvent({ + name: 'eventflow:button:click', + title: '按钮点击', + description: '用户点击按钮时触发', + group: 'component', + sort: 1, + uiSchema: {}, +}); + +// Register action groups and actions +eventFlowManager.addActionGroup({ + name: 'ui', + title: 'UI操作', + sort: 1, +}); + +eventFlowManager.addAction(openSimpleDialogAction); +eventFlowManager.addAction(openNotificationAction); + +// Create conditional flow +eventFlowManager.addFlow({ + key: 'conditional-flow-demo', + title: '条件流程演示', + on: { + event: 'eventflow:button:click', + title: '当按钮被点击时', + }, + steps: [ + { + key: 'step1', + title: '根据条件执行不同操作', + action: 'openSimpleDialog', + // 根据用户选择的选项决定操作 + condition: '{{ctx.payload.option === "A"}}', + params: { + title: '选项A的对话框', + width: 500, + }, + isAwait: true, + }, + { + key: 'step2', + title: '显示通知', + action: 'openNotification', + // 仅在用户选择选项B时执行 + condition: '{{ctx.payload.option === "B"}}', + params: { + title: '选项B的通知', + description: '您选择了选项B', + duration: 3, + }, + isAwait: true, + }, + ], +}); + +// Connect event manager to eventflow +eventManager.on('button:click', (ctx) => { + eventFlowManager.dispatchEvent('eventflow:button:click', ctx); +}); + +const ConditionalEventFlow = () => { + const [selectedOption, setSelectedOption] = useState('A'); + + const handleClick = () => { + // 准备事件上下文,包含用户选择 + const ctx = { + payload: { + option: selectedOption, + }, + }; + + // 触发事件 + eventManager.dispatchEvent('button:click', ctx); + }; + + return ( +
+

条件事件流演示

+

根据选择的选项执行不同的动作

+ + + setSelectedOption(e.target.value)}> + 选项A (显示对话框) + 选项B (显示通知) + + + + +
+ ); +}; + +export default ConditionalEventFlow; diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/conditional-flow-trigger.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/conditional-flow-trigger.tsx new file mode 100644 index 0000000000..d35a2fce83 --- /dev/null +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/conditional-flow-trigger.tsx @@ -0,0 +1,149 @@ +import { Button, InputNumber, Space, Switch, Typography } from 'antd'; +import React, { useState } from 'react'; +import { EventFlowManager } from '../libs/eventflow-manager'; +import { openSimpleDialogAction } from '../actions/open-simple-dialog'; +import { openNotificationAction } from '../actions/open-notification'; +import { EventManager } from '../libs/event-manager'; + +const { Text } = Typography; + +// Event and flow managers +const eventManager = new EventManager(); +const eventFlowManager = new EventFlowManager(); + +// Register event groups and events +eventFlowManager.addEventGroup({ + name: 'component', + title: '组件事件', + sort: 1, +}); + +eventFlowManager.addEvent({ + name: 'eventflow:button:click', + title: '阈值检查', + description: '检查数值是否超过阈值', + group: 'component', + sort: 1, + uiSchema: {}, +}); + +// Register action groups and actions +eventFlowManager.addActionGroup({ + name: 'ui', + title: 'UI操作', + sort: 1, +}); + +eventFlowManager.addAction(openSimpleDialogAction); +eventFlowManager.addAction(openNotificationAction); + +// Create event flow with a condition at the event level +eventFlowManager.addFlow({ + key: 'conditional-trigger-flow', + title: '条件触发流程演示', + on: { + event: 'eventflow:button:click', + title: '当数值超过阈值时', + // 添加事件级别的条件:仅在启用监控且值超过阈值时触发 + condition: '{{ctx.payload.monitoringEnabled && ctx.payload.currentValue > ctx.payload.threshold}}', + }, + steps: [ + { + key: 'step1', + title: '显示警告对话框', + action: 'openSimpleDialog', + params: { + title: '阈值警告', + width: 500, + }, + isAwait: true, + }, + { + key: 'step2', + title: '发送通知', + action: 'openNotification', + params: { + title: '阈值超限警告', + duration: 5, + }, + isAwait: true, + }, + ], +}); + +// Connect event manager to eventflow +eventManager.on('threshold:check', (ctx) => { + eventFlowManager.dispatchEvent('eventflow:button:click', ctx); +}); + +const ConditionalFlowTrigger = () => { + const [threshold, setThreshold] = useState(50); + const [currentValue, setCurrentValue] = useState(30); + const [monitoringEnabled, setMonitoringEnabled] = useState(true); + + const handleCheck = () => { + // 准备事件上下文 + const ctx = { + payload: { + threshold, + currentValue, + monitoringEnabled, + time: new Date().toLocaleString(), + }, + source: { + type: 'user-interaction', + component: 'ThresholdMonitor', + }, + }; + + // 触发事件 + eventManager.dispatchEvent('threshold:check', ctx); + }; + + return ( +
+

条件触发事件流演示

+

仅当启用监控并且当前值超过阈值时,才会触发事件流

+ + + + 阈值设置: + setThreshold(value)} min={0} max={100} /> + + + + 当前值: + setCurrentValue(value)} min={0} max={100} /> + threshold ? 'danger' : 'success'}> + {currentValue > threshold ? '超过阈值' : '正常范围'} + + + + + 启用监控: + setMonitoringEnabled(checked)} /> + + + + +
+

+ 事件流触发条件: monitoringEnabled && currentValue > threshold +

+

+ 当前状态:{' '} + {monitoringEnabled && currentValue > threshold ? ( + 将触发事件流 + ) : ( + 不会触发事件流 + )} +

+
+
+
+ ); +}; + +export default ConditionalFlowTrigger; diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/data-passing-eventflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/data-passing-eventflow.tsx new file mode 100644 index 0000000000..3afe9e72c5 --- /dev/null +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/data-passing-eventflow.tsx @@ -0,0 +1,134 @@ +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 { EventManager } from '../libs/event-manager'; + +// Create managers +const eventManager = new EventManager(); +const eventFlowManager = new EventFlowManager(); + +// Basic setup +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.addActionGroup({ + name: 'data', + title: '数据操作', + sort: 2, +}); + +eventFlowManager.addAction(openSimpleDialogAction); +eventFlowManager.addAction(openNotificationAction); + +// Add a custom data processing action +eventFlowManager.addAction({ + name: 'processData', + title: '处理数据', + description: '处理上下文中的数据并添加新信息', + group: 'data', + sort: 201, + uiSchema: { + prefix: { + type: 'string', + title: '前缀', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + default: '处理结果:', + }, + }, + handler: async (params, context) => { + const { prefix = '处理结果:' } = params; + + // 添加处理结果到上下文 + context.results.processedData = `${prefix}${context.payload.initialData || ''}`; + context.results.processedTime = new Date().toLocaleString(); + + return context; + }, +}); + +// Create flow with data passing between steps +eventFlowManager.addFlow({ + key: 'data-passing-flow', + title: '数据传递演示流程', + on: { + event: 'eventflow:button:click', + title: '当按钮被点击时', + }, + steps: [ + { + key: 'step1', + title: '处理数据', + action: 'processData', + params: { + prefix: '已处理: ', + }, + isAwait: true, + }, + { + key: 'step2', + title: '显示处理结果', + action: 'openNotification', + params: { + title: '数据处理结果', + duration: 5, + }, + isAwait: true, + }, + ], +}); + +eventManager.on('button:click', (ctx) => { + eventFlowManager.dispatchEvent('eventflow:button:click', ctx); +}); + +const DataPassingEventFlow = () => { + const handleClick = () => { + // 准备事件上下文 + const ctx = { + payload: { + initialData: '用户输入的原始数据', + time: new Date().toLocaleString(), + }, + source: { + type: 'user-interaction', + component: 'Button', + }, + }; + + // 触发事件 + eventManager.dispatchEvent('button:click', ctx); + }; + + return ( +
+

数据传递演示

+

演示事件流中各步骤之间的数据传递

+ +
+ ); +}; + +export default DataPassingEventFlow; diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/multi-button-eventflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/multi-button-eventflow.tsx new file mode 100644 index 0000000000..d4d893f808 --- /dev/null +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/events/multi-button-eventflow.tsx @@ -0,0 +1,190 @@ +import { Button, Space, Divider } 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'; + +// Managers +const eventManager = new EventManager(); +const eventFlowManager = new EventFlowManager(); + +// Basic setup +eventFlowManager.addEventGroup({ + name: 'component', + title: '组件事件', + sort: 1, +}); + +// Register events for different buttons +eventFlowManager.addEvent({ + name: 'eventflow:button1:click', + title: '按钮1点击', + description: '用户点击按钮1时触发', + group: 'component', + sort: 1, + uiSchema: {}, +}); + +eventFlowManager.addEvent({ + name: 'eventflow:button2:click', + title: '按钮2点击', + description: '用户点击按钮2时触发', + group: 'component', + sort: 2, + uiSchema: {}, +}); + +eventFlowManager.addEvent({ + name: 'eventflow:button3:click', + title: '按钮3点击', + description: '用户点击按钮3时触发', + group: 'component', + sort: 3, + uiSchema: {}, +}); + +// Register action group +eventFlowManager.addActionGroup({ + name: 'ui', + title: 'UI操作', + sort: 1, +}); + +// Register actions +eventFlowManager.addAction(openSimpleDialogAction); +eventFlowManager.addAction(openNotificationAction); +eventFlowManager.addAction(openFormDialogAction); + +// Create flow for button 1 +eventFlowManager.addFlow({ + key: 'button1-flow', + title: '按钮1流程', + on: { + event: 'eventflow:button1:click', + title: '当按钮1被点击时', + }, + steps: [ + { + key: 'step1', + title: '显示通知', + action: 'openNotification', + params: { + title: '按钮1的通知', + description: '您点击了按钮1', + duration: 3, + }, + isAwait: true, + }, + ], +}); + +// Create flow for button 2 +eventFlowManager.addFlow({ + key: 'button2-flow', + title: '按钮2流程', + on: { + event: 'eventflow:button2:click', + title: '当按钮2被点击时', + }, + steps: [ + { + key: 'step1', + title: '显示对话框', + action: 'openSimpleDialog', + params: { + title: '按钮2的对话框', + width: 500, + }, + isAwait: true, + }, + ], +}); + +// Create flow for button 3 +eventFlowManager.addFlow({ + key: 'button3-flow', + title: '按钮3流程', + on: { + event: 'eventflow:button3:click', + title: '当按钮3被点击时', + }, + steps: [ + { + key: 'step1', + title: '打开表单对话框', + action: 'openFormDialog', + params: { + title: '按钮3的表单', + width: 500, + }, + isAwait: true, + }, + ], +}); + +// Connect event handlers +eventManager.on('button1:click', (ctx) => { + eventFlowManager.dispatchEvent('eventflow:button1:click', ctx); +}); + +eventManager.on('button2:click', (ctx) => { + eventFlowManager.dispatchEvent('eventflow:button2:click', ctx); +}); + +eventManager.on('button3:click', (ctx) => { + eventFlowManager.dispatchEvent('eventflow:button3:click', ctx); +}); + +const MultiButtonEventFlow = () => { + const createClickHandler = (buttonNum) => { + return () => { + // 准备事件上下文 + const ctx = { + payload: { + button: buttonNum, + time: new Date().toLocaleString(), + }, + source: { + type: 'user-interaction', + component: `Button${buttonNum}`, + }, + }; + + // 触发事件 + eventManager.dispatchEvent(`button${buttonNum}:click`, ctx); + }; + }; + + return ( +
+

多按钮事件流演示

+

每个按钮触发不同的事件流

+ + + + + + + + + + + + +
+

每个按钮触发各自的事件流,展示不同的UI交互

+
+
+
+ ); +}; + +export default MultiButtonEventFlow; 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 f23ff76593..7be110f81f 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 @@ -26,3 +26,23 @@ 通过EventFlowManager注册事件与多个action,依次执行 + +# 条件事件流 +根据条件决定执行哪些动作的事件流 + + + +# 条件触发事件流 +根据事件级别的条件决定是否触发整个事件流 + + + +# 事件流数据传递 +演示如何在事件流的各个步骤之间传递数据 + + + +# 多按钮事件流 +为不同按钮注册不同的事件流 + +