@sl-material/sl-import 1.1.0-beat0 → 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;
+      background: var(--sl-color-danger-light-9);
+      border:1px solid var(--sl-color-error);
     }
-
-    .import-dialog-vanilla-file-item.status-uploading {
-      background: #FFFBF0;
-    }
-
     .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">
@@ -2919,6 +2972,7 @@ class ChunkedUploader {
         fileItem.file.size
       );
       console.info("upload>>>分片结果", initResult);
+      fileItem.uploadSessionId = initResult.uploadSessionId;
       this.currentFileItem = fileItem;
       this.initResumable(initResult);
       this.resumable.addFile(fileItem.file);
@@ -3010,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));
@@ -3135,7 +3190,7 @@ class ImportDialogUploader {
    * 文件上传之前的校验 选择文件时调用
    */
   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");
@@ -3181,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 时才调用
@@ -3292,7 +3365,7 @@ class ImportDialogUploader {
    * @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;
@@ -3302,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();
   }
   /**
    * 分片上传
@@ -3337,9 +3407,18 @@ class ImportDialogUploader {
     if (pendingFiles.length === 0) {
       return;
     }
+    const results = [];
     for (const fileItem of pendingFiles) {
-      await this.uploadSingleFile(fileItem);
+      try {
+        const result = await this.uploadSingleFile(fileItem);
+        if (result) {
+          results.push(result);
+        }
+      } catch (error) {
+        console.error(`文件 ${fileItem.file.name} 上传失败:`, error);
+      }
     }
+    return results;
   }
   /**
    * 暂停上传（仅分片上传支持）
@@ -3930,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");