feat: welcome组件

ant-design · Jan 24, 2025 · 59c6191 · 59c6191
1 parent 3fe9bfc
commit 59c6191
Show file tree

Hide file tree

Showing 16 changed files with 573 additions and 0 deletions.
diff --git a/copilot-demo/pages/Welcome/index.axml b/copilot-demo/pages/Welcome/index.axml
@@ -0,0 +1,5 @@
+<view class="navigation-bar" />
+
+<ant-container title="基础用法">
+  <ant-welcome title="👋🏻 你好，我是 Ant Design X" description="基于 Ant Design 的 AGI 产品界面解决方案，创造更美好的智能视界～" />
+</ant-container>
diff --git a/copilot-demo/pages/Welcome/index.json5 b/copilot-demo/pages/Welcome/index.json5
@@ -0,0 +1,15 @@
+{
+  /// #if WECHAT
+  "navigationBarTitleText": "Welcome 组件",
+  /// #endif
+
+  /// #if ALIPAY
+  "defaultTitle": "Welcome 组件",
+  /// #endif
+
+  "usingComponents": {
+    "ant-container": "../../../src/Container/index",
+    "ant-welcome": "../../../src/Welcome/index"
+  },
+  "transparentTitle": "always"
+}
diff --git a/copilot-demo/pages/Welcome/index.less b/copilot-demo/pages/Welcome/index.less
@@ -0,0 +1,18 @@
+page {
+  // background: #f5f5f5;
+  padding: 12rpx;
+  .secondLevel {
+    padding: 24rpx;
+    background-color: #f5f5f5;
+    border-radius: 24rpx;
+    margin-left: -58rpx;
+  }
+  .second-thoughtchain {
+    .ant-copilot-thoughtchain-node-title {
+      color: #000;
+    }
+    .second-thoughtchain-content {
+      color: #999;
+    }
+  }
+}
diff --git a/copilot-demo/pages/Welcome/index.ts b/copilot-demo/pages/Welcome/index.ts
@@ -0,0 +1,59 @@
+//@ts-ignore
+
+Page({
+  data: {
+    basicList: [
+      {
+        title: '理解问题',
+        content: '3A游戏',
+        icon: 'CheckCircleOutline'
+      },
+      {
+        title: '没有在本地找到结果',
+        content: '当前主流显卡',
+        icon: 'CheckCircleOutline'
+      },
+      {
+        title: '在互联网上搜索问题',
+        content: '黑神话悟空所需显卡',
+        icon: 'MoreOutline',
+      },
+    ],
+    customList: [
+      {
+        title: '理解问题',
+        content: '解析语法结构',
+      },
+      {
+        status: 'loading',
+        title: '搜索问题',
+        content: [
+          {
+            title: '理解问题',
+          },
+          {
+            title: '联网搜索',
+            content: '1. 黑神话悟空介绍',
+          },
+          {
+            title: '已根据搜索结果精选3篇资料',
+            content: [
+              '1. 黑神话悟空介绍',
+              '2. 对于1080p显示器，4060ti和4060该选哪个？',
+              '3. 黑神话悟空官方建议配置',
+            ],
+          },
+          {
+            title: '联想更多结果',
+          },
+        ],
+      },
+    ],
+  },
+  onContentItemTap(e) {
+    const { content } = e.target.dataset || {};
+    my.alert({
+      content: `点击了内容「${content}」`,
+    });
+  },
+});
diff --git a/copilot/Welcome/index.axml b/copilot/Welcome/index.axml
@@ -0,0 +1,4 @@
+<view class="ant-copilot-welcome {{ className }}">
+  <view class="ant-copilot-welcome-title">{{title}}</view>
+  <view class="ant-copilot-welcome-content" onTap="onContentTap">{{description}}</view>
+</view>
diff --git a/copilot/Welcome/index.en.md b/copilot/Welcome/index.en.md
@@ -0,0 +1,183 @@
+---
+nav:
+  path: /copilot
+group:
+  title: Confirm
+  order: 4
+toc: 'content'
+---
+
+# Copilot ThoughtChain thinking chain
+
+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.
+
+## Introduction
+
+In `index.json` Introducing Components in
+
+```json
+"usingComponents": {
+#if ALIPAY
+  "ant-thought-chain": "antd-mini/es/ThoughtChain/index"
+#endif
+#if WECHAT
+  "ant-thought-chain": "antd-mini/ThoughtChain/index"
+#endif
+}
+```
+
+## Code Sample
+
+### Basic use
+This example renders multiple nodes
+
+```xml
+  <ant-thought-chain items="{{basicList}}" onContentItemTap="onContentItemTap" collapsible="{{true}}">
+  </ant-thought-chain>
+```
+```javascript
+Page({
+  data: {
+    basicList: [
+      {
+        title: '理解问题',
+        content: '3A游戏',
+        icon: 'CheckCircleOutline'
+      },
+      {
+        title: '没有In本地找到结果',
+        content: '当前主流显卡',
+        icon: 'CheckCircleOutline'
+      },
+      {
+        title: 'In互联网上搜索问题',
+        content: '黑神话悟空所需显卡',
+        icon: 'MoreOutline',
+      },
+    ]
+  },
+  onContentItemTap(e) {
+    const { content } = e.currentTarget.dataset || {};
+    my.alert({
+      content: `点击了内容「${content}」`,
+    });
+  },
+})
+```
+
+### Custom Content
+content slot supports custom node content. Only Alipay supports custom content, WeChat does not support custom content.
+```xml
+ <ant-thought-chain items="{{basicList}}" onContentItemTap="onContentItemTap" collapsible="{{false}}">
+    <view slot="content" slot-scope="module" style="color: red">
+      {{module.content}}
+    </view>
+  </ant-thought-chain>
+```
+
+### secondary node
+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.
+
+```xml
+ <ant-thought-chain items="{{customList}}" onContentItemTap="onContentItemTap" collapsible="{{true}}">
+    <view slot="content" slot-scope="module">
+      <view a:if="{{typeof(module.content) === 'object'}}" class="secondLevel">
+        <ant-thought-chain
+          className="second-thoughtchain"
+          items="{{module.content}}"
+          collapsible="{{false}}"
+        >
+          <view slot="content" slot-scope="secondModule" a:if="{{typeof(secondModule.content) === 'object'}}">
+            <view class="second-thoughtchain-content" a:for="{{secondModule.content}}">
+              {{item}}
+            </view>
+          </view>
+          <view a:else class="second-thoughtchain-content">
+            {{secondModule.content}}
+          </view>
+        </ant-thought-chain>
+      </view>
+      <view a:else>{{module.content}}</view>
+    </view>
+  </ant-thought-chain>
+```
+```javascript
+Page({
+  data: {
+    customList: [
+      {
+        title: '理解问题',
+        content: '解析语法结构',
+      },
+      {
+        status: 'loading',
+        title: '搜索问题',
+        content: [
+          {
+            title: '理解问题',
+          },
+          {
+            title: '联网搜索',
+            content: '1. 黑神话悟空介绍',
+          },
+          {
+            title: '已根据搜索结果精选3篇资料',
+            content: [
+              '1. 黑神话悟空介绍',
+              '2. 对于1080p显示器，4060ti和4060该选哪个？',
+              '3. 黑神话悟空官方建议配置',
+            ],
+          },
+          {
+            title: '联想更多结果',
+          },
+        ],
+      },
+    ]
+  },
+  onContentItemTap(e) {
+    const { content } = e.target.dataset || {};
+    my.alert({
+      content: `点击了内容「${content}」`,
+    });
+  },
+})
+```
+
+### Demo Code
+
+<code src='../../copilot-demo/pages/ThoughtChain/index'></code>
+
+## API
+
+### ThoughtChain
+
+The following table describes the API properties for ThoughtChain components:
+
+| Property      | Description     | Type                     | Default Value |
+| --------- | -------- | ------------------------ | ------ |
+| className | Class Name     | string                   | -      |
+| items      | Node List | IThoughtChainItemProps[] | []      |
+| collapsible      | Whether to support | boolean\|ICollapsibleOptions | true      |
+| style      | Custom Style | string | -      |
+
+
+IThoughtChainItemProps Properties
+| Property        | Description                                                    | Type                                   | Default Value |
+| ----------- | ------------------------------------------------------- | -------------------------------------- | ------ |
+| icon      | The icon before the title can use the type in ant-icon or pass in https picture link.                                                | string | CheckCircleOutline     |
+| title       | Node Title                                                | string                                 | -      |
+| content     | Node Content                                                | string                    | - |
+
+
+Slot 
+
+| Slot Name | Description           |
+| -------- | -------------- |
+| content  | Custom Node Content |  |
+
+ICollapsibleOptions Properties
+| Property        | Description                                                    | Type                                   | Default Value |
+| ----------- | ------------------------------------------------------- | -------------------------------------- | ------ |
+| expandedKeys      | expanded node key list | string[] | []      |
+
diff --git a/copilot/Welcome/index.json b/copilot/Welcome/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ant-icon": "../../src/Icon/index"
+  }
+}
diff --git a/copilot/Welcome/index.less b/copilot/Welcome/index.less
@@ -0,0 +1,22 @@
+@import (reference) './variable.less';
+
+@buttonPrefix: ant-copilot-welcome;
+
+.@{buttonPrefix} {
+  background-color: @welcome-background-color;
+  border-radius: 24rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+
+  &-title {
+    font-size: 40rpx;
+    color: @welcome-text-color;
+    font-weight: 600;
+    margin-bottom: 24rpx;
+  }
+  &-content {
+    font-size: 32rpx;
+    color: @welcome-text-color;
+    line-height: 48rpx;
+  }
+}