feat(Upload): add theme prop

packages/products/tdesign-miniprogram/packages/components/upload/README.en-US.md

@@ -11,7 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v
 add-btn | Boolean | true | \- | N
 add-content | String | - | \- | N
 allow-upload-duplicate-file | Boolean | false | `暂不支持`。allow to upload duplicate name files | N
-config | Object | - | Typescript: `UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
+config | Object | - | Typescript: `UploadMpConfig` `type UploadMpConfig = UploadImageConfig \| UploadVideoConfig` `interface UploadImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface UploadVideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
 disabled | Boolean | undefined | make upload to be disabled | N
 draggable | Boolean / Object | - | Typescript: `boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N
 files | Array | - | Typescript: `Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
@@ -26,6 +26,7 @@ remove-btn | Boolean | true | \- | N
 request-method | Function | - | \- | N
 size-limit | Number / Object | - | files size limit。Typescript: `number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
 source | String | media | options: media/messageFile | N
+theme | String | grid | `1.14.1`。options: grid/list | N
 transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | Typescript: `Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
 
 ### Upload Events
@@ -35,11 +36,11 @@ name | params | description
 add | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
 click | `(index: number; file: VideoContext \| ImageContext)` | \-
 complete | \- | \-
-drop | `(files: MediaContext) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]; interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }; interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number}`<br/>
+drop | `(files: MediaContext) ` | \-
 fail | \- | \-
 remove | `(index: number; file: UploadFile)` | \-
 select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | \-
-success | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+success | `(files: MediaContext)` | \-
 
 ### Upload Slots
 

packages/products/tdesign-miniprogram/packages/components/upload/README.md

@@ -11,7 +11,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
 add-btn | Boolean | true | 添加按钮 | N
 add-content | String | - | 添加按钮内容 | N
 allow-upload-duplicate-file | Boolean | false | `暂不支持`。是否允许重复上传相同文件名的文件 | N
-config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
+config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = UploadImageConfig \| UploadVideoConfig` `interface UploadImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface UploadVideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
 disabled | Boolean | undefined | 是否禁用组件 | N
 draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。TS 类型：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N
 files | Array | - | 已上传文件列表。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
@@ -26,6 +26,7 @@ remove-btn | Boolean | true | 移除按钮 | N
 request-method | Function | - | 自定义上传方法 | N
 size-limit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
 source | String | media | 来源。可选项：media/messageFile | N
+theme | String | grid | `1.14.1`。组件风格。提供宫格和列表两种布局风格。可选项：grid/list | N
 transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N
 
 ### Upload Events
@@ -35,11 +36,11 @@ transition | Object | { backTransition: true, duration: 300, timingFunction: 'ea
 add | `(files: MediaContext)` | 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
 click | `(index: number; file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传
 complete | \- | 上传成功或失败后触发
-drop | `(files: MediaContext) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]; interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }; interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number}`<br/>
+drop | `(files: MediaContext) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
 fail | \- | 上传失败后触发
 remove | `(index: number; file: UploadFile)` | 移除文件时触发
 select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
-success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
 
 ### Upload Slots
 

packages/products/tdesign-miniprogram/packages/components/upload/props.ts

@@ -88,6 +88,11 @@ const props: TdUploadProps = {
     type: String,
     value: 'media',
   },
+  /** 组件风格。提供宫格和列表两种布局风格 */
+  theme: {
+    type: String,
+    value: 'grid',
+  },
   /** 拖拽位置移动时的过渡参数,`duration`单位为ms */
   transition: {
     type: Object,

packages/products/tdesign-miniprogram/packages/components/upload/type.ts

@@ -141,6 +141,14 @@ export interface TdUploadProps {
     type: StringConstructor;
     value?: 'media' | 'messageFile';
   };
+  /**
+   * 组件风格。提供宫格和列表两种布局风格
+   * @default grid
+   */
+  theme?: {
+    type: StringConstructor;
+    value?: 'grid' | 'list';
+  };
   /**
    * 拖拽位置移动时的过渡参数,`duration`单位为ms
    * @default { backTransition: true, duration: 300, timingFunction: 'ease' }
@@ -151,9 +159,9 @@ export interface TdUploadProps {
   };
 }
 
-export type UploadMpConfig = ImageConfig | VideoConfig;
+export type UploadMpConfig = UploadImageConfig | UploadVideoConfig;
 
-export interface ImageConfig {
+export interface UploadImageConfig {
   count?: number;
   sizeType?: Array<SizeTypeValues>;
   sourceType?: Array<SourceTypeValues>;
@@ -163,7 +171,7 @@ export type SizeTypeValues = 'original' | 'compressed';
 
 export type SourceTypeValues = 'album' | 'camera';
 
-export interface VideoConfig {
+export interface UploadVideoConfig {
   sourceType?: Array<SourceTypeValues>;
   compressed?: boolean;
   maxDuration?: number;

packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.en-US.md

@@ -24,6 +24,7 @@ remove-btn | Boolean | true | \- | N
 request-method | Function | - | Typescript: `(files: UploadFile \| UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N
 size-limit | Number / Object | - | files size limit。Typescript: `number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N
 source | String | media | options: media/messageFile | N
+theme | String | grid | options: grid/list | N
 transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | Typescript: `Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N
 
 ### Upload Events

packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.md

@@ -24,6 +24,7 @@ remove-btn | Boolean | true | 移除按钮 | N
 request-method | Function | - | 自定义上传方法。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N
 size-limit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N
 source | String | media | 来源。可选项：media/messageFile | N
+theme | String | grid | 组件风格。提供宫格和列表两种布局风格。可选项：grid/list | N
 transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N
 
 ### Upload Events

packages/products/tdesign-miniprogram/packages/uniapp-components/upload/props.ts

@@ -86,6 +86,15 @@ export default {
       return ['media', 'messageFile'].includes(val);
     },
   },
+  /** 组件风格。提供宫格和列表两种布局风格 */
+  theme: {
+    type: String,
+    default: 'grid' as TdUploadProps['theme'],
+    validator(val: TdUploadProps['theme']): boolean {
+      if (!val) return true;
+      return ['grid', 'list'].includes(val);
+    },
+  },
   /** 拖拽位置移动时的过渡参数,`duration`单位为ms */
   transition: {
     type: Object,

packages/products/tdesign-miniprogram/packages/uniapp-components/upload/type.ts

@@ -82,6 +82,11 @@ export interface TdUploadProps {
    * @default media
    */
   source?: 'media' | 'messageFile';
+  /**
+   * 组件风格。提供宫格和列表两种布局风格
+   * @default grid
+   */
+  theme?: 'grid' | 'list';
   /**
    * 拖拽位置移动时的过渡参数,`duration`单位为ms
    * @default { backTransition: true, duration: 300, timingFunction: 'ease' }

packages/products/tdesign-mobile-react/src/upload/defaultProps.ts

@@ -15,6 +15,7 @@ export const uploadDefaultProps: TdUploadProps = {
   multiple: false,
   preview: true,
   removeBtn: true,
+  theme: 'grid',
   useMockProgress: true,
   withCredentials: false,
 };

packages/products/tdesign-mobile-react/src/upload/type.ts

@@ -121,6 +121,11 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`
    */
   sizeLimit?: number | SizeLimitObj;
+  /**
+   * 组件风格。提供宫格和列表两种布局风格
+   * @default grid
+   */
+  theme?: 'grid' | 'list';
   /**
    * 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传
    * @default true