@sl-material/sl-import 1.1.0-beta3 → 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,25 +199,26 @@ ImportDialog.open({
 });
 ```
 
-### 分片上传（立即上传）
+### 分片上传（立即上传） 注意分片上传目前只支持单个文件上传
 
 ```typescript
 ImportDialog.open({
   title: "大文件上传",
   templateType: TemplateTypeEnum.BASE,
   uploadConfig: {
-    autoUpload: false,
-    maxFileSize: 500 * 1024 * 1024, // 500MB
+    autoUpload: true, // 选择文件后立即开始上传
+    maxFileSize: 500, // 可选：限制文件大小为 500MB
+    maxFileSizeUnit: "MB",
     chunkedUpload: {
-      initUpload: async (params) => {
+      initUpload: async (fileName, fileSize) => {
         const response = await fetch("/api/upload/init", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(params),
+          body: JSON.stringify({ fileName, fileSize }),
         });
         return response.json();
       },
-      getResumableOptions: (initResult) => ({
+      getResumableConfig: (initResult) => ({
         target: "/api/upload/chunk",
         headers: {
           Authorization: `Bearer ${token}`,
@@ -186,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
@@ -213,7 +315,7 @@ ImportDialog.open({
     return { success: true };
   },
 });
-```
+````
 
 ### 自定义日期范围
 
@@ -296,15 +398,28 @@ ImportDialog.open({
 
 所有上传相关配置统一放在 `uploadConfig` 对象中：
 
-| 参数             | 类型                                            | 默认值      | 说明                    |
-| ---------------- | ----------------------------------------------- | ----------- | ----------------------- |
-| `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 控制   |
+| 参数              | 类型                                            | 默认值  | 说明                         |
+| ----------------- | ----------------------------------------------- | ------- | ---------------------------- |
+| `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
+- 校验参数完全可选，可根据需要灵活配置
 
 ##### 分片上传策略 (ChunkUploadStrategy)
 
@@ -356,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,    // 印尼语
+  // ... 其他配置
+});
+```
 
 ### 类型定义
 
@@ -409,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
@@ -425,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

@@ -60,6 +60,8 @@ export declare enum ExportTypeEnum {
     excel = "excel"
 }
 
+declare type FileSizeUnit = "KB" | "MB" | "GB";
+
 export declare interface FileUploadItem {
     id: string;
     file: File;
@@ -89,11 +91,12 @@ export declare type I18nLocale = I18nLocaleEnum;
  * 支持的语言枚举
  */
 export declare enum I18nLocaleEnum {
-    ZH_CN = "zh-CN",// 中文（简体）
-    ZH_TW = "zh-TW",// 中文（繁体）
-    JA = "ja",// 日语
-    ID = "id",// 印尼语
-    EN_US = "en-US"
+    ZH_CN = "zh_CN",// 简体中文
+    EN_US = "en_US",// 英语（美国）
+    JA_JP = "ja_JP",// 日语（日本）
+    ZH_HK = "zh_HK",// 繁體中文（香港）
+    ZH_TW = "zh_TW",// 繁體中文（臺灣）
+    ID = "id"
 }
 
 export declare interface ImageRatioOption {
@@ -282,11 +285,23 @@ export declare interface LocaleMessages {
     startDate: string;
     endDate: string;
     to: string;
+    pleaseSelectFile: string;
+    maxFilesLimit: string;
+    fileFormatNotSupported: string;
+    fileSizeExceeded: string;
     fileTypeError: string;
     fileSizeError: string;
     uploadFailed: string;
+    uploadFailedRetry: string;
     uploadSuccess: string;
     uploading: string;
+    processingFailed: string;
+    fileUploadingCannotDelete: string;
+    filesUploadingCannotClear: string;
+    filesUploading: string;
+    filesUploadFailed: string;
+    waitForUploadComplete: string;
+    chunkedUploadConfigRequired: string;
     uploadTitleBase: string;
     uploadTitleTemplate1: string;
     uploadTitleTemplate2: string;
@@ -414,6 +429,7 @@ declare namespace types {
         ImageRatioOption,
         ImportFormData,
         FileUploadStatus,
+        FileSizeUnit,
         FileUploadItem,
         ChunkUploadInitResult,
         ResumableConfig,
@@ -431,12 +447,14 @@ declare namespace types {
 export { types }
 
 export declare interface UploadConfig {
-    /** 最大文件数量，默认 10 */
+    /** 最大文件数量，不传则不校验 */
     maxFiles?: number;
     /** 是否支持多文件上传，默认 false */
     multiple?: boolean;
-    /** 单文件最大大小（字节），默认 100MB */
+    /** 单文件最大大小，不传则不校验 */
     maxFileSize?: number;
+    /** 文件大小单位，默认 'MB' */
+    maxFileSizeUnit?: FileSizeUnit;
     /**
      * 文件预处理函数
      * 在选择文件后立即调用，用于：

package/package.json

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