@xuda.io/xuda-widget-plugin-xuda-drive 1.0.141 → 1.0.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuda.io/xuda-widget-plugin-xuda-drive",
-  "version": "1.0.141",
+  "version": "1.0.142",
   "description": "Xuda Drive widget plugin",
   "scripts": {
     "pub": "npm version patch --force && npm publish  --access public",

package/src/runtime.mjs

@@ -799,12 +799,19 @@ export async function viewer(fields, e) {
             <div v-if="uploadJobs.length || checkingFiles" class="fixed bottom-4 right-4 z-[100] w-96 bg-white rounded-lg shadow-2xl border border-neutral-200 overflow-hidden" style="font-family: system-ui, -apple-system, sans-serif;">
               <!-- Header -->
               <div class="flex items-center justify-between px-4 py-3 bg-neutral-900 text-white cursor-pointer" @click="jobWindowCollapsed = !jobWindowCollapsed">
-                <div class="font-medium text-sm">
-                  <template v-if="checkingFiles">Checking {{ checkingFilesCount }} file{{ checkingFilesCount > 1 ? 's' : '' }}</template>
-                  <template v-else-if="uploadsInProgress > 0">Uploading {{ uploadsInProgress }} item{{ uploadsInProgress > 1 ? 's' : '' }}<template v-if="uploadsFailed">, {{ uploadsFailed }} failed</template></template>
-                  <template v-else>
-                    {{ uploadsDone }} uploaded<template v-if="uploadsFailed">, {{ uploadsFailed }} failed</template>
-                  </template>
+                <div class="flex items-center gap-2.5 font-medium text-sm">
+                  <!-- Circular progress -->
+                  <svg v-if="uploadJobs.length && !checkingFiles && uploadsInProgress > 0" class="w-5 h-5 -rotate-90 shrink-0" viewBox="0 0 20 20">
+                    <circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+                    <circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" :stroke-dasharray="50.265" :stroke-dashoffset="50.265 - (50.265 * overallProgress / 100)" class="transition-all duration-300" />
+                  </svg>
+                  <div>
+                    <template v-if="checkingFiles">Checking {{ checkingFilesCount }} file{{ checkingFilesCount > 1 ? 's' : '' }}</template>
+                    <template v-else-if="uploadsInProgress > 0">Uploading {{ uploadsInProgress }} item{{ uploadsInProgress > 1 ? 's' : '' }}<template v-if="uploadsFailed">, {{ uploadsFailed }} failed</template></template>
+                    <template v-else>
+                      {{ uploadsDone }} uploaded<template v-if="uploadsFailed">, {{ uploadsFailed }} failed</template>
+                    </template>
+                  </div>
                 </div>
                 <div class="flex items-center gap-2">
                   <button @click.stop="jobWindowCollapsed = !jobWindowCollapsed" class="text-white/70 hover:text-white">
@@ -849,8 +856,10 @@ export async function viewer(fields, e) {
                 <!-- Upload jobs -->
                 <div v-for="job in uploadJobs" :key="job.id" :ref="'job-' + job.id" class="flex items-center gap-3 px-4 py-2.5">
                   <div class="shrink-0">
+                    <!-- Pending (queued) -->
+                    <svg v-if="job.status === 'pending'" class="w-5 h-5 text-neutral-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                     <!-- Uploading spinner -->
-                    <svg v-if="job.status === 'uploading'" class="w-5 h-5 text-neutral-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /></svg>
+                    <svg v-else-if="job.status === 'uploading'" class="w-5 h-5 text-neutral-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /></svg>
                     <!-- Success icon -->
                     <svg v-else-if="job.status === 'done'" class="w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>
                     <!-- Error icon -->
@@ -1144,12 +1153,25 @@ export async function viewer(fields, e) {
             id: jobId,
             name: file.name,
             progress: 0,
-            status: 'uploading',
+            status: 'pending',
             file: file,
             isUpdate: isUpdate,
           });
-          this.uploadSingleFile(file, jobId, isUpdate);
         });
+
+        this.processQueue();
+      },
+      processQueue() {
+        const MAX_CONCURRENT = 10;
+        const active = this.uploadJobs.filter(j => j.status === 'uploading').length;
+        const pending = this.uploadJobs.filter(j => j.status === 'pending');
+        const slotsAvailable = MAX_CONCURRENT - active;
+
+        for (let i = 0; i < Math.min(slotsAvailable, pending.length); i++) {
+          const job = pending[i];
+          job.status = 'uploading';
+          this.uploadSingleFile(job.file, job.id, job.isUpdate);
+        }
       },
       uploadSingleFile(file, jobId, isUpdate) {
         let formData = new FormData();
@@ -1200,6 +1222,14 @@ export async function viewer(fields, e) {
           }
         };
 
+        const onComplete = () => {
+          this.processQueue();
+          const hasPending = this.uploadJobs.some(j => j.status === 'pending');
+          if (this.uploadsInProgress === 0 && !hasPending) {
+            this.refreshDirectory(false, true);
+          }
+        };
+
         request.onload = () => {
           const job = this.uploadJobs.find((j) => j.id === jobId);
           try {
@@ -1212,19 +1242,13 @@ export async function viewer(fields, e) {
           } catch (_e) {
             if (job) job.status = 'error';
           }
-
-          // If all jobs done, refresh directory
-          if (this.uploadsInProgress === 0) {
-            this.refreshDirectory(false, true);
-          }
+          onComplete();
         };
 
         request.onerror = () => {
           const job = this.uploadJobs.find((j) => j.id === jobId);
           if (job) job.status = 'error';
-          if (this.uploadsInProgress === 0) {
-            this.refreshDirectory(false, true);
-          }
+          onComplete();
         };
 
         request.send(formData);
@@ -1236,8 +1260,10 @@ export async function viewer(fields, e) {
       },
       retryAllFailed() {
         this.uploadJobs.filter(j => j.status === 'error').forEach(job => {
-          this.retryUpload(job);
+          job.status = 'pending';
+          job.progress = 0;
         });
+        this.processQueue();
       },
       navigateFailed(direction) {
         const failedJobs = this.uploadJobs.filter(j => j.status === 'error');
@@ -1296,7 +1322,7 @@ export async function viewer(fields, e) {
     },
     computed: {
       uploadsInProgress() {
-        return this.uploadJobs.filter((j) => j.status === 'uploading').length;
+        return this.uploadJobs.filter((j) => j.status === 'uploading' || j.status === 'pending').length;
       },
       uploadsDone() {
         return this.uploadJobs.filter(j => j.status === 'done').length;
@@ -1304,6 +1330,10 @@ export async function viewer(fields, e) {
       uploadsFailed() {
         return this.uploadJobs.filter(j => j.status === 'error').length;
       },
+      overallProgress() {
+        if (!this.uploadJobs.length) return 0;
+        return this.uploadJobs.reduce((sum, j) => sum + j.progress, 0) / this.uploadJobs.length;
+      },
       acceptTypes() {
         if (fields.file_upload_mime_type_preset) {
           switch (fields.file_upload_mime_type_preset) {