mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-09 23:49:27 +08:00
chore: more demos[skip ci]
This commit is contained in:
gchust
parent
0a74b0c7cf
commit
a342a900c2
@ -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 (
|
||||||
|
<div style={{ padding: 24, background: '#f0f2f5', borderRadius: 8 }}>
|
||||||
|
<h3>条件事件流演示</h3>
|
||||||
|
<p>根据选择的选项执行不同的动作</p>
|
||||||
|
|
||||||
|
<Space direction="vertical" size="middle">
|
||||||
|
<Radio.Group value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
|
||||||
|
<Radio value="A">选项A (显示对话框)</Radio>
|
||||||
|
<Radio value="B">选项B (显示通知)</Radio>
|
||||||
|
</Radio.Group>
|
||||||
|
|
||||||
|
<Button type="primary" onClick={handleClick}>
|
||||||
|
触发条件事件流
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConditionalEventFlow;
|
||||||
@ -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 (
|
||||||
|
<div style={{ padding: 24, background: '#f0f2f5', borderRadius: 8 }}>
|
||||||
|
<h3>条件触发事件流演示</h3>
|
||||||
|
<p>仅当启用监控并且当前值超过阈值时，才会触发事件流</p>
|
||||||
|
|
||||||
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||||
|
<Space>
|
||||||
|
<Text>阈值设置:</Text>
|
||||||
|
<InputNumber value={threshold} onChange={(value) => setThreshold(value)} min={0} max={100} />
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Space>
|
||||||
|
<Text>当前值:</Text>
|
||||||
|
<InputNumber value={currentValue} onChange={(value) => setCurrentValue(value)} min={0} max={100} />
|
||||||
|
<Text type={currentValue > threshold ? 'danger' : 'success'}>
|
||||||
|
{currentValue > threshold ? '超过阈值' : '正常范围'}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Space>
|
||||||
|
<Text>启用监控:</Text>
|
||||||
|
<Switch checked={monitoringEnabled} onChange={(checked) => setMonitoringEnabled(checked)} />
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Button type="primary" onClick={handleCheck}>
|
||||||
|
检查阈值
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div style={{ background: '#fff', padding: 16, borderRadius: 4, marginTop: 16 }}>
|
||||||
|
<p>
|
||||||
|
事件流触发条件: <code>monitoringEnabled && currentValue > threshold</code>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
当前状态:{' '}
|
||||||
|
{monitoringEnabled && currentValue > threshold ? (
|
||||||
|
<Text type="danger">将触发事件流</Text>
|
||||||
|
) : (
|
||||||
|
<Text type="secondary">不会触发事件流</Text>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConditionalFlowTrigger;
|
||||||
@ -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 (
|
||||||
|
<div style={{ padding: 24, background: '#f0f2f5', borderRadius: 8 }}>
|
||||||
|
<h3>数据传递演示</h3>
|
||||||
|
<p>演示事件流中各步骤之间的数据传递</p>
|
||||||
|
<Button type="primary" onClick={handleClick}>
|
||||||
|
触发数据处理流程
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataPassingEventFlow;
|
||||||
@ -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 (
|
||||||
|
<div style={{ padding: 24, background: '#f0f2f5', borderRadius: 8 }}>
|
||||||
|
<h3>多按钮事件流演示</h3>
|
||||||
|
<p>每个按钮触发不同的事件流</p>
|
||||||
|
|
||||||
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||||
|
<Space>
|
||||||
|
<Button type="primary" onClick={createClickHandler(1)}>
|
||||||
|
按钮1 (通知)
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button type="default" onClick={createClickHandler(2)}>
|
||||||
|
按钮2 (对话框)
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button type="dashed" onClick={createClickHandler(3)}>
|
||||||
|
按钮3 (表单)
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<div style={{ background: '#fff', padding: 16, borderRadius: 4 }}>
|
||||||
|
<p>每个按钮触发各自的事件流，展示不同的UI交互</p>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MultiButtonEventFlow;
|
||||||
@ -26,3 +26,23 @@
|
|||||||
通过EventFlowManager注册事件与多个action，依次执行
|
通过EventFlowManager注册事件与多个action，依次执行
|
||||||
|
|
||||||
<code src="./demos/events/basic-eventflow.tsx"></code>
|
<code src="./demos/events/basic-eventflow.tsx"></code>
|
||||||
|
|
||||||
|
# 条件事件流
|
||||||
|
根据条件决定执行哪些动作的事件流
|
||||||
|
|
||||||
|
<code src="./demos/events/conditional-eventflow.tsx"></code>
|
||||||
|
|
||||||
|
# 条件触发事件流
|
||||||
|
根据事件级别的条件决定是否触发整个事件流
|
||||||
|
|
||||||
|
<code src="./demos/events/conditional-flow-trigger.tsx"></code>
|
||||||
|
|
||||||
|
# 事件流数据传递
|
||||||
|
演示如何在事件流的各个步骤之间传递数据
|
||||||
|
|
||||||
|
<code src="./demos/events/data-passing-eventflow.tsx"></code>
|
||||||
|
|
||||||
|
# 多按钮事件流
|
||||||
|
为不同按钮注册不同的事件流
|
||||||
|
|
||||||
|
<code src="./demos/events/multi-button-eventflow.tsx"></code>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user