@sl-material/sl-import 1.0.0 → 1.1.0-beta1

package/sl-import.es.js

@@ -1388,7 +1388,6 @@ function getImportDialogStyles() {
       overflow-y: hidden;
       padding: 0px 0px 12px 0px;
       scrollbar-width: thin;
-      // scrollbar-color: #d9d9d9 transparent;
     }
 
     .import-dialog-vanilla-file-list::-webkit-scrollbar {
@@ -1428,22 +1427,10 @@ function getImportDialogStyles() {
       width:100%;
     }
 
-    // .import-dialog-vanilla-file-item:hover {
-    //   background: #FFF7E6;
-    // }
-
-    // .import-dialog-vanilla-file-item.status-success {
-    //   background: #FFFBF0;
-    // }
-
     .import-dialog-vanilla-file-item.status-error {
-      background: #FFF2F0;
-    }
-
-    .import-dialog-vanilla-file-item.status-uploading {
-      background: #FFFBF0;
+      background: var(--sl-color-danger-light-9);
+      border:1px solid var(--sl-color-error);
     }
-
     .import-dialog-vanilla-file-icon {
       width: 18px;
       height: 18px;
@@ -1479,19 +1466,64 @@ function getImportDialogStyles() {
       align-items: center;
       gap: 4px;
       font-size: 12px;
-      color: var(--sl-text-color-secondary);
+      color: var(--sl-text-color-thridary);
     }
 
-    .import-dialog-vanilla-file-progress-text {
-      font-size: 12px;
-      color: #1890FF;
-    }
 
     .import-dialog-vanilla-file-error-text {
       font-size: 12px;
       color: var(--sl-color-error);
     }
 
+    /* 上传中状态的 loading 图标 */
+    .import-dialog-vanilla-file-loading-icon {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .loading-spinner {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg at 50% 50%, rgba(24, 144, 255, 0.1) 0%, #1890ff 75%, rgba(24, 144, 255, 0) 100%);
+      animation: spin 1s linear infinite;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .loading-spinner::before {
+      content: '';
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background-color: #fff;
+      position: absolute;
+    }
+
+    .loading-spinner.active {
+      opacity: 1;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    /* 上传中状态的文件信息向右偏移 */
+    .import-dialog-vanilla-file-item.status-uploading .import-dialog-vanilla-file-info {
+      margin-left: 32px;
+    }
+
     /* 删除按钮 - 默认隐藏，hover时显示 */
     .import-dialog-vanilla-file-remove-btn {
       position: absolute;
@@ -2816,10 +2848,31 @@ class ImportDialogRenderer {
     if (isError) {
       metaContent = `<span class="import-dialog-vanilla-file-error-text">${t("uploadFailed")}</span>`;
     } else if (isUploading) {
-      metaContent = `<span class="import-dialog-vanilla-file-progress-text">${t("uploading")}...</span><span>·</span><span>${fileSize}</span>`;
+      metaContent = `<span>${t("uploading")}...</span><span>·</span><span>${fileSize}</span>`;
     } else {
       metaContent = `<span>${fileExt}</span><span>·</span><span>${fileSize}</span>`;
     }
+    if (isUploading) {
+      return `
+        <div class="import-dialog-vanilla-file-item ${statusClass} ${widthClass}" data-file-id="${fileItem.id}">
+          <div class="import-dialog-vanilla-file-loading-icon">
+            <div class="loading-spinner active"></div>
+          </div>
+          <div class="import-dialog-vanilla-file-remove-btn" data-file-index="${index}" title="删除">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="8" cy="8" r="8" fill="rgba(0,0,0)"/>
+              <path d="M5 5L11 11M11 5L5 11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <div class="import-dialog-vanilla-file-info">
+            <div class="import-dialog-vanilla-file-name" title="${fileItem.name}">${fileItem.name}</div>
+            <div class="import-dialog-vanilla-file-meta">
+              ${metaContent}
+            </div>
+          </div>
+        </div>
+      `;
+    }
     return `
       <div class="import-dialog-vanilla-file-item ${statusClass} ${widthClass}" data-file-id="${fileItem.id}">
         <div class="import-dialog-vanilla-file-icon">
@@ -2918,6 +2971,7 @@ class ChunkedUploader {
         fileItem.file.name,
         fileItem.file.size
       );
+      console.info("upload>>>分片结果", initResult);
       fileItem.uploadSessionId = initResult.uploadSessionId;
       this.currentFileItem = fileItem;
       this.initResumable(initResult);
@@ -2941,6 +2995,7 @@ class ChunkedUploader {
    * 初始化Resumable实例
    */
   initResumable(initResult) {
+    console.log("[分片上传] 初始化分片上传...", initResult);
     if (this.resumable) {
       this.resumable.cancel();
     }
@@ -2959,6 +3014,7 @@ class ChunkedUploader {
       forceChunkSize: true
     };
     const finalConfig = { ...defaultConfig, ...customConfig };
+    console.info("finalConfig>>>分片上传配置", finalConfig);
     this.resumable = new Resumable(finalConfig);
     this.bindResumableEvents();
   }
@@ -2969,6 +3025,7 @@ class ChunkedUploader {
     this.resumable.on("progress", () => {
       var _a, _b, _c, _d;
       const progress = Math.floor(this.resumable.progress() * 100);
+      console.log(`[Resumable分片上传] 进度: ${progress}%`);
       if (this.currentFileItem) {
         this.currentFileItem.progress = Math.min(progress, 90);
         (_b = (_a = this.callbacks).onProgress) == null ? void 0 : _b.call(
@@ -2980,6 +3037,7 @@ class ChunkedUploader {
       (_d = (_c = this.callbacks).onUpdate) == null ? void 0 : _d.call(_c);
     });
     this.resumable.on("fileSuccess", () => {
+      console.log("[Resumable分片上传] 文件上传成功");
       this.handleResumableComplete();
     });
     this.resumable.on("error", (message) => {
@@ -2987,6 +3045,7 @@ class ChunkedUploader {
       this.handleResumableError(message);
     });
     this.resumable.on("fileAdded", () => {
+      console.info("fileAdded>>>开始上传");
       this.resumable.upload();
     });
   }
@@ -3005,6 +3064,7 @@ class ChunkedUploader {
         this.currentFileItem.progress = 100;
       }
       this.uploadCompleteResolve(mergeResult);
+      console.log("合并分片成功>>>uploadCompleteResolve", mergeResult);
       this.cleanup();
     } catch (error) {
       const err = error instanceof Error ? error : new Error(String(error));
@@ -3070,9 +3130,6 @@ class ImportDialogUploader {
     __publicField(this, "callbacks");
     // 分片上传器实例
     __publicField(this, "chunkedUploader", null);
-    // 并发上传队列
-    __publicField(this, "uploadQueue", []);
-    __publicField(this, "activeUploads", 0);
     // 上传状态
     __publicField(this, "uploadFileList", []);
     //上传文件列表
@@ -3105,12 +3162,6 @@ class ImportDialogUploader {
       });
     }
   }
-  /**
-   * 获取并发限制数
-   */
-  get concurrentLimit() {
-    return this.config.concurrentLimit != null ? this.config.concurrentLimit : 3;
-  }
   /**
    * 判断是否应该使用分片上传
    * 条件：配置了chunkedUpload 且 是单文件模式
@@ -3134,14 +3185,12 @@ class ImportDialogUploader {
     this.isUploading = false;
     this.uploadMessage = "";
     this.uploadMessageType = "info";
-    this.uploadQueue = [];
-    this.activeUploads = 0;
   }
   /**
    * 文件上传之前的校验 选择文件时调用
    */
   beforeUpload(files) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const fileArray = Array.isArray(files) ? files : [files];
     if (!fileArray.length) {
       (_b = (_a = this.callbacks).onMessage) == null ? void 0 : _b.call(_a, "请选择文件", "warning");
@@ -3187,9 +3236,27 @@ class ImportDialogUploader {
     }
     (_h = (_g = this.callbacks).onUpdate) == null ? void 0 : _h.call(_g);
     (_j = (_i = this.callbacks).onFileChange) == null ? void 0 : _j.call(_i, this.uploadFileList);
-    this.processFilesWithCustomUpload();
+    if (this.shouldUseChunkedUpload()) {
+      if (((_k = this.config.uploadConfig) == null ? void 0 : _k.autoUpload) !== false) {
+        this.processChunkedUpload();
+      }
+    } else {
+      this.processFilesWithCustomUpload();
+    }
     return true;
   }
+  /**
+   * 处理分片上传
+   * 仅在配置了 chunkedUpload 时调用
+   */
+  async processChunkedUpload() {
+    const pendingFiles = this.uploadFileList.filter(
+      (f) => f.status === "pending"
+    );
+    for (const fileItem of pendingFiles) {
+      await this.uploadSingleFile(fileItem);
+    }
+  }
   /**
    * 使用 customUpload 预处理文件
    * 仅在配置了 customUpload 时才调用
@@ -3268,12 +3335,6 @@ class ImportDialogUploader {
         (_c = (_b = this.callbacks).onMessage) == null ? void 0 : _c.call(_b, "文件正在上传中，无法删除", "warning");
         return false;
       }
-      const queueIndex = this.uploadQueue.findIndex(
-        (q) => q.id === fileItem.id
-      );
-      if (queueIndex !== -1) {
-        this.uploadQueue.splice(queueIndex, 1);
-      }
       this.uploadFileList.splice(index, 1);
       this.fileList.splice(index, 1);
     } else {
@@ -3286,7 +3347,6 @@ class ImportDialogUploader {
           return false;
         }
       }
-      this.uploadQueue = [];
       this.uploadFileList = [];
       this.fileList = [];
     }
@@ -3300,38 +3360,12 @@ class ImportDialogUploader {
     (_i = (_h = this.callbacks).onUpdate) == null ? void 0 : _i.call(_h);
     return true;
   }
-  /**
-   * 将文件加入上传队列并启动处理
-   */
-  enqueueUpload(fileItems) {
-    const newItems = fileItems.filter(
-      (item) => !this.uploadQueue.some((q) => q.id === item.id)
-    );
-    this.uploadQueue.push(...newItems);
-    this.processUploadQueue();
-  }
-  /**
-   * 处理上传队列（支持并发）
-   */
-  processUploadQueue() {
-    while (this.uploadQueue.length > 0 && this.activeUploads < this.concurrentLimit) {
-      const fileItem = this.uploadQueue.shift();
-      if (fileItem.status !== "pending") {
-        continue;
-      }
-      this.activeUploads++;
-      this.uploadSingleFile(fileItem).finally(() => {
-        this.activeUploads--;
-        this.processUploadQueue();
-      });
-    }
-  }
   /**
    * 单个文件分片上传
    * @param fileItem
    */
   async uploadSingleFile(fileItem) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     fileItem.status = "uploading";
     fileItem.progress = 0;
     this.isUploading = true;
@@ -3341,16 +3375,13 @@ class ImportDialogUploader {
       fileItem.status = "success";
       fileItem.progress = 100;
       (_d = (_c = this.callbacks).onUploadSuccess) == null ? void 0 : _d.call(_c, fileItem, fileItem.response);
+      return fileItem.response;
     } catch (error) {
       fileItem.status = "error";
       fileItem.errorMessage = error instanceof Error ? error.message : "上传失败";
       (_f = (_e = this.callbacks).onUploadError) == null ? void 0 : _f.call(_e, fileItem, error);
+      throw error;
     }
-    this.isUploading = this.uploadFileList.some(
-      (f) => f.status === "uploading"
-    );
-    (_h = (_g = this.callbacks).onUpdate) == null ? void 0 : _h.call(_g);
-    this.updateOverallProgress();
   }
   /**
    * 分片上传
@@ -3362,21 +3393,32 @@ class ImportDialogUploader {
     return await this.chunkedUploader.upload(fileItem);
   }
   /**
-   * 手动触发分片上传（仅用于分片上传场景）
+   * 手动触发上传（用于延迟上传场景）
+   * 分片上传：直接调用 uploadSingleFile 并等待完成
+   * 普通上传：已在选择文件时通过 customUpload 处理完成
    */
   async startUpload() {
-    if (this.shouldUseChunkedUpload()) {
-      await this.startChunkedUploadFiles();
+    if (!this.shouldUseChunkedUpload()) {
+      return;
     }
-  }
-  /**
-   * 启动分片上传
-   */
-  async startChunkedUploadFiles() {
     const pendingFiles = this.uploadFileList.filter(
       (f) => f.status === "pending"
     );
-    this.enqueueUpload(pendingFiles);
+    if (pendingFiles.length === 0) {
+      return;
+    }
+    const results = [];
+    for (const fileItem of pendingFiles) {
+      try {
+        const result = await this.uploadSingleFile(fileItem);
+        if (result) {
+          results.push(result);
+        }
+      } catch (error) {
+        console.error(`文件 ${fileItem.file.name} 上传失败:`, error);
+      }
+    }
+    return results;
   }
   /**
    * 暂停上传（仅分片上传支持）
@@ -3398,8 +3440,6 @@ class ImportDialogUploader {
   cancelUpload() {
     var _a, _b, _c;
     (_a = this.chunkedUploader) == null ? void 0 : _a.cancel();
-    this.uploadQueue = [];
-    this.activeUploads = 0;
     this.isUploading = false;
     this.uploadMessage = "上传已取消";
     this.uploadMessageType = "info";
@@ -3969,7 +4009,8 @@ const _ImportDialog = class _ImportDialog {
         this.updateModal();
       }
       try {
-        await this.uploader.startUpload();
+        const chunkResult = await this.uploader.startUpload();
+        console.log("[分片上传] 分片上传结果:", chunkResult);
       } catch (error) {
         console.error("[ImportDialog] 上传失败:", error);
         this.showMessage("上传失败，请重试", "error");