@sl-material/sl-import 1.0.0-beta0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 @sl-material/sl-import
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,486 @@
+# @sl-material/sl-import
+
+批量导入弹窗组件，支持多种导入模板配置、文件分片上传、品牌选择、图片比例选择等功能。
+
+## 特性
+
+- **多种模板类型** - 内置 5 种预设模板，支持自定义配置
+- **文件分片上传** - 支持大文件分片上传，自动合并
+- **多文件上传** - 支持批量文件上传，横向滚动列表展示
+- **上传时机控制** - 支持立即上传和延迟上传两种模式
+- **品牌选择** - 支持静态数据或异步加载品牌列表
+- **图片比例选择** - 支持配置图片裁剪比例选项
+- **日期范围选择** - 支持月份和日期范围选择
+- **纯原生实现** - 不依赖 Vue/React 等框架，可在任何环境使用
+- **TypeScript 支持** - 完整的类型定义
+- **国际化支持** - 内置多语言支持
+
+## 安装
+
+```bash
+npm install @sl-material/sl-import
+# 或
+yarn add @sl-material/sl-import
+# 或
+pnpm add @sl-material/sl-import
+```
+
+## 使用方式
+
+### ES 模块
+
+```typescript
+import { ImportDialog } from "@sl-material/sl-import";
+```
+
+### CommonJS
+
+```typescript
+const { ImportDialog } = require("@sl-material/sl-import");
+```
+
+> **注意**：CSS 样式已自动内联到 JS 文件中，无需手动导入 CSS 文件。
+
+## 快速开始
+
+### 基础使用
+
+```typescript
+import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
+
+// 使用静态方法（推荐）
+try {
+  const result = await ImportDialog.open({
+    title: "批量导入",
+    templateType: TemplateTypeEnum.BASE,
+    tips: ["提示信息 1", "提示信息 2"],
+    onConfirm: async (data) => {
+      console.log("导入数据:", data);
+      return { success: true };
+    },
+  });
+  console.log("导入成功:", result);
+} catch (error) {
+  console.log("用户取消导入");
+}
+```
+
+### 多文件导入
+
+```typescript
+import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
+
+// 使用静态方法（推荐）
+try {
+  const result = await ImportDialog.open({
+    title: "批量导入",
+    templateType: TemplateTypeEnum.BASE,
+    tips: ["提示信息 1", "提示信息 2"],
+     uploadConfig: {
+        multiple: true
+     }
+    onConfirm: async (data) => {
+      console.log("导入数据:", data);
+      return { success: true };
+    },
+  });
+  console.log("导入成功:", result);
+} catch (error) {
+  console.log("用户取消导入");
+}
+```
+
+### 国际化，传入表单数据
+
+```vue
+<script setup lang="ts">
+import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
+
+const handleImport = async () => {
+  try {
+    const result = await ImportDialog.open({
+      title: "导入商品",
+      templateType: TemplateTypeEnum.TEMPLATE1,
+      locale: I18nLocaleEnum.ZH_CN,
+      brandData: [
+        { label: "品牌 A", value: 1 },
+        { label: "品牌 B", value: 2 },
+      ],
+      onConfirm: async (data) => {
+        return { success: true };
+      },
+    });
+  } catch (error) {
+    console.log("用户取消导入");
+  }
+};
+</script>
+```
+
+## API 文档
+
+### ImportDialog 类
+
+#### 静态方法
+
+| 方法                  | 参数               | 返回值                      | 说明                   |
+| --------------------- | ------------------ | --------------------------- | ---------------------- |
+| `open(options)`       | `OpenModalOptions` | `Promise<ImportSubmitData>` | 打开弹窗，返回 Promise |
+| `close()`             | -                  | `void`                      | 关闭弹窗               |
+| `setLoading(loading)` | `boolean`          | `void`                      | 设置加载状态           |
+| `isReady()`           | -                  | `boolean`                   | 检查服务是否就绪       |
+| `setLocale(locale)`   | `I18nLocale`       | `void`                      | 设置国际化语言         |
+| `getLocale()`         | -                  | `I18nLocale`                | 获取当前语言           |
+
+#### 实例方法
+
+| 方法                         | 参数               | 返回值 | 说明                 |
+| ---------------------------- | ------------------ | ------ | -------------------- |
+| `openModal(options)`         | `OpenModalOptions` | `void` | 打开导入弹窗         |
+| `closeModal()`               | -                  | `void` | 关闭弹窗             |
+| `setConfirmLoading(loading)` | `boolean`          | `void` | 设置确认按钮加载状态 |
+| `hide()`                     | -                  | `void` | 隐藏弹窗             |
+| `destroy()`                  | -                  | `void` | 销毁实例             |
+
+### OpenModalOptions 配置
+
+| 参数                 | 类型                                              | 默认值       | 说明                   |
+| -------------------- | ------------------------------------------------- | ------------ | ---------------------- |
+| `type`               | `ExportTypeEnum`                                  | `excel`      | 导出文件类型           |
+| `title`              | `string`                                          | `'批量导入'` | 弹窗标题               |
+| `width`              | `string`                                          | `'480px'`    | 弹窗宽度               |
+| `templateType`       | `TemplateTypeEnum`                                | `BASE`       | 模板类型               |
+| `tabs`               | `TabConfig[]`                                     | `[]`         | 自定义标签页配置       |
+| `defaultActiveTab`   | `number`                                          | `0`          | 默认激活的标签页       |
+| `brandData`          | `BrandOption[] \| (() => Promise<BrandOption[]>)` | -            | 品牌数据或异步获取函数 |
+| `brandPlaceholder`   | `string`                                          | `'默认品牌'` | 品牌选择占位符         |
+| `imageRatios`        | `ImageRatioOption[]`                              | -            | 图片比例选项           |
+| `extendImageRatios`  | `ImageRatioOption[]`                              | -            | 扩展图片比例选项       |
+| `customTips`         | `string[]`                                        | -            | 自定义提示信息         |
+| `templateUrl`        | `string`                                          | -            | 模板下载链接           |
+| `uploadTitle`        | `string`                                          | -            | 上传区域标题           |
+| `uploadLinkText`     | `string`                                          | -            | 上传链接文字           |
+| `uploadHint`         | `string`                                          | -            | 上传提示信息           |
+| `acceptTypes`        | `string`                                          | -            | 接受的文件类型         |
+| `showBrand`          | `boolean`                                         | -            | 是否显示品牌选择       |
+| `showImageRatio`     | `boolean`                                         | -            | 是否显示图片比例选择   |
+| `showMonth`          | `boolean`                                         | -            | 是否显示月份选择       |
+| `showDateRange`      | `boolean`                                         | -            | 是否显示日期范围选择   |
+| `dateRangeShortcuts` | `DateRangeShortcut[]`                             | -            | 日期快捷选项           |
+| `disabledDate`       | `(date: Date) => boolean`                         | -            | 禁用日期函数           |
+| `locale`             | `I18nLocale`                                      | -            | 国际化语言             |
+
+#### 上传配置 (UploadConfig)
+
+所有上传相关配置统一放在 `uploadConfig` 对象中：
+
+| 参数            | 类型                                  | 默认值      | 说明                    |
+| --------------- | ------------------------------------- | ----------- | ----------------------- |
+| `autoUpload`    | `boolean`                             | `false`     | 是否立即上传文件        |
+| `multiple`      | `boolean`                             | `false`     | 是否支持多文件上传      |
+| `maxFiles`      | `number`                              | `10`        | 最大文件数量            |
+| `maxFileSize`   | `number`                              | `104857600` | 单文件最大大小（100MB） |
+| `customUpload`  | `(file, onProgress?) => Promise<any>` | -           | 自定义上传函数          |
+| `chunkedUpload` | `ChunkUploadStrategy`                 | -           | 分片上传策略配置        |
+
+##### 分片上传策略 (ChunkUploadStrategy)
+
+```typescript
+interface ChunkUploadStrategy {
+  initUpload: (params: InitUploadParams) => Promise<InitUploadResult>;
+  getResumableOptions: (initResult: InitUploadResult) => ResumableOptions;
+  mergeChunks: (uploadSessionId: string) => Promise<any>;
+}
+```
+
+#### 回调函数
+
+| 参数               | 类型                              | 说明                                |
+| ------------------ | --------------------------------- | ----------------------------------- |
+| `onBeforeConfirm`  | `(data) => void \| Promise<void>` | 确认前回调                          |
+| `onConfirm`        | `(data) => void`                  | 确认回调，返回 `{success: boolean}` |
+| `onBeforeCancel`   | `() => void \| Promise<void>`     | 取消前回调                          |
+| `onCancel`         | `() => void`                      | 取消回调                            |
+| `onTabChange`      | `(data) => void`                  | 标签切换回调                        |
+| `onFileChange`     | `(files) => void`                 | 文件变化回调                        |
+| `onUploadProgress` | `(file, progress) => void`        | 上传进度回调                        |
+| `onUploadSuccess`  | `(file, response) => void`        | 上传成功回调                        |
+| `onUploadError`    | `(file, error) => void`           | 上传失败回调                        |
+
+### 模板类型 (TemplateTypeEnum)
+
+| 类型        | 说明                     |
+| ----------- | ------------------------ |
+| `BASE`      | 基础模板，仅文件上传     |
+| `TEMPLATE1` | 品牌 + 图片比例选择      |
+| `TEMPLATE2` | 覆盖/增量导入 + 图片上传 |
+| `TEMPLATE3` | 月份选择 + 营业目标导入  |
+| `TEMPLATE4` | 品牌选择 + 菜谱方案导入  |
+| `TEMPLATE5` | 合批修改价格 + 日期范围  |
+
+### 国际化 (I18nLocaleEnum)
+
+| 语言     | 枚举值  |
+| -------- | ------- |
+| 简体中文 | `ZH_CN` |
+| 繁体中文 | `ZH_TW` |
+| 英语     | `EN_US` |
+| 日语     | `JA`    |
+| 印尼语   | `ID`    |
+
+### 类型定义
+
+```typescript
+interface TabConfig {
+  label: string;
+  key: string;
+}
+
+interface BrandOption {
+  label: string;
+  value: string | number;
+}
+
+interface ImageRatioOption {
+  label: string;
+  value: string;
+}
+
+interface ImportFormData {
+  brandId: string | number | undefined;
+  imageRatio: string;
+  month: number;
+  dateRange: [Date | null, Date | null];
+}
+
+interface ImportSubmitData {
+  files: File[];
+  formData: ImportFormData;
+  activeTab: TabConfig | undefined;
+  activeTabIndex: number;
+}
+
+interface FileUploadItem {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  progress: number;
+  status: "pending" | "uploading" | "success" | "error";
+  errorMessage?: string;
+  uploadSessionId?: string;
+  response?: any;
+}
+```
+
+## 使用示例
+
+### 基础导入（立即上传）
+
+```typescript
+import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
+
+ImportDialog.open({
+  title: "导入数据",
+  templateType: TemplateTypeEnum.BASE,
+  templateUrl: "/template/data_template.xlsx",
+  tips: ["提示信息 1", "提示信息 2"],
+  uploadConfig: {
+    autoUpload: true, // 选择文件后立即上传
+    customUpload: async (file, onProgress) => {
+      // 自定义上传逻辑
+      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, onProgress) => {
+      // 上传逻辑
+    },
+  },
+  onConfirm: async (data) => {
+    // 此时文件已上传完成，data.files 包含上传结果
+    console.log("上传结果:", data.files);
+    return { success: true };
+  },
+});
+```
+
+### 分片上传（立即上传）
+
+```typescript
+ImportDialog.open({
+  title: "大文件上传",
+  templateType: TemplateTypeEnum.BASE,
+  uploadConfig: {
+    autoUpload: true,
+    maxFileSize: 500 * 1024 * 1024, // 500MB
+    chunkedUpload: {
+      initUpload: async (params) => {
+        const response = await fetch("/api/upload/init", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(params),
+        });
+        return response.json();
+      },
+      getResumableOptions: (initResult) => ({
+        target: "/api/upload/chunk",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        query: { uploadSessionId: initResult.uploadSessionId },
+      }),
+      mergeChunks: async (uploadSessionId) => {
+        const response = await fetch(`/api/upload/merge/${uploadSessionId}`, {
+          method: "POST",
+        });
+        return response.json();
+      },
+    },
+  },
+});
+```
+
+### 分片上传（延迟上传）
+
+```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
+ImportDialog.open({
+  title: "导入商品",
+  templateType: TemplateTypeEnum.TEMPLATE1,
+  brandData: async () => {
+    const res = await fetch("/api/brands");
+    return res.json();
+  },
+  uploadConfig: {
+    autoUpload: false, // 延迟上传
+  },
+  onConfirm: async (data) => {
+    console.log("品牌 ID:", data.formData.brandId);
+    console.log("图片比例:", data.formData.imageRatio);
+    console.log("上传文件:", data.files);
+
+    // 处理业务逻辑
+    await processImport(data.files, {
+      brandId: data.formData.brandId,
+      imageRatio: data.formData.imageRatio,
+    });
+
+    return { success: true };
+  },
+});
+```
+
+### 自定义日期范围
+
+```typescript
+ImportDialog.open({
+  title: "导入报表",
+  templateType: TemplateTypeEnum.TEMPLATE5,
+  showDateRange: true,
+  dateRangeShortcuts: [
+    {
+      label: "最近7天",
+      value: [new Date(Date.now() - 6 * 24 * 60 * 60 * 1000), new Date()],
+    },
+    {
+      label: "最近30天",
+      value: [new Date(Date.now() - 29 * 24 * 60 * 60 * 1000), new Date()],
+    },
+  ],
+  disabledDate: (date) => {
+    // 禁用未来日期
+    return date > new Date();
+  },
+});
+```
+
+## UMD 使用方式
+
+```html
+<script src="https://unpkg.com/@sl-material/sl-import/dist/sl-import.umd.umd.js"></script>
+<script>
+  const { ImportDialog } = window.SlImport;
+
+  ImportDialog.open({
+    title: "批量导入",
+    templateType: "BASE",
+  });
+</script>
+```
+
+> **注意**：UMD 版本同样已内联 CSS，无需额外引入样式文件。
+
+## License
+
+MIT