feat: complete uploads

frontend/admin/src/pages/MediaUploadPage.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { mediaService } from '@/api/mediaService';
+import Badge from 'primevue/badge';
 import Button from 'primevue/button';
-import Toast from 'primevue/toast';
+import Card from 'primevue/card';
 import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -76,8 +77,64 @@ const getOssToken = async () => {
     }
 };
 
+// Add pending uploads state
+const pendingFiles = ref([]);
+const uploadQueue = ref([]);
+const currentUploadIndex = ref(-1);
+
+// Add sequential upload management
+const addToUploadQueue = (files) => {
+    const newFiles = Array.from(files).map(file => ({
+        id: Date.now() + Math.random(),
+        file,
+        progress: 0,
+        status: 'pending',
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        uploadTime: new Date().toISOString()
+    }));
+    uploadQueue.value.push(...newFiles);
+};
+
+const handleFiles = async (files) => {
+    addToUploadQueue(files);
+    if (!isUploading.value) {
+        processNextUpload();
+    }
+};
+
+const processNextUpload = async () => {
+    if (uploadQueue.value.length === 0) {
+        currentUploadIndex.value = -1;
+        isUploading.value = false;
+        return;
+    }
+
+    const nextFile = uploadQueue.value[0];
+    currentUploadIndex.value = 0;
+
+    try {
+        await uploadFile(nextFile.file);
+        uploadQueue.value.shift();
+        addToHistory(nextFile.file, 'completed');
+    } catch (error) {
+        console.error('Failed to upload file:', nextFile.file.name, error);
+        uploadQueue.value.shift();
+        addToHistory(nextFile.file, 'error');
+    }
+
+    processNextUpload();
+};
+
+const updateQueueItemProgress = (index, progress) => {
+    if (uploadQueue.value[index]) {
+        uploadQueue.value[index].progress = progress;
+    }
+};
+
+// Modify uploadFile function
 const uploadFile = async (file) => {
-    const historyItem = addToHistory(file);
     try {
         currentFile.value = file;
         isUploading.value = true;
@@ -106,7 +163,7 @@ const uploadFile = async (file) => {
                 if (e.lengthComputable) {
                     const progress = (e.loaded / e.total) * 100;
                     uploadProgress.value = progress;
-                    updateHistoryItem(historyItem.id, { progress });
+                    updateQueueItemProgress(currentUploadIndex.value, progress);
                 }
             };
 
@@ -124,25 +181,10 @@ const uploadFile = async (file) => {
             xhr.send(formData);
         });
 
-        updateHistoryItem(historyItem.id, { status: 'completed', progress: 100 });
         toast.add({ severity: 'success', summary: '成功', detail: '文件上传成功', life: 3000 });
     } catch (error) {
-        updateHistoryItem(historyItem.id, { status: 'error', error: error.message });
         toast.add({ severity: 'error', summary: '错误', detail: '文件上传失败', life: 3000 });
         throw error;
-    } finally {
-        isUploading.value = false;
-        currentFile.value = null;
-    }
-};
-
-const handleFiles = async (files) => {
-    for (const file of files) {
-        try {
-            await uploadFile(file);
-        } catch (error) {
-            console.error('Failed to upload file:', file.name, error);
-        }
     }
 };
 
@@ -180,11 +222,10 @@ const onFileInputChange = (e) => {
 };
 
 const goBack = () => {
-    router.push('/media');
+    router.push('/medias');
 };
 
 onMounted(() => {
-    getOssToken();
     loadUploadHistory();
 });
 </script>
