File tree 2 files changed +121
-0
lines changed
2 files changed +121
-0
lines changed Original file line number Diff line number Diff line change
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
+ } ;
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments