Skip to content

Commit 59c6191

Browse files
author
dennis.zpf
committed
feat: welcome组件
1 parent 3fe9bfc commit 59c6191

16 files changed

+573
-0
lines changed

‎copilot-demo/pages/Welcome/index.axml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<view class="navigation-bar" />
2+
3+
<ant-container title="基础用法">
4+
<ant-welcome title="👋🏻 你好，我是 Ant Design X" description="基于 Ant Design 的 AGI 产品界面解决方案，创造更美好的智能视界～" />
5+
</ant-container>

‎copilot-demo/pages/Welcome/index.json5

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
/// #if WECHAT
3+
"navigationBarTitleText": "Welcome 组件",
4+
/// #endif
5+
6+
/// #if ALIPAY
7+
"defaultTitle": "Welcome 组件",
8+
/// #endif
9+
10+
"usingComponents": {
11+
"ant-container": "../../../src/Container/index",
12+
"ant-welcome": "../../../src/Welcome/index"
13+
},
14+
"transparentTitle": "always"
15+
}

‎copilot-demo/pages/Welcome/index.less

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
page {
2+
// background: #f5f5f5;
3+
padding: 12rpx;
4+
.secondLevel {
5+
padding: 24rpx;
6+
background-color: #f5f5f5;
7+
border-radius: 24rpx;
8+
margin-left: -58rpx;
9+
}
10+
.second-thoughtchain {
11+
.ant-copilot-thoughtchain-node-title {
12+
color: #000;
13+
}
14+
.second-thoughtchain-content {
15+
color: #999;
16+
}
17+
}
18+
}

‎copilot-demo/pages/Welcome/index.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
//@ts-ignore
2+
3+
Page({
4+
data: {
5+
basicList: [
6+
{
7+
title: '理解问题',
8+
content: '3A游戏',
9+
icon: 'CheckCircleOutline'
10+
},
11+
{
12+
title: '没有在本地找到结果',
13+
content: '当前主流显卡',
14+
icon: 'CheckCircleOutline'
15+
},
16+
{
17+
title: '在互联网上搜索问题',
18+
content: '黑神话悟空所需显卡',
19+
icon: 'MoreOutline',
20+
},
21+
],
22+
customList: [
23+
{
24+
title: '理解问题',
25+
content: '解析语法结构',
26+
},
27+
{
28+
status: 'loading',
29+
title: '搜索问题',
30+
content: [
31+
{
32+
title: '理解问题',
33+
},
34+
{
35+
title: '联网搜索',
36+
content: '1. 黑神话悟空介绍',
37+
},
38+
{
39+
title: '已根据搜索结果精选3篇资料',
40+
content: [
41+
'1. 黑神话悟空介绍',
42+
'2. 对于1080p显示器，4060ti和4060该选哪个？',
43+
'3. 黑神话悟空官方建议配置',
44+
],
45+
},
46+
{
47+
title: '联想更多结果',
48+
},
49+
],
50+
},
51+
],
52+
},
53+
onContentItemTap(e) {
54+
const { content } = e.target.dataset || {};
55+
my.alert({
56+
content: `点击了内容「${content}」`,
57+
});
58+
},
59+
});

‎copilot/Welcome/index.axml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<view class="ant-copilot-welcome {{ className }}">
2+
<view class="ant-copilot-welcome-title">{{title}}</view>
3+
<view class="ant-copilot-welcome-content" onTap="onContentTap">{{description}}</view>
4+
</view>

