AElfProject · Peterbjx · Mar 7, 2024
diff --git a/packages/component/src/Carousel/demos/basic.tsx b/packages/component/src/Carousel/demos/basic.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Carousel } from 'aelf-design';
+
+export default function CarouselExample() {
+  const IPFSAddress =
+    'https://silver-abstract-unicorn-590.mypinata.cloud/ipfs/QmUyz5k2i8mxWJ9oLZcZnnRXW4zzq4tjTZzVCJUcyrQgLJ';
+  const array = Array.from({ length: 6 }, (_, index) => index + 1);
+  const mockData = array.map((item) => {
+    return {
+      id: item,
+      url: `${IPFSAddress}/${item}.png?pinataGatewayToken=J-4VqFJOcNwmARnesBKmHYTpzCmzYA9o5Zx2On1Tp2VOC6W1DYjx45AygAaXHfpV`,
+    };
+  });
+  return (
+    <Carousel
+      data={mockData}
+      onSlideClick={(item) => {
+        console.log(item, 'item');
+      }}
+    />
+  );
+}
diff --git a/packages/component/src/Carousel/index.md b/packages/component/src/Carousel/index.md
@@ -1,35 +1,24 @@
 ---
 nav: Components
+title: Carousel
 group:
   title: Display
   order: 3
 ---
 
-# Address
+# Carousel 轮播图组件
 
-## Basic Usage
+## 代码演示
 
