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

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,6 +317,70 @@ ImportDialog.open({
 });
 ```
 
+### 使用文件操作功能
+
+```typescript
+import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
+
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    autoUpload: false,
+    customUpload: async (file, context) => {
+      // 如果文件数量超过限制，删除第一个文件
+      if (context.fileList.length > 5) {
+        context.removeFile(0);
+        console.log("已删除第一个文件");
+      }
+
+      // 正常上传逻辑（可选择是否使用进度回调）
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      return response.json();
+    },
+  },
+});
+```
+
+### 不使用进度回调的简化写法
+
+```typescript
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    autoUpload: false,
+    customUpload: async (file, context, _onProgress) => {
+      // 检查当前文件列表
+      console.log("当前文件列表:", context.fileList);
+
+      // 如果文件数量超过限制，删除第一个文件
+      if (context.fileList.length > 5) {
+        context.removeFile(0);
+      }
+
+      // 简单上传，不处理进度
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      return response.json();
+    },
+  },
+});
+```
+
 ### 延迟上传（点击确定时上传）
 
 ```typescript
@@ -311,6 +389,7 @@ ImportDialog.open({
   templateType: TemplateTypeEnum.BASE,
   uploadConfig: {
     autoUpload: false, // 默认值，点击确定时上传
+    confirmLoading: true, // 显示确定按钮 loading（默认）
     customUpload: async (file, onProgress) => {
       // 上传逻辑
     },
@@ -323,6 +402,26 @@ ImportDialog.open({
 });
 ```
 
+### 禁用确定按钮 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 };
+  },
+});
+```
+
 ### 分片上传（立即上传）
 
 ```typescript

package/index.d.ts

@@ -438,7 +438,12 @@ export declare interface UploadConfig {
     /** 单文件最大大小（字节），默认 100MB */
     maxFileSize?: number;
     /** 自定义上传函数（普通上传时使用）主要用于自定义上传参数 */
-    customUpload?: (file: File, onProgress?: (progress: number) => void) => Promise<any>;
+    customUpload?: (file: File, context?: {
+        /** 当前文件列表 */
+        fileList: FileUploadItem[];
+        /** 删除指定索引的文件 */
+        removeFile: (index: number) => void;
+    }, onProgress?: (progress: number) => void) => Promise<any>;
     /**
      * 分片上传配置
      * 配置此项后自动启用分片上传（仅单文件模式生效）
@@ -451,6 +456,13 @@ export declare interface UploadConfig {
      * 适用于 customUpload 和 chunkedUpload
      */
     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-beta10",
   "description": "导入组件 - 支持批量导入文件，提供多种模板配置",
   "main": "./sl-import.cjs.js",
   "module": "./sl-import.es.js",