‎copilot/Welcome/index.en.md

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
---
2+
nav:
3+
path: /copilot
4+
group:
5+
title: Confirm
6+
order: 4
7+
toc: 'content'
8+
---
9+
10+
# Copilot ThoughtChain thinking chain
11+
12+
Use to visualize the process and status of AI processing requests, generating content, or executing tasks. This is an animation-related component that needs to provide props and API for each node animation to interact with users.
13+
14+
## Introduction
15+
16+
In `index.json` Introducing Components in
17+
18+
```json
19+
"usingComponents": {
20+
#if ALIPAY
21+
"ant-thought-chain": "antd-mini/es/ThoughtChain/index"
22+
#endif
23+
#if WECHAT
24+
"ant-thought-chain": "antd-mini/ThoughtChain/index"
25+
#endif
26+
}
27+
```
28+
29+
## Code Sample
30+
31+
### Basic use
32+
This example renders multiple nodes
33+
34+
```xml
35+
<ant-thought-chain items="{{basicList}}" onContentItemTap="onContentItemTap" collapsible="{{true}}">
36+
</ant-thought-chain>
37+
```
38+
```javascript
39+
Page({
40+
data: {
41+
basicList: [
42+
{
43+
title: '理解问题',
44+
content: '3A游戏',
45+
icon: 'CheckCircleOutline'
46+
},
47+
{
48+
title: '没有In本地找到结果',
49+
content: '当前主流显卡',
50+
icon: 'CheckCircleOutline'
51+
},
52+
{
53+
title: 'In互联网上搜索问题',
54+
content: '黑神话悟空所需显卡',
55+
icon: 'MoreOutline',
56+
},
57+
]
58+
},
59+
onContentItemTap(e) {
60+
const { content } = e.currentTarget.dataset || {};
61+
my.alert({
62+
content: `点击了内容「${content}」`,
63+
});
64+
},
65+
})
66+
```
67+
68+
### Custom Content
69+
content slot supports custom node content. Only Alipay supports custom content, WeChat does not support custom content.
70+
```xml
71+
<ant-thought-chain items="{{basicList}}" onContentItemTap="onContentItemTap" collapsible="{{false}}">
72+
<view slot="content" slot-scope="module" style="color: red">
73+
{{module.content}}
74+
</view>
75+
</ant-thought-chain>
76+
```
77+
78+
### secondary node
79+
You can customize node content through slots and render secondary nodes through nested thought-chain components. Only Alipay supports custom content, WeChat does not support custom content.
80+
81+
```xml
82+
<ant-thought-chain items="{{customList}}" onContentItemTap="onContentItemTap" collapsible="{{true}}">
83+
<view slot="content" slot-scope="module">
84+
<view a:if="{{typeof(module.content) === 'object'}}" class="secondLevel">
85+
<ant-thought-chain
86+
className="second-thoughtchain"
87+
items="{{module.content}}"
88+
collapsible="{{false}}"
89+
>
90+
<view slot="content" slot-scope="secondModule" a:if="{{typeof(secondModule.content) === 'object'}}">
91+
<view class="second-thoughtchain-content" a:for="{{secondModule.content}}">
92+
{{item}}
93+
</view>
94+
</view>
95+
<view a:else class="second-thoughtchain-content">
96+
{{secondModule.content}}
97+
</view>
98+
</ant-thought-chain>
99+
</view>
100+
<view a:else>{{module.content}}</view>
101+
</view>
102+
</ant-thought-chain>
103+
```
104+
```javascript
105+
Page({
106+
data: {
107+
customList: [
108+
{
109+
title: '理解问题',
110+
content: '解析语法结构',
111+
},
112+
{
113+
status: 'loading',
114+
title: '搜索问题',
115+
content: [
116+
{
117+
title: '理解问题',
118+
},
119+
{
120+
title: '联网搜索',
121+
content: '1. 黑神话悟空介绍',
122+
},
123+
{
124+
title: '已根据搜索结果精选3篇资料',
125+
content: [
126+
'1. 黑神话悟空介绍',
127+
'2. 对于1080p显示器，4060ti和4060该选哪个？',
128+
'3. 黑神话悟空官方建议配置',
129+
],
130+
},
131+
{
132+
title: '联想更多结果',
133+
},
134+
],
135+
},
136+
]
137+
},
138+
onContentItemTap(e) {
139+
const { content } = e.target.dataset || {};
140+
my.alert({
141+
content: `点击了内容「${content}」`,
142+
});
143+
},
144+
})
145+
```
146+
147+
### Demo Code
148+
149+
<code src='../../copilot-demo/pages/ThoughtChain/index'></code>
150+
151+
## API
152+
153+
### ThoughtChain
154+
155+
The following table describes the API properties for ThoughtChain components:
156+
157+
| Property | Description | Type | Default Value |
158+
| --------- | -------- | ------------------------ | ------ |
159+
| className | Class Name | string | - |
160+
| items | Node List | IThoughtChainItemProps[] | [] |
161+
| collapsible | Whether to support | boolean\|ICollapsibleOptions | true |
162+
| style | Custom Style | string | - |
163+
164+
165+
IThoughtChainItemProps Properties
166+
| Property | Description | Type | Default Value |
167+
| ----------- | ------------------------------------------------------- | -------------------------------------- | ------ |
168+
| icon | The icon before the title can use the type in ant-icon or pass in https picture link. | string | CheckCircleOutline |
169+
| title | Node Title | string | - |
170+
| content | Node Content | string | - |
171+
172+
173+
Slot
174+
175+
| Slot Name | Description |
176+
| -------- | -------------- |
177+
| content | Custom Node Content | |
178+
179+
ICollapsibleOptions Properties
180+
| Property | Description | Type | Default Value |
181+
| ----------- | ------------------------------------------------------- | -------------------------------------- | ------ |
182+
| expandedKeys | expanded node key list | string[] | [] |
183+

‎copilot/Welcome/index.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"component": true,
3+
"usingComponents": {
4+
"ant-icon": "../../src/Icon/index"
5+
}
6+
}

‎copilot/Welcome/index.less

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import (reference) './variable.less';
2+
3+
@buttonPrefix: ant-copilot-welcome;
4+
5+
.@{buttonPrefix} {
6+
background-color: @welcome-background-color;
7+
border-radius: 24rpx;
8+
padding: 24rpx;
9+
box-sizing: border-box;
10+
11+
&-title {
12+
font-size: 40rpx;
13+
color: @welcome-text-color;
14+
font-weight: 600;
15+
margin-bottom: 24rpx;
16+
}
17+
&-content {
18+
font-size: 32rpx;
19+
color: @welcome-text-color;
20+
line-height: 48rpx;
21+
}
22+
}

0 commit comments

Comments
 (0)