Optimize upload component file preview

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

@@ -14,6 +14,10 @@
 		}
 
 		.vds-title-text {
+			color: var(--color_title);
+			font-family: inherit;
+			font-weight: 400;
+			font-size: 14px;
 			animation: none;
 		}
 

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

@@ -42,6 +42,7 @@ const Index = (props: IPropsCustomRender) => {
 		...defaultLayoutIcons
 	}
 
+	console.log('file', preivewSize?.height)
 	return (
 		<div
 			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
@@ -65,10 +66,7 @@ const Index = (props: IPropsCustomRender) => {
 				}}
 			>
 				<MediaPlayer
-					style={{
-						height: preivewSize?.height || '36px',
-						width: preivewSize?.width || '100%'
-					}}
+					style={{ height: '60px', width: preivewSize?.width || '100%' }}
 					className={clsx([styles._local])}
 					title={title}
 					src={src + `&${file.name}`}

packages/xgen/components/edit/Upload/components/File.less

@@ -0,0 +1,42 @@
+._local {
+	:global {
+		// .vds-menu-button,
+		// .vds-seek-button {
+		// 	display: none;
+		// }
+
+		// .vds-button {
+		// 	color: var(--color_text);
+		// }
+		// .vds-play-button {
+		// 	color: var(--color_bg);
+		// 	background-color: var(--color_text);
+		// }
+
+		// .vds-title-text {
+		// 	animation: none;
+		// }
+
+		.file_wrap {
+			padding: 11px;
+
+			background: var(--color_bg_nav);
+			border-radius: 6px;
+			filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+			display: flex;
+			align-items: center;
+
+			.title {
+				color: var(--color_title);
+				font-family: inherit;
+				font-weight: 400;
+				font-size: 14px;
+				overflow: hidden;
+				word-wrap: break-word;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				margin-left: 0.5em;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,73 @@
+import { getFileSrc } from '@/knife'
+
+import type { IPropsCustomRender } from '../types'
+import { useEffect, useState } from 'react'
+import { Skeleton } from 'antd'
+import { Icon } from '@/widgets'
+
+import '@vidstack/react/player/styles/default/theme.css'
+import '@vidstack/react/player/styles/default/layouts/audio.css'
+import styles from './File.less'
+import clsx from 'clsx'
+
+const Index = (props: IPropsCustomRender) => {
+	const { file, preivewSize, remove } = props
+	const [loading, setLoading] = useState<boolean>(true)
+	const [url, setUrl] = useState<string>(file.response || '')
+	const [title, setTitle] = useState<string>(file.name)
+	const [ext, setExt] = useState<string>(file.name.split('.').pop() || '')
+	const [showOpration, setShowOpration] = useState<boolean>(false)
+
+	const src = getFileSrc(url, props.appRoot)
+	useEffect(() => {
+		if (file.response) {
+			const url = getFileSrc(file.response, props.appRoot)
+			const title = url.split('name=/')[1]?.split('&')[0] || file.name
+			setUrl(url)
+			setTitle(title.split('/').pop() || file.name)
+			setExt(title.split('.').pop() || '')
+			setLoading(false)
+		}
+	}, [file.response])
+
+	const preview = () => {
+		window.open(src)
+	}
+
+	return (
+		<div
+			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			onMouseEnter={() => setShowOpration(true)}
+			onMouseLeave={() => setShowOpration(false)}
+		>
+			<div className='toolbar' style={{ display: showOpration ? 'flex' : 'none' }}>
+				<div className='toolbar-button' onClick={preview}>
+					<Icon name='icon-download' size={16}></Icon>
+				</div>
+				<div className='toolbar-button' onClick={remove}>
+					<Icon name='icon-trash' size={16}></Icon>
+				</div>
+			</div>
+
+			<Skeleton
+				loading={loading || url == ''}
+				active
+				paragraph={{
+					width: preivewSize?.width || '100%'
+				}}
+			>
+				<div
+					className={clsx(['file_wrap'])}
+					style={{ height: '60px', width: preivewSize?.width || '100%' }}
+				>
+					<Icon name='icon-file' size={20}></Icon>
+					<span className='title'>
+						{ext}: {title}
+					</span>
+				</div>
+			</Skeleton>
+		</div>
+	)
+}
+
+export default window.$app.memo(Index)

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

@@ -1,3 +1,4 @@
+import File from './components/File'
 import Video from './components/Video'
 import Audio from './components/Audio'
 import Image from './components/Image'
@@ -41,7 +42,7 @@ export default {
 		},
 		placeholderIcon: 'icon-upload',
 		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
-			return <div>File</div>
+			return <File file={file} preivewSize={props.size} remove={remove} />
 		}
 	},
 

packages/xgen/components/edit/Upload/index.less

@@ -77,9 +77,9 @@
 	&.audio {
 		:global {
 			@min_width: 288px;
-			@min_height: 52px;
+			@min_height: 60px;
 			@width: 288px;
-			@height: 52px;
+			@height: 60px;
 			.form_item_upload_wrap {
 				padding-top: 11px;
 				padding-left: 10px;

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

@@ -89,8 +89,8 @@ const fmtSize = (size: PreviewProps['size'], filetype: AllowedFileType): Preview
 	const defaultSizes: Record<AllowedFileType, PreviewProps['size']> = {
 		image: { width: '90px', height: '90px', ratio: 1 },
 		video: { width: '288px', height: '162px', ratio: 1 },
-		file: { width: '288px', height: '52px', ratio: 1 },
-		audio: { width: '288px', height: '52px', ratio: 1 }
+		file: { width: '288px', height: '60px', ratio: 1 },
+		audio: { width: '288px', height: '60px', ratio: 1 }
 	}
 
 	const defaultSize: PreviewProps['size'] = {