Optimize upload component (50%)

packages/xgen/components/edit/Upload/components/Audio.tsx

@@ -0,0 +1,19 @@
+import { getFileSrc } from '@/knife'
+import { DeleteOutlined } from '@ant-design/icons'
+
+import type { IPropsCustomRender } from '../types'
+
+const Index = (props: IPropsCustomRender) => {
+	const { file, remove } = props
+
+	return (
+		<div className='upload_custom_wrap flex relative'>
+			<div className='icon_delete absolute justify_center align_center transition_normal' onClick={remove}>
+				<DeleteOutlined className='icon'></DeleteOutlined>
+			</div>
+			<video className='video' src={getFileSrc(file.response!)} controls></video>
+		</div>
+	)
+}
+
+export default window.$app.memo(Index)

packages/xgen/components/edit/Upload/components/UploadBtn.tsx

@@ -1,27 +1,17 @@
 import clsx from 'clsx'
-
-import { CloudUploadOutlined } from '@ant-design/icons'
-import { getLocale } from '@umijs/max'
-
-import filemap from '../filemap'
-
 import type { IPropsUploadBtn } from '../types'
+import { Icon } from '@/widgets'
 
 const Index = (props: IPropsUploadBtn) => {
-	const { length, filetype, maxCount, desc } = props
-	const locale = getLocale()
-
+	const { filetype, placeholder, placeholderIcon } = props
+	const iconProps = {
+		name: typeof placeholderIcon === 'string' ? placeholderIcon : placeholderIcon?.name || 'cloud-upload',
+		size: typeof placeholderIcon === 'string' ? 14 : placeholderIcon?.size || 14
+	}
 	return (
-		<div
-			className={clsx([
-				'btn_upload_wrap flex align_center cursor_point',
-				filetype,
-				length ? 'has_data' : '',
-				filetype === 'file' && maxCount === 1 && 'one_file'
-			])}
-		>
-			<CloudUploadOutlined style={{ fontSize: 21 }} />
-			<span className='desc'>{desc ?? filemap[filetype].desc[locale]}</span>
+		<div className={clsx(['btn_upload_wrap flex align_center cursor_point', filetype])}>
+			<Icon {...iconProps} />
+			<span className='desc'>{placeholder}</span>
 		</div>
 	)
 }

packages/xgen/components/edit/Upload/filemap.tsx

@@ -1,31 +1,82 @@
 import Video from './components/Video'
+import Audio from './components/Audio'
+import Image from './components/Image'
 
-import type { FileType } from './types'
+import type { FileType, PreviewProps } from './types'
+import { UploadFile } from 'antd'
 
 export default {
 	image: {
 		listType: 'picture-card',
 		className: 'image',
-		desc: {
+		placeholder: {
 			'zh-CN': '上传图片',
 			'en-US': 'Upload Image'
+		},
+		placeholderIcon: 'icon-upload',
+		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
+			return <Image file={file} imageSize={getSize(props.size)} remove={remove} />
+		}
+	},
+
+	audio: {
+		listType: 'picture-card',
+		className: 'image',
+		placeholder: {
+			'zh-CN': '上传音频',
+			'en-US': 'Upload Audio'
+		},
+		placeholderIcon: 'icon-upload',
+		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
+			return <div>Image</div>
 		}
 	},
+
 	file: {
-		listType: 'text',
-		className: 'file',
-		desc: {
+		listType: 'picture-card',
+		className: 'image',
+		placeholder: {
 			'zh-CN': '上传文件',
 			'en-US': 'Upload File'
+		},
+		placeholderIcon: 'icon-upload',
+		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
+			return <div>File</div>
 		}
 	},
+
 	video: {
 		listType: 'picture-card',
-		className: 'video',
-		desc: {
+		className: 'image',
+		placeholder: {
 			'zh-CN': '上传视频',
 			'en-US': 'Upload Video'
 		},
-		render: (_, file, fileList, { remove }) => <Video file={file} remove={remove}></Video>
+		placeholderIcon: 'icon-upload',
+		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
+			return <div>Video</div>
+		}
 	}
 } as FileType
+
+function getSize(size: PreviewProps['size']): PreviewProps['size'] {
+	const defaultSize: PreviewProps['size'] = {
+		width: size?.width || '90px',
+		height: size?.height || '90px',
+		ratio: size?.ratio || 1
+	}
+
+	if (defaultSize.ratio && defaultSize.ratio != 1) {
+		const width = parseInt(defaultSize.width as string)
+		const height = parseInt(defaultSize.height as string)
+		if (!width && !height) {
+			defaultSize.width = '100%'
+			defaultSize.height = `${100 * defaultSize.ratio}%`
+		}
+		if (width) {
+			defaultSize.width = `${width * defaultSize.ratio}px`
+		} else if (height) defaultSize.height = `${width * defaultSize.ratio}px`
+	}
+
+	return defaultSize
+}