Skip to content

Commit 4d3e944

Browse files
author
昔梦
committed
fix:1.API 文档隐藏hidedesc 2.schema配置名称改为settingSchema
1 parent 92a52cb commit 4d3e944

File tree

8 files changed

+221
-17
lines changed

8 files changed

+221
-17
lines changed

‎docs/xflow/api.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ title: API
1313
| ------------- | ------------------------------------ | --------------------------------------------------------- | ------ |
1414
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any}` | - | - |
1515
| layout | 节点布局的方向 | `LR \| TB` | - | - |
16-
| widges | 自定义组件 | `Record<string, ReactNode>` | - | - |
16+
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
1717
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem))[] | |
1818
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` | |
1919

@@ -34,13 +34,12 @@ title: API
3434
| 属性 | 描述 | 类型 | 默认值 |
3535
| ------------------ | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
3636
| title | 节点名称 | `string` | |
37-
| type | 节点类型,内置节点: `Start\|End` | `string` | |
37+
| type | 节点类型 | `string` | |
3838
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
3939
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
4040
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
41-
| hideDesc | 是否隐藏节点下方的描述信息 | `boolean` | false |
42-
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
43-
| schema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema) | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
41+
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
42+
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema) | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
4443
| settingWidget | 自定义节点的业务配置组件 | `string` | |
4544

4645
## TNodeSelector

‎docs/xflow/custom-flow.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,61 @@ group:
1313
使用`settingWidget`自定义业务配置组件
1414

1515
<code src="./demo/custom-flow/index.tsx"></code>
16+
17+
18+
## 在schema中自定义组件
19+
20+
```jsx
21+
import { Input } from 'antd';
22+
import React from 'react';
23+
import XFlow from '@xrenders/xflow';
24+
import settings from './schema/custom-settings.ts';
25+
26+
27+
const customWidget=({value,onChange})=>{
28+
return <Input value={value} onChange={onChange}/>
29+
}
30+
export default () => {
31+
const nodes = [
32+
{
33+
id: '1',
34+
type: 'Start',
35+
data: {
36+
inputVal:'我是自定义组件'
37+
},
38+
position: {
39+
x: 40,
40+
y: 240,
41+
}
42+
},
43+
{
44+
id: '2',
45+
type: 'End',
46+
data: {},
47+
position: {
48+
x: 500,
49+
y: 240,
50+
}
51+
}
52+
];
53+
54+
const edges = [
55+
{ source: '1', target: '2', id: '234123' }
56+
]
57+
58+
return (
59+
<div style={{ height: '600px' }}>
60+
<XFlow
61+
initialValues={{ nodes, edges }}
62+
settings={settings}
63+
nodeSelector={{
64+
showSearch: true,
65+
}}
66+
widgets={{ customWidget }}
67+
/>
68+
</div>
69+
);
70+
}
71+
72+
73+
```

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default [
88
type: 'icon-start',
99
bgColor: '#17B26A',
1010
},
11-
schema: {
11+
settingSchema: {
1212
type: 'object',
1313
properties: {
1414
input: {
@@ -77,7 +77,7 @@ export default [
7777
type: 'icon-end',
7878
bgColor: '#F79009',
7979
},
80-
schema: {
80+
settingSchema: {
8181
type: "object",
8282
properties: {
8383
input: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default [
1919
type: 'icon-end',
2020
bgColor: '#F79009',
2121
},
22-
schema: {
22+
settingSchema: {
2323
type: "object",
2424
properties: {
2525
input: {

‎docs/xflow/schema/custom-settings.ts‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
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+
settingSchema: {
12+
type: 'object',
13+
properties: {
14+
input: {
15+
title: '变量一',
16+
type: 'string',
17+
widget: 'customWidget',
18+
},
19+
}
20+
},
21+
},
22+
{
23+
title: '结束',
24+
type: 'End',
25+
hidden: true,
26+
sourceHandleHidden: true,
27+
icon: {
28+
type: 'icon-end',
29+
bgColor: '#F79009',
30+
},
31+
settingSchema: {
32+
type: "object",
33+
properties: {
34+
input: {
35+
title: '变量一',
36+
type: 'string',
37+
widget: 'input',
38+
},
39+
select: {
40+
title: '变量二',
41+
type: 'string',
42+
widget: 'select',
43+
props: {
44+
options: [
45+
{ label: 'a', value: 'a' },
46+
{ label: 'b', value: 'b' },
47+
{ label: 'c', value: 'c' },
48+
],
49+
},
50+
},
51+
}
52+
}
53+
},
54+
{
55+
title: 'LLM',
56+
type: 'LLM',
57+
description: '调用大语言模型回答问题或者对自然语言进行处理',
58+
icon: {
59+
type: 'icon-model',
60+
bgColor: '#6172F3',
61+
},
62+
},
63+
{
64+
title: 'Prompt',
65+
type: 'Prompt',
66+
description: '通过精心设计提示词，提升大语言模型回答效果',
67+
icon: {
68+
type: 'icon-prompt',
69+
bgColor: '#17B26A',
70+
},
71+
},
72+
{
73+
title: '知识库',
74+
type: 'knowledge',
75+
description: '允许你从知识库中查询与用户问题相关的文本内容',
76+
icon: {
77+
type: 'icon-knowledge',
78+
bgColor: '#6172F3',
79+
},
80+
},
81+
{
82+
title: 'Switch',
83+
type: 'Switch',
84+
description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
85+
icon: {
86+
type: 'icon-switch',
87+
bgColor: '#06AED4',
88+
},
89+
},
90+
{
91+
title: 'HSF',
92+
type: 'hsf',
93+
description: '允许通过 HSF 协议发送服务器请求',
94+
icon: {
95+
type: 'icon-hsf',
96+
bgColor: '#875BF7',
97+
},
98+
},
99+
{
100+
title: 'Http',
101+
type: 'http',
102+
description: '允许通过 HTTP 协议发送服务器请求',
103+
icon: {
104+
type: 'icon-http',
105+
bgColor: '#875BF7',
106+
},
107+
},
108+
{
109+
title: '代码执行',
110+
type: 'Code',
111+
description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
112+
icon: {
113+
type: 'icon-code',
114+
bgColor: '#2E90FA',
115+
},
116+
},
117+
{
118+
title: '工具',
119+
type: 'tool',
120+
description: '允许使用工具能力',
121+
icon: {
122+
type: 'icon-gongju',
123+
bgColor: '#2E90FA',
124+
},
125+
},
126+
{
127+
title: '工具',
128+
type: '_group',
129+
items: [
130+
{
131+
title: '代码执行',
132+
type: 'Code',
133+
description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
134+
icon: {
135+
type: 'icon-code',
136+
bgColor: '#2E90FA',
137+
},
138+
},
139+
{
140+
title: '工具',
141+
type: 'tool',
142+
description: '允许使用工具能力',
143+
icon: {
144+
type: 'icon-gongju',
145+
bgColor: '#2E90FA',
146+
},
147+
},
148+
],
149+
},
150+
];

‎docs/xflow/schema/settings.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default [
88
type: 'icon-start',
99
bgColor: '#17B26A',
1010
},
11-
schema: {
11+
settingSchema: {
1212
type: 'object',
1313
properties: {
1414
input: {
@@ -77,7 +77,7 @@ export default [
7777
type: 'icon-end',
7878
bgColor: '#F79009',
7979
},
80-
schema: {
80+
settingSchema: {
8181
type: "object",
8282
properties: {
8383
input: {

‎packages/x-flow/src/components/NodeEditor/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,14 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
2929
);
3030

3131
useEffect(() => {
32-
if (nodeSetting?.schema) {
32+
if (nodeSetting?.settingSchema) {
3333
form.resetFields();
3434
form.setValues(data || {});
3535
} else if (nodeSetting?.settingWidget) {
3636
setCustomVal(data);
3737
} else {
3838
}
3939

40-
console.log('data', data);
4140
}, [JSON.stringify(data), id]);
4241

4342
const handleNodeValueChange = debounce((data: any) => {
@@ -64,19 +63,17 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
6463
<NodeWidget
6564
value={customVal}
6665
onChange={values => {
67-
console.log('onChange000', values);
6866
setCustomVal(values);
6967
// onChange({ id, values: { ...values } });
7068
handleNodeValueChange({ ...values });
7169
}}
7270
/>
7371
);
74-
} else if (nodeSetting?.schema) {
72+
} else if (nodeSetting?.settingSchema) {
7573
return (
7674
<FormRender
77-
schema={nodeSetting?.schema}
75+
schema={nodeSetting?.settingSchema}
7876
form={form}
79-
// readOnly={readonly}
8077
widgets={widgets}
8178
watch={watch}
8279
size={'small'}

‎packages/x-flow/src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface TNodeItem {
99
type: string;
1010
bgColor: string;
1111
};
12-
schema?: Schema; // 节点的配置schema（弹窗） string为自定义组件
12+
settingSchema?: Schema; // 节点的配置schema（弹窗） string为自定义组件
1313
settingWidget?: string; // 自定义组件
1414
hideDesc?: boolean;// 隐藏业务描述
1515
}

0 commit comments

Comments
 (0)