Skip to content

Commit ef01d1a

Browse files
author
昔梦
committed
feat:增加单调调试文档和案列
1 parent 2da3ced commit ef01d1a

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

Diff for: docs/xflow/demo/log/runNode/index.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import XFlow from '@xrenders/xflow';
2+
import { message } from 'antd';
3+
import { useState } from 'react';
4+
5+
export default () => {
6+
const [loading, setLoading] = useState<boolean>(false);
7+
8+
const nodes = [
9+
{
10+
id: 'node1',
11+
type: 'LLM',
12+
position: {
13+
x: 300,
14+
y: 200,
15+
},
16+
},
17+
];
18+
19+
const settings = [
20+
{
21+
title: 'LLM',
22+
type: 'LLM',
23+
description: '调用大语言模型回答问题或者对自然语言进行处理',
24+
showTestingBtn: true,
25+
icon: {
26+
type: 'icon-model',
27+
bgColor: '#6172F3',
28+
},
29+
settingSchema: {
30+
type: 'object',
31+
properties: {
32+
input: {
33+
title: '变量一',
34+
type: 'string',
35+
widget: 'input',
36+
},
37+
},
38+
},
39+
},
40+
];
41+
42+
return (
43+
<div style={{ height: '400px' }}>
44+
<XFlow
45+
initialValues={{ nodes, edges: [] }}
46+
settings={settings}
47+
onTesting={(node, nodes) => {
48+
setLoading(true);
49+
// 模拟调试过程
50+
setTimeout(() => {
51+
message.success('节点调试完成');
52+
setLoading(false);
53+
}, 1000);
54+
console.log('单点调试', node, nodes);
55+
}}
56+
/>
57+
</div>
58+
);
59+
};

Diff for: docs/xflow/singlePointDebug.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
order: 8
3+
title: '单点调试'
4+
mobile: false
5+
group:
6+
title: 高级用法
7+
order: 2
8+
---
9+
10+
# 单点调试
11+
12+
XFlow 支持对单个节点进行调试。通过配置 `showTestingBtn` 展示单调调试按钮,调试按钮默认显示在节点的右上角,点击按钮可以实现节点的单点调试功能。
13+
14+
## 基础用法
15+
16+
### 1. 开启调试按钮
17+
18+
在节点配置中设置 `showTestingBtn: true` 即可显示默认的调试按钮:
19+
20+
```js
21+
const settings = [
22+
{
23+
title: 'LLM',
24+
type: 'LLM',
25+
description: '调用大语言模型回答问题或者对自然语言进行处理',
26+
showTestingBtn: true,
27+
icon: {
28+
type: 'icon-model',
29+
bgColor: '#6172F3',
30+
},
31+
settingSchema: {
32+
type: 'object',
33+
properties: {
34+
input: {
35+
title: '变量一',
36+
type: 'string',
37+
widget: 'input',
38+
},
39+
},
40+
},
41+
},
42+
];
43+
```
44+
45+
### 2. 处理调试事件
46+
47+
通过 `onTesting` 回调函数处理节点的调试逻辑:
48+
49+
```js
50+
<XFlow
51+
onTesting={(node, nodes) => {
52+
// node: 当前调试的节点
53+
// nodes: 所有节点数据
54+
console.log("单点调试", node, nodes);
55+
}}
56+
/>
57+
```
58+
## 示例
59+
60+
下面的示例展示了如何使用单点调试功能:
61+
62+
<code src="./demo/log/runNode/index.tsx"></code>

0 commit comments

Comments
 (0)