Lan
2026-01-07 18:58:05 +08:00
parent 394437294e
commit f5e385316f
+18 -26
View File
@@ -22,16 +22,13 @@
<div class="absolute inset-0 w-full h-full" v-if="progress > 0"> <div class="absolute inset-0 w-full h-full" v-if="progress > 0">
<BorderProgressBar :progress="progress" /> <BorderProgressBar :progress="progress" />
</div> </div>
<!-- 上传状态图标 --> <!-- 上传状态图标 -->
<component <component
:is="statusIcon" :is="statusIcon"
:class="[ :class="['w-16 h-16 transition-colors duration-300', statusIconClass]"
'w-16 h-16 transition-colors duration-300',
statusIconClass
]"
/> />
<!-- 文件名或占位文本 --> <!-- 文件名或占位文本 -->
<p <p
:class="[ :class="[
@@ -45,20 +42,23 @@
{{ displayText }} {{ displayText }}
</span> </span>
</p> </p>
<!-- 状态描述或默认描述 --> <!-- 状态描述或默认描述 -->
<p :class="['mt-2 text-xs', statusDescriptionClass]"> <p :class="['mt-2 text-xs', statusDescriptionClass]">
{{ statusDescription }} {{ statusDescription }}
</p> </p>
<!-- 进度详情上传中显示 --> <!-- 进度详情上传中显示 -->
<div v-if="isUploading && showProgressDetails" class="mt-3 w-full"> <div v-if="isUploading && showProgressDetails" class="mt-3 w-full">
<div class="flex justify-between text-xs mb-1" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"> <div
class="flex justify-between text-xs mb-1"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
<span>{{ formatBytes(uploadedBytes) }} / {{ formatBytes(totalBytes) }}</span> <span>{{ formatBytes(uploadedBytes) }} / {{ formatBytes(totalBytes) }}</span>
<span>{{ progress }}%</span> <span>{{ progress }}%</span>
</div> </div>
</div> </div>
<!-- 错误重试按钮 --> <!-- 错误重试按钮 -->
<button <button
v-if="hasError && allowRetry" v-if="hasError && allowRetry"
@@ -161,19 +161,13 @@ const statusIcon = computed(() => {
const statusIconClass = computed(() => { const statusIconClass = computed(() => {
if (isUploading.value) { if (isUploading.value) {
return isDarkMode return isDarkMode ? 'text-indigo-400 animate-spin' : 'text-indigo-600 animate-spin'
? 'text-indigo-400 animate-spin'
: 'text-indigo-600 animate-spin'
} }
if (isSuccess.value) { if (isSuccess.value) {
return isDarkMode return isDarkMode ? 'text-green-400' : 'text-green-600'
? 'text-green-400'
: 'text-green-600'
} }
if (hasError.value) { if (hasError.value) {
return isDarkMode return isDarkMode ? 'text-red-400' : 'text-red-600'
? 'text-red-400'
: 'text-red-600'
} }
return isDarkMode return isDarkMode
? 'text-gray-400 group-hover:text-indigo-400' ? 'text-gray-400 group-hover:text-indigo-400'
@@ -182,14 +176,10 @@ const statusIconClass = computed(() => {
const statusClass = computed(() => { const statusClass = computed(() => {
if (hasError.value) { if (hasError.value) {
return isDarkMode return isDarkMode ? 'border-red-500/50' : 'border-red-300'
? 'border-red-500/50'
: 'border-red-300'
} }
if (isSuccess.value) { if (isSuccess.value) {
return isDarkMode return isDarkMode ? 'border-green-500/50' : 'border-green-300'
? 'border-green-500/50'
: 'border-green-300'
} }
return '' return ''
}) })
@@ -243,6 +233,8 @@ const handleFileUpload = (event: Event) => {
if (file) { if (file) {
emit('fileSelected', file) emit('fileSelected', file)
} }
// 重置 input 值,允许选择同名文件
target.value = ''
} }
const handleFileDrop = (event: DragEvent) => { const handleFileDrop = (event: DragEvent) => {
@@ -254,4 +246,4 @@ const handleFileDrop = (event: DragEvent) => {
const handleRetry = () => { const handleRetry = () => {
emit('retry') emit('retry')
} }
</script> </script>