2
2
nav :
3
3
path : /copilot
4
4
group :
5
- title : 通用
5
+ title : Copilot
6
6
order : 2
7
7
toc : ' content'
8
8
---
9
9
10
- # Copilot ThoughtChain 思考链
10
+ # ThoughtChain 思考链
11
11
12
- 用于可视化展示AI处理请求 、生成内容或执行任务的进程与状态。这是一个与动画相关的组件,需要提供各节点动画的props和API和使用方进行交互 。
12
+ 用于可视化展示 AI 处理请求 、生成内容或执行任务的进程与状态。这是一个与动画相关的组件,需要提供各节点动画的 props 和 API 和使用方进行交互 。
13
13
14
14
## 引入
15
15
@@ -18,22 +18,24 @@ toc: 'content'
18
18
``` json
19
19
"usingComponents" : {
20
20
#if ALIPAY
21
- "thought-chain" : " antd-mini/es/ThoughtChain/index"
21
+ "ant- thought-chain" : " antd-mini/es/ThoughtChain/index"
22
22
#endif
23
23
#if WECHAT
24
- "thought-chain" : " antd-mini/ThoughtChain/index"
24
+ "ant- thought-chain" : " antd-mini/ThoughtChain/index"
25
25
#endif
26
26
}
27
27
```
28
28
29
29
## 代码示例
30
30
31
31
### 基本使用
32
- 这个示例渲染了一级节点,支持``` loading ``` ``` fail ``` ``` success ``` 三种节点状态
32
+
33
+ 这个示例渲染了一级节点,支持` loading ` ` fail ` ` success ` 三种节点状态
33
34
34
35
``` xml
35
36
<thought-chain list =" {{basicList}}" onContentItemTap =" onContentItemTap" />
36
37
```
38
+
37
39
``` javascript
38
40
Page ({
39
41
data: {
@@ -50,20 +52,21 @@ Page({
50
52
status: ' loading' ,
51
53
title: ' 在互联网上搜索问题' ,
52
54
},
53
- ]
55
+ ],
54
56
},
55
57
onContentItemTap (e ) {
56
58
const { content } = e .target .dataset || {};
57
59
my .alert ({
58
60
content: ` 点击了内容「${ content} 」` ,
59
61
});
60
62
},
61
- })
63
+ });
62
64
```
63
65
64
66
### 二级节点
65
- 节点的内容默认支持3种形态(contentType),文字类型:``` text ``` ,链接类型:``` link ``` ,标签类型:``` tag ``` 。
66
- 一级节点支持配置list,设置子节点(二级节点)。
67
+
68
+ 节点的内容默认支持 3 种形态(contentType),文字类型:` text ` ,链接类型:` link ` ,标签类型:` tag ` 。
69
+ 一级节点支持配置 list,设置子节点(二级节点)。
67
70
68
71
``` javascript
69
72
Page ({
@@ -105,13 +108,14 @@ Page({
105
108
},
106
109
],
107
110
},
108
- ]
109
- }
110
- })
111
+ ],
112
+ },
113
+ });
111
114
```
112
115
113
116
### 自定义节点内容
114
- 支持通过slot自定义节点内容
117
+
118
+ 支持通过 slot 自定义节点内容
115
119
116
120
``` xml
117
121
<thought-chain list =" {{customList}}" onContentItemTap =" onContentItemTap" >
@@ -122,6 +126,7 @@ Page({
122
126
</view >
123
127
</thought-chain >
124
128
```
129
+
125
130
``` javascript
126
131
Page ({
127
132
data: {
@@ -138,8 +143,7 @@ Page({
138
143
list: [
139
144
{
140
145
status: ' success' ,
141
- title:
142
- ' 搜索中' ,
146
+ title: ' 搜索中' ,
143
147
content: ' 子节点中的自定义内容' ,
144
148
contentType: ' customType' ,
145
149
},
@@ -153,7 +157,7 @@ Page({
153
157
content: ` 点击了内容「${ content} 」` ,
154
158
});
155
159
},
156
- })
160
+ });
157
161
```
158
162
159
163
### Demo 代码
@@ -166,22 +170,22 @@ Page({
166
170
167
171
以下表格介绍了 ThoughtChain 组件的 API 属性:
168
172
169
- | 属性 | 说明 | 类型 | 默认值 |
170
- | ------------ | -------- | -------------- | ------ |
171
- | className | 类名 | string | - |
172
- | list | 提示列表 | IThoughtChainItemProps[ ] | - |
173
+ | 属性 | 说明 | 类型 | 默认值 |
174
+ | --------- | -------- | ---------- -------------- | ------ |
175
+ | className | 类名 | string | - |
176
+ | list | 提示列表 | IThoughtChainItemProps[ ] | - |
173
177
174
178
IThoughtChainItemProps 属性
175
- | 属性 | 说明 | 类型 | 默认值 |
179
+ | 属性 | 说明 | 类型 | 默认值 |
176
180
| --------- | ------------ | ------- | ------ |
177
- | status | 节点状态 | ``` loading ``` ``` success ``` ``` fail ``` | - |
178
- | title | 节点标题 | string | - |
179
- | content | 节点内容 | string \| string[ ] |
180
- | contentType | 节点内容类型,默认类型有``` text ``` ``` link ``` ``` tag `` ` | string |
181
- | list | 子节点,仅一级节点支持子节点 | IThoughtChainItemProps[ ] |
181
+ | status | 节点状态 | ` loading ` ` success ` ` fail ` | - |
182
+ | title | 节点标题 | string | - |
183
+ | content | 节点内容 | string \| string[ ] |
184
+ | contentType | 节点内容类型,默认类型有` text ` ` link ` ` tag ` | string |
185
+ | list | 子节点,仅一级节点支持子节点 | IThoughtChainItemProps[ ] |
182
186
183
- 插槽 slot
187
+ 插槽 slot
184
188
185
- | 插槽名称 | 说明 |
186
- | ------------- | -------------- |
187
- | content | 自定义节点内容 | |
189
+ | 插槽名称 | 说明 |
190
+ | -------- | -------------- | --- |
191
+ | content | 自定义节点内容 | |
0 commit comments