-<!-- <code src="./demos/basic.tsx"></code> -->
-
-## Copyable
-
-<!-- <code src="./demos/copyable.tsx"></code> -->
-
-## Format
-
-<!-- <code src="./demos/format.tsx"></code> -->
-
-## Custom Tooltip
-
-<!-- <code src="./demos/customTooltip.tsx"></code> -->
+<code src="./demos/basic.tsx"></code>
 
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
-| copyable | Address copyable | `boolean` | `false` | - |
-| address | Address | `string` | - | - |
-| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
-| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
-| locale | Multilingual settings | `Locale["address"]` | - | - |
+| data | 轮播图数据，URL是必传的 | `ICarouselSlideItem { url: string [key: string]: any}[]` | `{ headClip: 6, tailClip: 4 }` | - |
+| galleryObjectFit | gallery图片展示规则 | `fill \| contain \| cover \| none \| scale-down` | `cover` | - |
+| thumbsSlidesPerView | thumbs一页展示多少条 | `number` | 5 | - |
+| onSlideClick | 点击轮播图片触发事件，返回值是当前点击的图片ICarouselSlideItem对象 | `(value: ICarouselSlideItem) => void` | - |
+
+## 本期暂未涉及token
diff --git a/packages/component/src/Upload/demos/AWSUpload.tsx b/packages/component/src/Upload/demos/AWSUpload.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { IUploadProps, Upload } from 'aelf-design';
+
+import { useAWSUploadService } from '../../hooks/useAws';
+
+const AWSUpload = () => {
+  const [fileList, setFileList] = useState<any[]>([]);
+  const { awsUploadFile } = useAWSUploadService();
+  const handleChange: IUploadProps['onChange'] = (info) => {
+    let newFileList = [...info.fileList];
+    newFileList = newFileList
+      .map((file) => {
+        if (file.response) {
+          // Component will show file.url as link
+          file.url = file.response.url;
+        }
+        return file;
+      })
+      .filter((item) => item.status !== 'error');
+    setFileList([...newFileList]);
+  };
+
+  const customUpload: IUploadProps['customRequest'] = async ({ file, onSuccess, onError }) => {
+    try {
+      const uploadFile = await awsUploadFile(file as File);
+      onSuccess?.({
+        url: uploadFile,
+      });
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  return <Upload fileList={fileList} customRequest={customUpload} onChange={handleChange} />;
+};
+
+const App: React.FC = () => (
+  <div>
+    <AWSUpload />
+  </div>
+);
+
+export default App;
diff --git a/packages/component/src/Upload/demos/basic.tsx b/packages/component/src/Upload/demos/basic.tsx
@@ -1,41 +1,6 @@
 import React, { useState } from 'react';
-import { Upload, UploadButton } from 'aelf-design';
-import { UploadProps, UploadRequestOption } from 'antd';
-
-// import type { UploadRequestOption } from 'rc-upload/lib/interface';
-
-import { useAWSUploadService } from '../../hooks/useAws';
-
-const AWSUpload = () => {
-  const [fileList, setFileList] = useState<any[]>([]);
-  const { awsUploadFile } = useAWSUploadService();
-  const handleChange: UploadProps['onChange'] = (info) => {
-    let newFileList = [...info.fileList];
-    newFileList = newFileList
-      .map((file) => {
-        if (file.response) {
-          // Component will show file.url as link
-          file.url = file.response.url;
-        }
-        return file;
-      })
-      .filter((item) => item.status !== 'error');
-    setFileList([...newFileList]);
-  };
-  const customUpload = async ({ file, onSuccess, onError }: UploadRequestOption) => {
-    try {
-      const uploadFile = await awsUploadFile(file as File);
-      console.log(uploadFile, 'uploadFile');
-      onSuccess?.({
-        url: uploadFile,
-      });
-    } catch (error) {
-      onError?.(error as Error);
-    }
-  };
-
-  return <Upload fileList={fileList} customRequest={customUpload} onChange={handleChange} />;
-};
+import { Upload } from 'aelf-design';
+import { UploadProps } from 'antd';
 
 const FileUpload = () => {
   const [fileList, setFileList] = useState<any[]>([]);
@@ -53,22 +18,10 @@ const FileUpload = () => {
   );
 };
 
-const UploadExample: React.FC = () => (
+const App: React.FC = () => (
   <div>
-    <AWSUpload />
     <FileUpload></FileUpload>
-    <UploadButton />
   </div>
 );
 
-export default UploadExample;
-
-// const App: React.FC = () => {
-//   return (
-//     <AELFDProvider prefixCls="zhaomeng">
-//       <Address address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} />;
-//     </AELFDProvider>
-//   );
-// };
-
-// export default App;
+export default App;
diff --git a/packages/component/src/Upload/index.md b/packages/component/src/Upload/index.md
@@ -1,35 +1,56 @@
 ---
-nav: Components
+category: Components
+title: Upload
 group:
   title: Display
   order: 3
 ---
 
-# Upload
+# Upload 上传组件
 
-## Basic Usage
+文件选择上传
 
-<code src="./demos/basic.tsx"></code>
+## 何时使用
+
+上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
 
-## Copyable
+- 当需要上传一个或一些文件时。
+- 当需要展现上传的进度时。
+- 当需要使用拖拽交互时。
 
-<!-- <code src="./demos/copyable.tsx"></code> -->
+## 代码演示
 
-## Format
+### 基础上传示例
 
-<!-- <code src="./demos/format.tsx"></code> -->
+<code src="./demos/basic.tsx"></code>
 
-## Custom Tooltip
+### AWS上传示例
 
-<!-- <code src="./demos/customTooltip.tsx"></code> -->
+<code src="./demos/AWSUpload.tsx"></code>
 
 ## API
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
-| copyable | Address copyable | `boolean` | `false` | - |
-| address | Address | `string` | - | - |
-| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
-| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
-| locale | Multilingual settings | `Locale["address"]` | - | - |
+| Adjust | Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- | --- |
+| add | tips | 上传区域提示文案 | `string \| ReactNode` | Formats supported JPG, JPEG, PNG. Max size 10 MB.Recommend ratio 16:9. |  |
+| add | showUploadButton | 是否展示上传按钮 | `boolean` | `true` | - |
+| add | uploadText | 上传提示文案 | `string` | Upload | - |
+| add | uploadIconColor | 上传icon颜色 | `string` | 默认是主题色,colorPrimary | - |
+| add | format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
+| add | locale | Multilingual settings | `Locale["address"]` | - | - |
+| delete | listType | - | - | - | - |
+| delete | listType | - | - | - | - |
+
+## 主题变量(Design Tokens)
+
+### 组件Token
+
+| Token 名称       | 描述               | 类型     | 默认值                              |
+| ---------------- | ------------------ | -------- | ----------------------------------- |
+| colorMessageText | 提示文本的字体颜色 | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 |
+| borderColor      | 边框颜色           | `string` | 暗黑模式：#484848 日间模式：#E0E0E0 |
+| containerBg      | 上传区域背景颜色   | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 |
+
+### 其他支持的API参考antd
+
+https://ant-design.antgroup.com/components/upload-cn#api