Skip to content

Commit 92a52cb

Browse files
author
昔梦
committed
feat：文档新增自定义组件demo
1 parent 8cf69c8 commit 92a52cb

File tree

8 files changed

+508
-7
lines changed

8 files changed

+508
-7
lines changed

‎docs/xflow/basic.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
order: 2
3+
title: '基础交互'
4+
mobile: false
5+
group:
6+
title: 最佳展示
7+
order: 2
8+
---
9+
# 基础交互
10+
11+
<code src="./demo/basic/index.tsx"></code>

‎docs/xflow/custom-flow.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
order: 2
3+
title: '自定义组件'
4+
mobile: false
5+
group:
6+
title: 最佳展示
7+
order: 2
8+
---
9+
# 自定义组件
10+
11+
## 自定义配置组件
12+
13+
使用`settingWidget`自定义业务配置组件
14+
15+
<code src="./demo/custom-flow/index.tsx"></code>

‎docs/xflow/demo/basic/index.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import XFlow from '@xrenders/xflow';
3+
import settings from './setting';
4+
5+
export default () => {
6+
const nodes = [
7+
{
8+
id: '1',
9+
type: 'Start',
10+
data: {},
11+
position: {
12+
x: 40,
13+
y: 240,
14+
}
15+
},
16+
{
17+
id: '2',
18+
type: 'End',
19+
data: {},
20+
position: {
21+
x: 500,
22+
y: 240,
23+
}
24+
}
25+
];
26+
27+
const edges = [
28+
{ source: '1', target: '2', id: '234123' }
29+
]
30+
31+
return (
32+
<div style={{ height: '600px' }}>
33+
<XFlow
34+
initialValues={{ nodes, edges }}
35+
settings={settings}
36+
nodeSelector={{
37+
showSearch: true,
38+
}}
39+
/>
40+
</div>
41+
);
42+
}

