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,依次执行
+
+# 条件事件流
+根据条件决定执行哪些动作的事件流
+
+
+
+# 条件触发事件流
+根据事件级别的条件决定是否触发整个事件流
+
+
+
+# 事件流数据传递
+演示如何在事件流的各个步骤之间传递数据
+
+
+
+# 多按钮事件流
+为不同按钮注册不同的事件流
+
+