资源上传样式修改

src/views/myResources/UploadModal.vue

@@ -43,9 +43,12 @@
 								:class="{ 'custom-status-item': file.statusStr !== '' }"
 							>
 								<uploader-file ref="fileItem" :file="file" :list="true" />
-								<span class="custom-status">{{ file.statusStr }}</span>
-								<!-- 添加剩余时间显示 -->
-								<!-- <span class="remaining-time" v-if="file.remainingTime"> 剩余: {{ file.remainingTime }} </span> -->
+								<!-- 上传完成显示状态 -->
+								<template v-if="file.status">
+									<span class="file-status">
+										{{ fileStatusText[file.status] }}
+									</span>
+								</template>
 							</li>
 							<div class="no-file" v-if="!props.fileList.length"><FileExclamationOutlined /> 暂无待上传文件</div>
 						</ul>
@@ -122,7 +125,7 @@
 
 	const fileStatusText = ref({
 		success: '上传成功',
-		error: 'error',
+		error: '上传失败',
 		uploading: '上传中',
 		paused: '暂停中',
 		waiting: '等待中'
@@ -247,86 +250,20 @@
 			}
 		}
 	}
+	// 格式化速度显示
+	const formatSpeed = (bytesPerSecond) => {
+		if (bytesPerSecond < 1024) return `${bytesPerSecond.toFixed(1)} B/s`;
+		if (bytesPerSecond < 1024 * 1024) return `${(bytesPerSecond / 1024).toFixed(1)} KB/s`;
+		return `${(bytesPerSecond / (1024 * 1024)).toFixed(1)} MB/s`;
+	}
 
-	const handleFileProgress = (file) => {
-		const now = Date.now()
-		const duration = (now - file.lastTime) / 1000 // 秒
-		const loadedDiff = file.lastTime - file.lastLoaded
-		console.log('duration', now, file.lastTime, file.lastLoaded, duration, loadedDiff)
-		if (duration > 0) {
-			console.log('进来了', file)
-			// 计算当前上传速度 (bytes/sec)
-			file.speed = loadedDiff / duration
-
-			// 计算剩余时间
-			if (file.speed > 0) {
-				const remainingBytes = file.size - file.loaded
-				const remainingSeconds = remainingBytes / file.speed
-				console.log('进来了计算剩余时间', remainingBytes, remainingSeconds)
-				// 格式化剩余时间显示
-				if (remainingSeconds < 60) {
-					console.log('进来了', 60)
-					file.remainingTime = `${Math.round(remainingSeconds)}秒`
-				} else if (remainingSeconds < 3600) {
-					console.log('进来了', 600)
-					file.remainingTime = `${Math.round(remainingSeconds / 60)}分钟`
-				} else {
-					console.log('进来了', 3600)
-					file.remainingTime = `${Math.round(remainingSeconds / 3600)}小时`
-				}
-			}
-		}
-
-		// 更新最后记录的时间和已上传量
-		file.lastLoaded = file.loaded
-		file.lastTime = now
-	}
-	// const handleFileProgress = (file) => {
-	// 	console.log(file, '进来了filefilefile')
-	// 	const now = Date.now()
-
-	// 	// 确保文件对象有必要的属性
-	// 	if (!file.lastTime) file.lastTime = now
-	// 	if (file.lastLoaded === undefined) file.lastLoaded = 0
-
-	// 	const duration = (now - file.lastTime) / 1000 // 转换为秒
-	// 	console.log(duration, '进来了duration')
-	// 	// 只有当时间间隔足够大时才计算速度（至少0.1秒）
-	// 	if (duration > 0.1) {
-	// 		console.log(duration, '进来了duration')
-	// 		const loadedDiff = file.loaded - file.lastLoaded
-
-	// 		// 只有当有新的数据上传时才计算
-	// 		if (loadedDiff > 0) {
-	// 			console.log(loadedDiff, '进来了loadedDiff')
-
-	// 			file.speed = loadedDiff / duration
-	// 			// 计算剩余时间（确保speed是有效数字）
-	// 			if (file.speed > 0 && !isNaN(file.speed)) {
-	// 				const remainingBytes = file.size - file.loaded
-	// 				const remainingSeconds = remainingBytes / file.speed
-	// 				// 格式化剩余时间
-	// 				if (remainingSeconds < 60) {
-	// 					file.remainingTime = `${Math.round(remainingSeconds)}秒`
-	// 				} else if (remainingSeconds < 3600) {
-	// 					const mins = Math.floor(remainingSeconds / 60)
-	// 					const secs = Math.round(remainingSeconds % 60)
-	// 					file.remainingTime = `${mins}分${secs}秒`
-	// 				} else {
-	// 					const hours = Math.floor(remainingSeconds / 3600)
-	// 					const mins = Math.round((remainingSeconds % 3600) / 60)
-	// 					file.remainingTime = `${hours}小时${mins}分`
-	// 				}
-	// 			} else {
-	// 				file.remainingTime = '计算中...'
-	// 			}
-
-	// 			// 更新最后记录的时间和已上传量
-	// 			file.lastLoaded = file.loaded
-	// 			file.lastTime = now
-	// 		}
-	// 	}
-	// }
+	// 格式化时间显示
+	const formatTime = (seconds) => {
+		if (seconds < 60) return `${Math.ceil(seconds)}秒`;
+		const minutes = Math.floor(seconds / 60);
+		const secs = Math.ceil(seconds % 60);
+		return `${minutes}分${secs}秒`;
+	}
 	const handleFileSuccess = (rootFile, file, response) => {
 		if (response === '') {
 			uploadStatus.value[file.id] = '上传失败'
@@ -358,6 +295,13 @@
 		filesLength.value--
 		canClose.value = filesLength.value === 0
 	}
+	// 在 handleFileSuccess 前添加
+	const handleFileProgress = (rootFile, file, chunk) => {
+		// 每500ms更新一次显示
+		if (Date.now() - file.lastTime > 500) {
+			file.calculateRemainingTime?.()
+		}
+	}
 
 	const computeMD5 = (file) => {
 		let fileReader = new FileReader()
@@ -610,33 +554,20 @@
 				:deep(.uploader-file) {
 					height: 40px;
 					line-height: 40px;
-
-					.uploader-file-progress {
-						border: 1px solid @success-color;
-						border-right: none;
-						border-left: none;
-						background: #e1f3d8;
-					}
-
-					.uploader-file-name {
-						width: 44%;
-					}
-
-					.uploader-file-size {
-						width: 16%;
-					}
-
-					.uploader-file-meta {
-						display: none;
-					}
-
-					.uploader-file-status {
-						width: 30%;
-						text-indent: 0;
+					.progress-info,
+					.file-status {
+						position: absolute;
+						right: 30px;
+						top: 50%;
+						transform: translateY(-50%);
+						font-size: 12px;
+						color: #666;
 					}
 
-					.uploader-file-actions>span {
-						margin-top: 12px;
+					:deep(.uploader-file) {
+						.uploader-file-status {
+							display: none; // 隐藏默认状态显示
+						}
 					}
 				}