‎docs/xflow/demo/basic/setting.tsx‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
export default [
2+
{
3+
title: '开始',
4+
type: 'Start',
5+
hidden: true,
6+
targetHandleHidden: true,
7+
icon: {
8+
type: 'icon-start',
9+
bgColor: '#17B26A',
10+
},
11+
schema: {
12+
type: 'object',
13+
properties: {
14+
input: {
15+
title: '变量一',
16+
type: 'string',
17+
widget: 'input',
18+
},
19+
select: {
20+
title: '变量二',
21+
type: 'string',
22+
widget: 'select',
23+
props: {
24+
options: [
25+
{ label: 'a', value: 'a' },
26+
{ label: 'b', value: 'b' },
27+
{ label: 'c', value: 'c' },
28+
],
29+
},
30+
},
31+
radio1: {
32+
title: '点击单选',
33+
type: 'string',
34+
widget: 'radio',
35+
props: {
36+
options: [
37+
{ label: '早', value: 'a' },
38+
{ label: '中', value: 'b' },
39+
{ label: '晚', value: 'c' }
40+
]
41+
}
42+
},
43+
textarea1: {
44+
title: '长文本',
45+
type: 'string',
46+
widget: 'textArea'
47+
},
48+
date1: {
49+
title: '日期选择',
50+
type: 'string',
51+
widget: 'datePicker'
52+
},
53+
dateRange1: {
54+
title: '日期范围',
55+
type: 'range',
56+
widget: 'dateRange'
57+
},
58+
time1: {
59+
title: '时间选择',
60+
type: 'string',
61+
widget: 'timePicker'
62+
},
63+
timeRange1: {
64+
title: '时间范围',
65+
type: 'range',
66+
widget: 'timeRange'
67+
},
68+
},
69+
},
70+
},
71+
{
72+
title: '结束',
73+
type: 'End',
74+
hidden: true,
75+
sourceHandleHidden: true,
76+
icon: {
77+
type: 'icon-end',
78+
bgColor: '#F79009',
79+
},
80+
schema: {
81+
type: "object",
82+
properties: {
83+
input: {
84+
title: '变量一',
85+
type: 'string',
86+
widget: 'input',
87+
},
88+
select: {
89+
title: '变量二',
90+
type: 'string',
91+
widget: 'select',
92+
props: {
93+
options: [
94+
{ label: 'a', value: 'a' },
95+
{ label: 'b', value: 'b' },
96+
{ label: 'c', value: 'c' },
97+
],
98+
},
99+
},
100+
}
101+
}
102+
},
103+
{
104+
title: 'LLM',
105+
type: 'LLM',
106+
description: '调用大语言模型回答问题或者对自然语言进行处理',
107+
icon: {
108+
type: 'icon-model',
109+
bgColor: '#6172F3',
110+
},
111+
},
112+
{
113+
title: 'Prompt',
114+
type: 'Prompt',
115+
description: '通过精心设计提示词，提升大语言模型回答效果',
116+
icon: {
117+
type: 'icon-prompt',
118+
bgColor: '#17B26A',
119+
},
120+
},
121+
{
122+
title: '知识库',
123+
type: 'knowledge',
124+
description: '允许你从知识库中查询与用户问题相关的文本内容',
125+
icon: {
126+
type: 'icon-knowledge',
127+
bgColor: '#6172F3',
128+
},
129+
},
130+
{
131+
title: 'Switch',
132+
type: 'Switch',
133+
description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
134+
icon: {
135+
type: 'icon-switch',
136+
bgColor: '#06AED4',
137+
},
138+
},
139+
{
140+
title: 'HSF',
141+
type: 'hsf',
142+
description: '允许通过 HSF 协议发送服务器请求',
143+
icon: {
144+
type: 'icon-hsf',
145+
bgColor: '#875BF7',
146+
},
147+
},
148+
{
149+
title: 'Http',
150+
type: 'http',
151+
description: '允许通过 HTTP 协议发送服务器请求',
152+
icon: {
153+
type: 'icon-http',
154+
bgColor: '#875BF7',
155+
},
156+
},
157+
{
158+
title: '代码执行',
159+
type: 'Code',
160+
description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
161+
icon: {
162+
type: 'icon-code',
163+
bgColor: '#2E90FA',
164+
},
165+
},
166+
{
167+
title: '工具',
168+
type: 'tool',
169+
description: '允许使用工具能力',
170+
icon: {
171+
type: 'icon-gongju',
172+
bgColor: '#2E90FA',
173+
},
174+
},
175+
{
176+
title: '工具',
177+
type: '_group',
178+
items: [
179+
{
180+
title: '代码执行',
181+
type: 'Code',
182+
description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
183+
icon: {
184+
type: 'icon-code',
185+
bgColor: '#2E90FA',
186+
},
187+
},
188+
{
189+
title: '工具',
190+
type: 'tool',
191+
description: '允许使用工具能力',
192+
icon: {
193+
type: 'icon-gongju',
194+
bgColor: '#2E90FA',
195+
},
196+
},
197+
],
198+
},
199+
];

‎docs/xflow/demo/custom-flow/customWidget.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Input } from 'antd';
2+
3+
const customWidget = ({ value, onChange }) => {
4+
5+
return (
6+
<Input
7+
value={value?.inputVal}
8+
onChange={e => onChange({ inputVal: e.target.value })}
9+
/>
10+
);
11+
};
12+
13+
export default customWidget;

‎docs/xflow/demo/custom-flow/index.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import XFlow from '@xrenders/xflow';
3+
import settings from './setting';
4+
import customWidget from './customWidget';
5+
6+
export default () => {
7+
const nodes = [
8+
{
9+
id: '1',
10+
type: 'Start',
11+
data: {
12+
inputVal:'我是自定义组件'
13+
},
14+
position: {
15+
x: 40,
16+
y: 240,
17+
}
18+
},
19+
{
20+
id: '2',
21+
type: 'End',
22+
data: {},
23+
position: {
24+
x: 500,
25+
y: 240,
26+
}
27+
}
28+
];
29+
30+
const edges = [
31+
{ source: '1', target: '2', id: '234123' }
32+
]
33+
34+
return (
35+
<div style={{ height: '600px' }}>
36+
<XFlow
37+
initialValues={{ nodes, edges }}
38+
settings={settings}
39+
nodeSelector={{
40+
showSearch: true,
41+
}}
42+
widgets={{ customWidget }}
43+
/>
44+
</div>
45+
);
46+
}

0 commit comments

Comments
 (0)