@sl-material/sl-import 1.1.0-beta4 → 1.1.0-beta5

package/README.md

@@ -5,15 +5,17 @@
 ## 特性
 
 - **多种模板类型** - 内置 5 种预设模板，支持自定义配置
-- **文件分片上传** - 支持大文件分片上传，自动合并
+- **文件分片上传** - 支持大文件分片上传，自动合并，支持延迟上传
 - **多文件上传** - 支持批量文件上传，横向滚动列表展示
 - **上传时机控制** - 支持立即上传和延迟上传两种模式
+- **灵活文件校验** - 可选的文件数量和大小校验，不传则不校验
 - **品牌选择** - 支持静态数据或异步加载品牌列表
 - **图片比例选择** - 支持配置图片裁剪比例选项
 - **日期范围选择** - 支持月份和日期范围选择
+- **统一 Loading 样式** - 文件卡片和全局遮罩使用相同的渐变圆环动画
 - **纯原生实现** - 不依赖 Vue/React 等框架，可在任何环境使用
 - **TypeScript 支持** - 完整的类型定义
-- **国际化支持** - 内置多语言支持
+- **标准化国际化** - 支持 zh_CN、en_US、ja_JP、zh_HK、zh_TW、id 等语言
 
 ## 安装
 
@@ -108,22 +110,69 @@ ImportDialog.open({
 
 ```typescript
 ImportDialog.open({
-  title: "导入数据",
+  locale: "zh_CN" as I18nLocaleEnum,
+  type: ExportTypeEnum.excel,
   templateType: TemplateTypeEnum.BASE,
+  templateUrl: "/template/base_template.xlsx",
+  tips: ["提示信息 1", "提示信息 2"],
+  onConfirm: async (data) => {
+    return submitImportMock(data);
+    // 可以在这里进行额外的后处理
+  },
   uploadConfig: {
     multiple: true,
-    autoUpload: false, // 默认值，点击确定时上传
-    confirmLoading: true, // 显示确定按钮 loading（默认）
-    customUpload: async (file, onProgress) => {
-      // 如果文件数量超过限制，删除第一个文件
-      if (context.fileList.length > 5) {
-        context.removeFile(0);
+    confirmLoading: false,
+    maxFileSize: 1000,
+    // maxFiles: 2,
+    maxFileSizeUnit: "KB",
+    // 文件预处理函数：选择文件后立即调用
+    customUpload: async (file: File, context) => {
+      if (file.name.includes(",")) {
+        context?.removeFile(
+          context?.fileList.findIndex((f) => f.name === file.name),
+        );
       }
+      // 返回值会存储在 fileItem.response 中
+      return { file };
+    },
+  },
+});
+```
+
+### 文件校验配置
+
+```typescript
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    multiple: true,
+    // 不配置 maxFiles 和 maxFileSize，则不进行任何校验
+    customUpload: async (file, context, onProgress) => {
+      return { file };
+    },
+  },
+  onConfirm: async (data) => {
+    console.log("上传结果:", data);
+    return { success: true };
+  },
+});
+```
+
+```typescript
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    multiple: true,
+    maxFiles: 10, // 限制最多 10 个文件
+    maxFileSize: 50, // 限制单个文件最大 50MB
+    maxFileSizeUnit: "MB",
+    customUpload: async (file, context, onProgress) => {
       return { file };
     },
   },
   onConfirm: async (data) => {
-    // 此时文件已上传完成，data.files 包含上传结果
     console.log("上传结果:", data);
     return { success: true };
   },
@@ -150,7 +199,7 @@ ImportDialog.open({
 });
 ```
 
-### 分片上传（立即上传）
+### 分片上传（立即上传） 注意分片上传目前只支持单个文件上传
 
 ```typescript
 ImportDialog.open({
@@ -158,7 +207,7 @@ ImportDialog.open({
   templateType: TemplateTypeEnum.BASE,
   uploadConfig: {
     autoUpload: true, // 选择文件后立即开始上传
-    maxFileSize: 500,
+    maxFileSize: 500, // 可选：限制文件大小为 500MB
     maxFileSizeUnit: "MB",
     chunkedUpload: {
       initUpload: async (fileName, fileSize) => {
@@ -187,6 +236,58 @@ ImportDialog.open({
 });
 ```
 
+### 分片上传 点击确定上传
+
+````typescript
+ImportDialog.open({
+      type: ExportTypeEnum.excel,
+      title: "分片上传（延迟）",
+      templateType: TemplateTypeEnum.BASE,
+      tabs: [{ label: "分片延迟上传", key: "chunked-delayed" }],
+      tips: [
+        "1. 选择文件后不会立即上传",
+        "2. 点击确定按钮时才开始分片上传",
+        "3. autoUpload: false（默认值）",
+      ],
+      uploadTitle: "选择大文件",
+      uploadHint: "选择文件后点击确定开始分片上传",
+      acceptTypes: ".xlsx,.xls,.csv,.zip",
+      uploadConfig: {
+        maxFileSize: 500,
+        maxFileSizeUnit: "MB",
+        autoUpload: false, // 选择文件后不立即上传，等待点击确定
+        chunkedUpload: {
+          initUpload: async (fileName: string, fileSize: number) => {
+            const response = await initImportTask({ fileName, fileSize });
+            console.info("initResult>>>", response);
+            return {
+              uploadSessionId: response?.uploadSessionId,
+              partSize: response?.partSize,
+              totalParts: response?.totalParts,
+            };
+          },
+          getResumableConfig: (initResult) => ({
+            target: `/newProxy/basic-data-io/api/file/upload/part?uploadSessionId=${initResult.uploadSessionId}`,
+            headers: {
+              "TCSL-BP-TOKEN":
+                window.sessionStorage.getItem("token") || slyToken,
+            },
+            // query: { uploadSessionId: initResult.uploadSessionId },
+          }),
+          mergeChunks: async (uploadSessionId: string) => {
+            const response = await uploadFileMerge(uploadSessionId);
+
+            return response;
+          },
+        },
+      },
+      onConfirm: async (data) => {
+        console.info("openChunkedUploadDelayed>>>", data);
+        return { success: true, message: "导入成功" };
+      },
+    });
+    ```
+
 ### 带品牌选择的导入
 
 ```typescript
@@ -214,7 +315,7 @@ ImportDialog.open({
     return { success: true };
   },
 });
-```
+````
 
 ### 自定义日期范围
 
@@ -297,27 +398,28 @@ ImportDialog.open({
 
 所有上传相关配置统一放在 `uploadConfig` 对象中：
 
-| 参数              | 类型                                            | 默认值  | 说明                   |
-| ----------------- | ----------------------------------------------- | ------- | ---------------------- |
-| `autoUpload`      | `boolean`                                       | `false` | 是否立即上传文件       |
-| `multiple`        | `boolean`                                       | `false` | 是否支持多文件上传     |
-| `maxFiles`        | `number`                                        | `10`    | 最大文件数量           |
-| `maxFileSize`     | `number`                                        | `100`   | 单文件最大大小（数值） |
-| `maxFileSizeUnit` | `'KB' \| 'MB' \| 'GB'`                          | `'MB'`  | 文件大小单位           |
-| `customUpload`    | `(file, context?, onProgress?) => Promise<any>` | -       | 自定义上传函数         |
-| `chunkedUpload`   | `ChunkUploadStrategy`                           | -       | 分片上传策略配置       |
-| `confirmLoading`  | `boolean`                                       | `true`  | 确定按钮 loading 控制  |
-| `onFileChange`    | `(files: FileUploadItem[]) => void`             | -       | 文件列表变化回调       |
-| `onProgress`      | `(file, progress) => void`                      | -       | 上传进度回调           |
-| `onSuccess`       | `(file, response) => void`                      | -       | 上传成功回调           |
-| `onError`         | `(file, error) => void`                         | -       | 上传失败回调           |
-
-**文件大小配置说明**：
-
-- `maxFileSize` 和 `maxFileSizeUnit` 组合使用来限制文件大小
+| 参数              | 类型                                            | 默认值  | 说明                         |
+| ----------------- | ----------------------------------------------- | ------- | ---------------------------- |
+| `autoUpload`      | `boolean`                                       | `false` | 是否立即上传文件             |
+| `multiple`        | `boolean`                                       | `false` | 是否支持多文件上传           |
+| `maxFiles`        | `number`                                        | -       | 最大文件数量，不传则不校验   |
+| `maxFileSize`     | `number`                                        | -       | 单文件最大大小，不传则不校验 |
+| `maxFileSizeUnit` | `'KB' \| 'MB' \| 'GB'`                          | `'MB'`  | 文件大小单位                 |
+| `customUpload`    | `(file, context?, onProgress?) => Promise<any>` | -       | 自定义上传函数               |
+| `chunkedUpload`   | `ChunkUploadStrategy`                           | -       | 分片上传策略配置             |
+| `confirmLoading`  | `boolean`                                       | `true`  | 确定按钮 loading 控制        |
+| `onFileChange`    | `(files: FileUploadItem[]) => void`             | -       | 文件列表变化回调             |
+| `onProgress`      | `(file, progress) => void`                      | -       | 上传进度回调                 |
+| `onSuccess`       | `(file, response) => void`                      | -       | 上传成功回调                 |
+| `onError`         | `(file, error) => void`                         | -       | 上传失败回调                 |
+
+**文件校验配置说明**：
+
+- `maxFiles`：限制最大文件数量，不传递则不进行数量校验
+- `maxFileSize` 和 `maxFileSizeUnit` 组合使用来限制文件大小，不传递则不进行大小校验
 - 例如：`maxFileSize: 10, maxFileSizeUnit: 'KB'` 表示最大 10KB
 - 例如：`maxFileSize: 500, maxFileSizeUnit: 'MB'` 表示最大 500MB
-- 默认为 100MB
+- 校验参数完全可选，可根据需要灵活配置
 
 ##### 分片上传策略 (ChunkUploadStrategy)
 
@@ -369,13 +471,30 @@ interface Context {
 
 ### 国际化 (I18nLocaleEnum)
 
-| 语言     | 枚举值  |
-| -------- | ------- |
-| 简体中文 | `ZH_CN` |
-| 繁体中文 | `ZH_TW` |
-| 英语     | `EN_US` |
-| 日语     | `JA`    |
-| 印尼语   | `ID`    |
+| 语言             | 枚举值  |
+| ---------------- | ------- |
+| 简体中文         | `zh_CN` |
+| 繁體中文（香港） | `zh_HK` |
+| 繁體中文（臺灣） | `zh_TW` |
+| 英语（美国）     | `en_US` |
+| 日本语           | `ja_JP` |
+| 印尼语           | `id`    |
+
+**使用方式**：
+
+```typescript
+import { ImportDialog, I18nLocaleEnum } from "@sl-material/sl-import";
+
+ImportDialog.open({
+  locale: I18nLocaleEnum.ZH_CN, // 简体中文
+  // locale: I18nLocaleEnum.ZH_HK, // 繁體中文（香港）
+  // locale: I18nLocaleEnum.ZH_TW, // 繁體中文（臺灣）
+  // locale: I18nLocaleEnum.EN_US, // 英语（美国）
+  // locale: I18nLocaleEnum.JA_JP, // 日本语
+  // locale: I18nLocaleEnum.ID,    // 印尼语
+  // ... 其他配置
+});
+```
 
 ### 类型定义
 
@@ -422,6 +541,53 @@ interface FileUploadItem {
 }
 ```
 
+## 最新特性
+
+### 🎯 灵活的文件校验
+
+文件校验参数完全可选，可根据需要灵活配置：
+
+```typescript
+// 不进行任何校验
+uploadConfig: {
+  multiple: true,
+  customUpload: myUploadFunction
+}
+
+// 完整校验配置
+uploadConfig: {
+  multiple: true,
+  maxFiles: 10,        // 限制最多 10 个文件
+  maxFileSize: 50,     // 限制单个文件最大 50MB
+  maxFileSizeUnit: "MB",
+  customUpload: myUploadFunction
+}
+```
+
+### 🌍 标准化国际化
+
+支持 6 种语言，使用标准的语言代码格式：
+
+- `zh_CN` - 简体中文
+- `zh_HK` - 繁體中文（香港）
+- `zh_TW` - 繁體中文（臺灣）
+- `en_US` - 英语（美国）
+- `ja_JP` - 日本语
+- `id` - 印尼语
+
+### ⚡ 统一 Loading 动画
+
+文件卡片和全局遮罩使用相同的渐变圆环动画，视觉效果统一且流畅。
+
+### 🔄 分片上传延迟模式
+
+支持分片上传的延迟模式，文件选择后不会立即上传，用户可以：
+
+1. 选择多个文件
+2. 预览文件列表
+3. 手动触发上传或删除文件
+4. 点击确认按钮开始上传
+
 ## UMD 使用方式
 
 ```html
@@ -438,6 +604,30 @@ interface FileUploadItem {
 
 > **注意**：UMD 版本同样已内联 CSS，无需额外引入样式文件。
 
+## 更新日志
+
+### v1.1.0-beta4
+
+#### 🚀 新增特性
+
+- **灵活文件校验**：`maxFiles` 和 `maxFileSize` 参数改为可选，不传则不校验
+- **标准化国际化**：统一语言代码格式为 `zh_CN`、`en_US`、`ja_JP` 等
+- **新增语言支持**：添加 `zh_HK`（繁體中文-香港）支持
+- **统一 Loading 样式**：文件卡片和全局遮罩使用相同的渐变圆环动画
+- **分片上传延迟模式**：支持文件选择后延迟上传，用户可手动控制上传时机
+
+#### 🐛 修复问题
+
+- 修复 loading 动画跳动问题
+- 修复分片上传延迟模式下的配置问题
+- 优化文件校验逻辑的时机和顺序
+
+#### 💎 优化改进
+
+- 所有硬编码中文提示改为国际化调用
+- 优化文件大小单位配置，支持 KB、MB、GB
+- 改进错误提示信息的准确性和友好性
+
 ## License
 
 MIT

package/index.d.ts

@@ -447,11 +447,11 @@ declare namespace types {
 export { types }
 
 export declare interface UploadConfig {
-    /** 最大文件数量，默认 10 */
+    /** 最大文件数量，不传则不校验 */
     maxFiles?: number;
     /** 是否支持多文件上传，默认 false */
     multiple?: boolean;
-    /** 单文件最大大小，默认 100 */
+    /** 单文件最大大小，不传则不校验 */
     maxFileSize?: number;
     /** 文件大小单位，默认 'MB' */
     maxFileSizeUnit?: FileSizeUnit;

package/package.json

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