docs(Chat): update api docs (#4038)

* docs(Chat): update api docs

* docs: update

* chore: using props.ts file

* fix(Demo): fix multiple example bugs

* chore: remove irrelevant content

Author: anlyyao

packages/components/common/common.ts

@@ -6,9 +6,6 @@ export interface Styles {
 
 export type ImageEvent = any;
 
-/**
- * 通用全局类型
- * */
 export type PlainObject = { [key: string]: any };
 
 export type OptionData = {
@@ -28,6 +25,9 @@ export type TreeOptionData<T = string | number> = {
   content?: string;
 } & PlainObject;
 
+/**
+ * 通用全局类型
+ * */
 export type SizeEnum = 'small' | 'medium' | 'large';
 
 export type ShapeEnum = 'circle' | 'round';

packages/pro-components/chat/attachments/README.en-US.md

@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+### Attachments Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+addable | Boolean | true | \- | N
+image-viewer | Boolean | true | \- | N
+items | Array | [] | Typescript: `FileItem[]` `interface FileItem { fileType: 'image'\|'video'\|'audio'\|'pdf'\|'doc'\|'ppt'\|'txt'; name: string; url: string; size: number; status?: 'success'\|'fail'\|'pending'\|'error'; progress?: number; errorMessage?: string; fileIcon?: string; width?: number; height?: number; mode?: 'aspectFit' \| 'aspectFill' \| 'widthFix' \| 'heightFix' \| 'scaleToFill'}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/attachments/type.ts) | N
+removable | Boolean | true | \- | N
+
+### Attachments Events
+
+name | params | description
+-- | -- | --
+add | \- | \-
+file-click | `(item: FileItem)` | \-
+remove | `(item: FileItem, index: number)` | \-

packages/pro-components/chat/attachments/README.md

@@ -5,7 +5,6 @@ spline: base
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
 
 ## 引入
 
@@ -17,67 +16,43 @@ isComponent: true
 }
 ```
 
-## 代码演示
-
-<a href="https://developers.weixin.qq.com/s/F1cSo7mm75SS" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
-
-<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
-<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
-</blockquote>
-
 ### 01 组件类型
 
-图片类型
+#### 图片类型
 
 {{ base }}
 
-文件类型
+#### 文件类型
 
 {{ file }}
 
 ### 02 组件状态
-图片类型加载状态
 
-{{ imageLoading }}
+#### 图片类型加载状态
+
+{{ image-loading }}
 
-文件类型加载状态
-{{ fileLoading }}
+#### 文件类型加载状态
+
+{{ file-loading }}
 
 ## API
 
 ### Attachments Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-items | Array | [] | 附件列表。TS类型：FileItem[] | Y
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+addable | Boolean | true | 【讨论中】是否显示添加按钮 | N
+image-viewer | Boolean | true | 是否启用图片预览功能 | N
+items | Array | [] | 【实验】附件列表。TS 类型：`FileItem[]` `interface FileItem { fileType: 'image'\|'video'\|'audio'\|'pdf'\|'doc'\|'ppt'\|'txt'; name: string; url: string; size: number; status?: 'success'\|'fail'\|'pending'\|'error'; progress?: number; errorMessage?: string; fileIcon?: string; width?: number; height?: number; mode?: 'aspectFit' \| 'aspectFill' \| 'widthFix' \| 'heightFix' \| 'scaleToFill'}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/attachments/type.ts) | N
 removable | Boolean | true | 是否显示删除按钮 | N
-imageViewer | Boolean | true | 是否启用图片预览功能 | N
-addable | Boolean | true | 是否显示添加按钮 | N
-
-
-
-
-### FileItem 类型定义
-```typescript
-interface FileItem {
-  fileType: 'image'|'video'|'audio'|'pdf'|'doc'|'ppt'|'txt'  // 文件类型
-  name: string  // 文件名
-  url: string  // 文件URL
-  size: number  // 文件大小(KB)
-  status?: 'success'|'fail'|'pending'|'error'  // 上传状态
-  progress?: number  // 上传进度(0-100)
-  errorMessage?: string  // 错误信息
-  fileIcon?: string  // 自定义文件图标URL
-  width?: number  // 图片宽度(px)
-  height?: number  // 图片高度(px)
-  mode?: 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'scaleToFill'  // 图片模式
-}
 
 ### Attachments Events
 
 名称 | 参数 | 描述
 -- | -- | --
-fileClick | `(item: FileItem)` | 点击文件时触发
+add | \- | 点击添加按钮时触发
+file-click | `(item: FileItem)` | 点击文件时触发
 remove | `(item: FileItem, index: number)` | 点击删除按钮时触发
-add | - | 点击添加按钮时触发
-

packages/pro-components/chat/attachments/_example/attachments.json

@@ -2,8 +2,8 @@
   "navigationBarTitleText": "Attachments 聊天附件",
   "usingComponents": {
     "base": "./base",
-    "fileLoading": "./fileLoading",
-    "imageLoading": "./imageLoading",
+    "fileLoading": "./file-loading",
+    "imageLoading": "./image-loading",
     "file": "./file"
   }
 }