@@ -199,69 +240,89 @@ onMounted(() => {
             </div>
         </div>
 
-        <div class="card p-6">
-            <input ref="fileInput" type="file" multiple accept="image/*,video/*,audio/*,.pdf,.doc,.docx" class="hidden"
-                @change="onFileInputChange">
+        <div class="grid grid-cols-2 gap-6">
+            <!-- Upload Area - Left Column -->
+            <Card>
+                <template #header>
+                    <div class="flex justify-between items-center bg-gray-50 p-4 rounded-t-lg">
+                        <h3 class="text-lg font-medium">上传</h3>
+                    </div>
+                </template>
+                <template #content>
+                    <input ref="fileInput" type="file" multiple accept="image/*,video/*,audio/*,.pdf,.doc,.docx"
+                        class="hidden" @change="onFileInputChange">
 
-            <div ref="dropZone" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave" @click="onClick"
-                class="border-2 border-dashed border-gray-300 rounded-lg transition-all duration-200 hover:border-blue-500 hover:bg-blue-50 cursor-pointer">
-                <div class="flex flex-col items-center justify-center p-8">
-                    <i class="pi pi-cloud-upload text-5xl text-gray-500 mb-4"></i>
-                    <p class="text-gray-600 text-center mb-2">拖拽文件到此处或点击上传</p>
-                    <p class="text-gray-400 text-sm text-center">支持: MP4, JPG, PNG, GIF, MP4, PDF, DOC</p>
-                </div>
-            </div>
-
-            <div v-if="isUploading" class="mt-4">
-                <div class="text-sm mb-2">正在上传: {{ currentFile?.name }}</div>
-                <div class="w-full bg-gray-200 rounded-full h-2.5">
-                    <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
-                        :style="{ width: uploadProgress + '%' }" />
-                </div>
-                <div class="text-sm mt-2">{{ Math.round(uploadProgress) }}%</div>
-            </div>
-
-            <!-- Upload History -->
-            <div class="mt-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-medium">上传历史</h3>
-                    <Button v-if="completedUploads.length" icon="pi pi-trash" text @click="clearCompleted"
-                        label="清除已完成" />
-                </div>
-
-                <div class="space-y-4">
-                    <div v-for="item in uploadHistory" :key="item.id" class="p-4 bg-gray-50 rounded-lg">
-                        <div class="flex justify-between items-center mb-2">
-                            <span class="text-sm font-medium">{{ item.name }}</span>
-                            <Badge :value="item.status === 'completed' ? '已完成' :
-                                item.status === 'error' ? '失败' : '上传中'" :severity="item.status === 'completed' ? 'success' :
-                                    item.status === 'error' ? 'danger' : 'info'" />
-                        </div>
-                        <div v-if="item.status !== 'completed'" class="w-full bg-gray-200 rounded-full h-2">
-                            <div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
-                                :style="{ width: item.progress + '%' }" />
-                        </div>
-                        <div class="text-xs text-gray-500 mt-2">
-                            {{ new Date(item.uploadTime).toLocaleString() }}
+                    <div ref="dropZone" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave" @click="onClick"
+                        class="border-2 border-dashed border-gray-300 rounded-lg transition-all duration-200 hover:border-blue-500 hover:bg-blue-50 cursor-pointer">
+                        <div class="flex flex-col items-center justify-center p-8">
+                            <i class="pi pi-cloud-upload text-6xl! text-gray-500 mb-4"></i>
+                            <p class="text-gray-600 text-center mb-2">拖拽文件到此处或点击上传</p>
+                            <p class="text-gray-400 text-sm text-center">支持: MP4, JPG, PNG, GIF, MP4, PDF, DOC</p>
                         </div>
                     </div>
-                </div>
-            </div>
+
+                    <div v-if="isUploading" class="mt-4">
+                        <div class="text-sm mb-2">正在上传: {{ currentFile?.name }}</div>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5">
+                            <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
+                                :style="{ width: uploadProgress + '%' }" />
+                        </div>
+                        <div class="text-sm mt-2">{{ Math.round(uploadProgress) }}%</div>
+                    </div>
+
+                    <!-- Upload Queue -->
+                    <div v-if="uploadQueue.length > (isUploading.value ? 1 : 0)" class="mt-6">
+                        <h3 class="text-lg font-medium mb-4">等待上传 ({{ uploadQueue.length - (isUploading.value ? 1 : 0)
+                            }})
+                        </h3>
+                        <div class="space-y-4">
+                            <div v-for="item in uploadQueue.slice(isUploading.value ? 1 : 0)" :key="item.id"
+                                class="p-4 bg-gray-50 rounded-lg">
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-sm font-medium">{{ item.name }}</span>
+                                    <Badge value="等待中" severity="warning" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Upload History - Right Column -->
+            <Card>
+                <template #header>
+                    <div class="flex justify-between items-center bg-gray-50 p-4 rounded-t-lg">
+                        <h3 class="text-lg font-medium">上传历史</h3>
+                        <Button v-if="completedUploads.length" icon="pi pi-trash" text @click="clearCompleted"
+                            label="清除已完成" />
+                    </div>
+                </template>
+                <template #content>
+                    <div class="space-y-4 max-h-[calc(100vh-200px)] overflow-y-auto">
+                        <div v-for="item in uploadHistory.filter(i => i.status !== 'uploading')" :key="item.id"
+                            class="p-4 bg-gray-50 rounded-lg">
+                            <div class="flex justify-between items-center mb-2">
+                                <span class="text-sm font-medium">{{ item.name }}</span>
+                                <Badge :value="item.status === 'completed' ? '已完成' :
+                                    item.status === 'error' ? '失败' : '上传中'" :severity="item.status === 'completed' ? 'success' :
+                                        item.status === 'error' ? 'danger' : 'info'" />
+                            </div>
+                            <div v-if="item.status !== 'completed'" class="w-full bg-gray-200 rounded-full h-2">
+                                <div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                                    :style="{ width: item.progress + '%' }" />
+                            </div>
+                            <div class="text-xs text-gray-500 mt-2">
+                                {{ new Date(item.uploadTime).toLocaleString() }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
         </div>
     </div>
 </template>
 
 <style scoped>
-.p-fileupload {
-    border: 2px dashed #cbd5e0;
-    transition: all 0.3s ease;
-}
-
-.p-fileupload:hover {
-    border-color: #4299e1;
-    background-color: rgba(66, 153, 225, 0.05);
-}
-
 .custom-upload :deep(.p-fileupload-buttonbar) {
     display: none;
 }