@sl-material/sl-import 1.0.0-beta0 → 1.0.0-beta11

package/README.md

@@ -174,14 +174,15 @@ const handleImport = async () => {
 
 所有上传相关配置统一放在 `uploadConfig` 对象中：
 
-| 参数            | 类型                                  | 默认值      | 说明                    |
-| --------------- | ------------------------------------- | ----------- | ----------------------- |
-| `autoUpload`    | `boolean`                             | `false`     | 是否立即上传文件        |
-| `multiple`      | `boolean`                             | `false`     | 是否支持多文件上传      |
-| `maxFiles`      | `number`                              | `10`        | 最大文件数量            |
-| `maxFileSize`   | `number`                              | `104857600` | 单文件最大大小（100MB） |
-| `customUpload`  | `(file, onProgress?) => Promise<any>` | -           | 自定义上传函数          |
-| `chunkedUpload` | `ChunkUploadStrategy`                 | -           | 分片上传策略配置        |
+| 参数             | 类型                                            | 默认值      | 说明                    |
+| ---------------- | ----------------------------------------------- | ----------- | ----------------------- |
+| `autoUpload`     | `boolean`                                       | `false`     | 是否立即上传文件        |
+| `multiple`       | `boolean`                                       | `false`     | 是否支持多文件上传      |
+| `maxFiles`       | `number`                                        | `10`        | 最大文件数量            |
+| `maxFileSize`    | `number`                                        | `104857600` | 单文件最大大小（100MB） |
+| `customUpload`   | `(file, context?, onProgress?) => Promise<any>` | -           | 自定义上传函数          |
+| `chunkedUpload`  | `ChunkUploadStrategy`                           | -           | 分片上传策略配置        |
+| `confirmLoading` | `boolean`                                       | `true`      | 确定按钮 loading 控制   |
 
 ##### 分片上传策略 (ChunkUploadStrategy)
 
@@ -193,6 +194,19 @@ interface ChunkUploadStrategy {
 }
 ```
 
+##### 文件操作上下文
+
+`customUpload` 函数的第三个参数，提供基本的文件操作能力：
+
+```typescript
+interface Context {
+  /** 当前文件列表 */
+  fileList: FileUploadItem[];
+  /** 删除指定索引的文件 */
+  removeFile: (index: number) => void;
+}
+```
+
 #### 回调函数
 
 | 参数               | 类型                              | 说明                                |
@@ -303,20 +317,72 @@ ImportDialog.open({
 });
 ```
 
-### 延迟上传（点击确定时上传）
+### 使用文件操作功能
 
 ```typescript
+import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
+
 ImportDialog.open({
   title: "导入数据",
   templateType: TemplateTypeEnum.BASE,
   uploadConfig: {
+    autoUpload: false,
+    customUpload: async (file, context) => {
+      // 如果文件数量超过限制，删除第一个文件
+      console.info("file", file, "context", context);
+      return {
+        file,
+      };
+    },
+  },
+  onConfirm: async (data) => {
+    // 此时文件已上传完成，data.files 包含上传结果
+    console.log("上传结果:", data);
+    return { success: true };
+  },
+});
+```
+
+### 多文件上传
+
+```typescript
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    multiple: true,
     autoUpload: false, // 默认值，点击确定时上传
+    confirmLoading: true, // 显示确定按钮 loading（默认）
     customUpload: async (file, onProgress) => {
-      // 上传逻辑
+      // 如果文件数量超过限制，删除第一个文件
+      if (context.fileList.length > 5) {
+        context.removeFile(0);
+      }
+      return { file };
     },
   },
   onConfirm: async (data) => {
     // 此时文件已上传完成，data.files 包含上传结果
+    console.log("上传结果:", data);
+    return { success: true };
+  },
+});
+```
+
+### 禁用确定按钮 Loading
+
+```typescript
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    autoUpload: false,
+    confirmLoading: false, // 不显示确定按钮 loading
+    customUpload: async (file, onProgress) => {
+      // 上传逻辑
+    },
+  },
+  onConfirm: async (data) => {
     console.log("上传结果:", data.files);
     return { success: true };
   },
@@ -330,7 +396,7 @@ ImportDialog.open({
   title: "大文件上传",
   templateType: TemplateTypeEnum.BASE,
   uploadConfig: {
-    autoUpload: true,
+    autoUpload: false,
     maxFileSize: 500 * 1024 * 1024, // 500MB
     chunkedUpload: {
       initUpload: async (params) => {
@@ -359,59 +425,6 @@ ImportDialog.open({
 });
 ```
 
-### 分片上传（延迟上传）
-
-```typescript
-ImportDialog.open({
-  title: "大文件上传",
-  templateType: TemplateTypeEnum.BASE,
-  uploadConfig: {
-    autoUpload: false, // 延迟上传
-    maxFileSize: 500 * 1024 * 1024,
-    chunkedUpload: {
-      // 分片上传配置同上
-    },
-  },
-  onConfirm: async (data) => {
-    // 点击确定时执行分片上传，data.files 包含合并后的结果
-    console.log("分片上传完成:", data.files);
-    return { success: true };
-  },
-});
-```
-
-### 多文件上传
-
-```typescript
-ImportDialog.open({
-  title: "批量上传文件",
-  templateType: TemplateTypeEnum.BASE,
-  uploadConfig: {
-    multiple: true,
-    maxFiles: 20,
-    autoUpload: true,
-    customUpload: async (file, onProgress) => {
-      // 自定义上传逻辑
-      const formData = new FormData();
-      formData.append("file", file);
-
-      const xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener("progress", (e) => {
-        if (e.lengthComputable) {
-          onProgress?.(Math.round((e.loaded / e.total) * 100));
-        }
-      });
-
-      xhr.open("POST", "/api/upload");
-      await xhr.send(formData);
-    },
-  },
-  onUploadProgress: (file, progress) => {
-    console.log(`${file.name}: ${progress}%`);
-  },
-});
-```
-
 ### 带品牌选择的导入
 
 ```typescript

package/index.d.ts

@@ -437,20 +437,41 @@ export declare interface UploadConfig {
     multiple?: boolean;
     /** 单文件最大大小（字节），默认 100MB */
     maxFileSize?: number;
-    /** 自定义上传函数（普通上传时使用）主要用于自定义上传参数 */
-    customUpload?: (file: File, onProgress?: (progress: number) => void) => Promise<any>;
+    /**
+     * 文件预处理函数
+     * 在选择文件后立即调用，用于：
+     * - 二次加工上传参数
+     * - 自定义校验逻辑
+     * - 预上传处理（如获取签名URL等）
+     *
+     * @param file 原始文件
+     * @param context 上下文信息
+     * @returns 返回值会存储在 fileItem.response 中，点击确定时可获取
+     */
+    customUpload?: (file: File, context?: {
+        /** 当前文件列表 */
+        fileList: FileUploadItem[];
+        /** 删除指定索引的文件 */
+        removeFile: (index: number) => void;
+    }, onProgress?: (progress: number) => void) => Promise<any>;
     /**
      * 分片上传配置
      * 配置此项后自动启用分片上传（仅单文件模式生效）
      */
     chunkedUpload?: ChunkedUploadConfig;
     /**
-     * 上传时机控制
-     * - true: 选择文件后立即上传（默认）
-     * - false: 点击确定时才开始上传
-     * 适用于 customUpload 和 chunkedUpload
+     * 断点续传控制（仅分片上传时生效）
+     * - true: 启用断点续传，自动恢复未完成的上传
+     * - false: 不启用断点续传（默认）
      */
     autoUpload?: boolean;
+    /**
+     * 确定按钮 loading 控制
+     * - true: 点击确定时显示 loading 状态（默认）
+     * - false: 点击确定时不显示 loading 状态
+     * 主要用于延迟上传场景，控制上传过程中的 UI 反馈
+     */
+    confirmLoading?: boolean;
 }
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sl-material/sl-import",
-  "version": "1.0.0-beta0",
+  "version": "1.0.0-beta11",
   "description": "导入组件 - 支持批量导入文件，提供多种模板配置",
   "main": "./sl-import.cjs.js",
   "module": "./sl-import.es.js",