@sl-material/sl-import 1.0.0-beta16 → 1.0.0-beta18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +177 -246
  2. package/index.d.ts +9 -5
  3. package/package.json +1 -1
  4. package/sl-import.cjs.js +1 -1
  5. package/sl-import.es.js +127 -180
  6. package/sl-import.umd.umd.js +33 -30
package/README.md CHANGED
@@ -25,6 +25,13 @@ yarn add @sl-material/sl-import
25
25
  pnpm add @sl-material/sl-import
26
26
  ```
27
27
 
28
+ ## 兼容性
29
+
30
+ - **浏览器支持**：Chrome 80+, Firefox 72+, Safari 13.1+, Edge 80+
31
+ - **Node.js 支持**：14.0+
32
+ - **TypeScript 支持**：4.0+
33
+ - **ES 版本**：编译为 ES2020，兼容现代浏览器和 Node.js 环境
34
+
28
35
  ## 使用方式
29
36
 
30
37
  ### ES 模块
@@ -41,252 +48,6 @@ const { ImportDialog } = require("@sl-material/sl-import");
41
48
 
42
49
  > **注意**：CSS 样式已自动内联到 JS 文件中，无需手动导入 CSS 文件。
43
50
 
44
- ## 快速开始
45
-
46
- ### 基础使用
47
-
48
- ```typescript
49
- import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
50
-
51
- // 使用静态方法（推荐）
52
- try {
53
- const result = await ImportDialog.open({
54
- title: "批量导入",
55
- templateType: TemplateTypeEnum.BASE,
56
- tips: ["提示信息 1", "提示信息 2"],
57
- onConfirm: async (data) => {
58
- console.log("导入数据:", data);
59
- return { success: true };
60
- },
61
- });
62
- console.log("导入成功:", result);
63
- } catch (error) {
64
- console.log("用户取消导入");
65
- }
66
- ```
67
-
68
- ### 多文件导入
69
-
70
- ```typescript
71
- import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
72
-
73
- // 使用静态方法（推荐）
74
- try {
75
- const result = await ImportDialog.open({
76
- title: "批量导入",
77
- templateType: TemplateTypeEnum.BASE,
78
- tips: ["提示信息 1", "提示信息 2"],
79
- uploadConfig: {
80
- multiple: true
81
- }
82
- onConfirm: async (data) => {
83
- console.log("导入数据:", data);
84
- return { success: true };
85
- },
86
- });
87
- console.log("导入成功:", result);
88
- } catch (error) {
89
- console.log("用户取消导入");
90
- }
91
- ```
92
-
93
- ### 国际化，传入表单数据
94
-
95
- ```vue
96
- <script setup lang="ts">
97
- import { ImportDialog, TemplateTypeEnum } from "@sl-material/sl-import";
98
-
99
- const handleImport = async () => {
100
- try {
101
- const result = await ImportDialog.open({
102
- title: "导入商品",
103
- templateType: TemplateTypeEnum.TEMPLATE1,
104
- locale: I18nLocaleEnum.ZH_CN,
105
- brandData: [
106
- { label: "品牌 A", value: 1 },
107
- { label: "品牌 B", value: 2 },
108
- ],
109
- onConfirm: async (data) => {
110
- return { success: true };
111
- },
112
- });
113
- } catch (error) {
114
- console.log("用户取消导入");
115
- }
116
- };
117
- </script>
118
- ```
119
-
120
- ## API 文档
121
-
122
- ### ImportDialog 类
123
-
124
- #### 静态方法
125
-
126
- | 方法 | 参数 | 返回值 | 说明 |
127
- | --------------------- | ------------------ | --------------------------- | ---------------------- |
128
- | `open(options)` | `OpenModalOptions` | `Promise<ImportSubmitData>` | 打开弹窗，返回 Promise |
129
- | `close()` | - | `void` | 关闭弹窗 |
130
- | `setLoading(loading)` | `boolean` | `void` | 设置加载状态 |
131
- | `isReady()` | - | `boolean` | 检查服务是否就绪 |
132
- | `setLocale(locale)` | `I18nLocale` | `void` | 设置国际化语言 |
133
- | `getLocale()` | - | `I18nLocale` | 获取当前语言 |
134
-
135
- #### 实例方法
136
-
137
- | 方法 | 参数 | 返回值 | 说明 |
138
- | ---------------------------- | ------------------ | ------ | -------------------- |
139
- | `openModal(options)` | `OpenModalOptions` | `void` | 打开导入弹窗 |
140
- | `closeModal()` | - | `void` | 关闭弹窗 |
141
- | `setConfirmLoading(loading)` | `boolean` | `void` | 设置确认按钮加载状态 |
142
- | `hide()` | - | `void` | 隐藏弹窗 |
143
- | `destroy()` | - | `void` | 销毁实例 |
144
-
145
- ### OpenModalOptions 配置
146
-
147
- | 参数 | 类型 | 默认值 | 说明 |
148
- | -------------------- | ------------------------------------------------- | ------------ | ---------------------- |
149
- | `type` | `ExportTypeEnum` | `excel` | 导出文件类型 |
150
- | `title` | `string` | `'批量导入'` | 弹窗标题 |
151
- | `width` | `string` | `'480px'` | 弹窗宽度 |
152
- | `templateType` | `TemplateTypeEnum` | `BASE` | 模板类型 |
153
- | `tabs` | `TabConfig[]` | `[]` | 自定义标签页配置 |
154
- | `defaultActiveTab` | `number` | `0` | 默认激活的标签页 |
155
- | `brandData` | `BrandOption[] \| (() => Promise<BrandOption[]>)` | - | 品牌数据或异步获取函数 |
156
- | `brandPlaceholder` | `string` | `'默认品牌'` | 品牌选择占位符 |
157
- | `imageRatios` | `ImageRatioOption[]` | - | 图片比例选项 |
158
- | `extendImageRatios` | `ImageRatioOption[]` | - | 扩展图片比例选项 |
159
- | `customTips` | `string[]` | - | 自定义提示信息 |
160
- | `templateUrl` | `string` | - | 模板下载链接 |
161
- | `uploadTitle` | `string` | - | 上传区域标题 |
162
- | `uploadLinkText` | `string` | - | 上传链接文字 |
163
- | `uploadHint` | `string` | - | 上传提示信息 |
164
- | `acceptTypes` | `string` | - | 接受的文件类型 |
165
- | `showBrand` | `boolean` | - | 是否显示品牌选择 |
166
- | `showImageRatio` | `boolean` | - | 是否显示图片比例选择 |
167
- | `showMonth` | `boolean` | - | 是否显示月份选择 |
168
- | `showDateRange` | `boolean` | - | 是否显示日期范围选择 |
169
- | `dateRangeShortcuts` | `DateRangeShortcut[]` | - | 日期快捷选项 |
170
- | `disabledDate` | `(date: Date) => boolean` | - | 禁用日期函数 |
171
- | `locale` | `I18nLocale` | - | 国际化语言 |
172
-
173
- #### 上传配置 (UploadConfig)
174
-
175
- 所有上传相关配置统一放在 `uploadConfig` 对象中：
176
-
177
- | 参数 | 类型 | 默认值 | 说明 |
178
- | ---------------- | ----------------------------------------------- | ----------- | ----------------------- |
179
- | `autoUpload` | `boolean` | `false` | 是否立即上传文件 |
180
- | `multiple` | `boolean` | `false` | 是否支持多文件上传 |
181
- | `maxFiles` | `number` | `10` | 最大文件数量 |
182
- | `maxFileSize` | `number` | `104857600` | 单文件最大大小（100MB） |
183
- | `customUpload` | `(file, context?, onProgress?) => Promise<any>` | - | 自定义上传函数 |
184
- | `chunkedUpload` | `ChunkUploadStrategy` | - | 分片上传策略配置 |
185
- | `confirmLoading` | `boolean` | `true` | 确定按钮 loading 控制 |
186
-
187
- ##### 分片上传策略 (ChunkUploadStrategy)
188
-
189
- ```typescript
190
- interface ChunkUploadStrategy {
191
- initUpload: (params: InitUploadParams) => Promise<InitUploadResult>;
192
- getResumableOptions: (initResult: InitUploadResult) => ResumableOptions;
193
- mergeChunks: (uploadSessionId: string) => Promise<any>;
194
- }
195
- ```
196
-
197
- ##### 文件操作上下文
198
-
199
- `customUpload` 函数的第三个参数，提供基本的文件操作能力：
200
-
201
- ```typescript
202
- interface Context {
203
- /** 当前文件列表 */
204
- fileList: FileUploadItem[];
205
- /** 删除指定索引的文件 */
206
- removeFile: (index: number) => void;
207
- }
208
- ```
209
-
210
- #### 回调函数
211
-
212
- | 参数 | 类型 | 说明 |
213
- | ------------------ | --------------------------------- | ----------------------------------- |
214
- | `onBeforeConfirm` | `(data) => void \| Promise<void>` | 确认前回调 |
215
- | `onConfirm` | `(data) => void` | 确认回调，返回 `{success: boolean}` |
216
- | `onBeforeCancel` | `() => void \| Promise<void>` | 取消前回调 |
217
- | `onCancel` | `() => void` | 取消回调 |
218
- | `onTabChange` | `(data) => void` | 标签切换回调 |
219
- | `onFileChange` | `(files) => void` | 文件变化回调 |
220
- | `onUploadProgress` | `(file, progress) => void` | 上传进度回调 |
221
- | `onUploadSuccess` | `(file, response) => void` | 上传成功回调 |
222
- | `onUploadError` | `(file, error) => void` | 上传失败回调 |
223
-
224
- ### 模板类型 (TemplateTypeEnum)
225
-
226
- | 类型 | 说明 |
227
- | ----------- | ------------------------ |
228
- | `BASE` | 基础模板，仅文件上传 |
229
- | `TEMPLATE1` | 品牌 + 图片比例选择 |
230
- | `TEMPLATE2` | 覆盖/增量导入 + 图片上传 |
231
- | `TEMPLATE3` | 月份选择 + 营业目标导入 |
232
- | `TEMPLATE4` | 品牌选择 + 菜谱方案导入 |
233
- | `TEMPLATE5` | 合批修改价格 + 日期范围 |
234
-
235
- ### 国际化 (I18nLocaleEnum)
236
-
237
- | 语言 | 枚举值 |
238
- | -------- | ------- |
239
- | 简体中文 | `ZH_CN` |
240
- | 繁体中文 | `ZH_TW` |
241
- | 英语 | `EN_US` |
242
- | 日语 | `JA` |
243
- | 印尼语 | `ID` |
244
-
245
- ### 类型定义
246
-
247
- ```typescript
248
- interface TabConfig {
249
- label: string;
250
- key: string;
251
- }
252
-
253
- interface BrandOption {
254
- label: string;
255
- value: string | number;
256
- }
257
-
258
- interface ImageRatioOption {
259
- label: string;
260
- value: string;
261
- }
262
-
263
- interface ImportFormData {
264
- brandId: string | number | undefined;
265
- imageRatio: string;
266
- month: number;
267
- dateRange: [Date | null, Date | null];
268
- }
269
-
270
- interface ImportSubmitData {
271
- files: File[];
272
- formData: ImportFormData;
273
- activeTab: TabConfig | undefined;
274
- activeTabIndex: number;
275
- }
276
-
277
- interface FileUploadItem {
278
- id: string;
279
- file: File;
280
- name: string;
281
- size: number;
282
- progress: number;
283
- status: "pending" | "uploading" | "success" | "error";
284
- errorMessage?: string;
285
- uploadSessionId?: string;
286
- response?: any;
287
- }
288
- ```
289
-
290
51
  ## 使用示例
291
52
 
292
53
  ### 基础导入（立即上传）
@@ -478,6 +239,176 @@ ImportDialog.open({
478
239
  });
479
240
  ```
480
241
 
242
+ ## API 文档
243
+
244
+ ### ImportDialog 类
245
+
246
+ #### 静态方法
247
+
248
+ | 方法 | 参数 | 返回值 | 说明 |
249
+ | --------------------- | ------------------ | --------------------------- | ---------------------- |
250
+ | `open(options)` | `OpenModalOptions` | `Promise<ImportSubmitData>` | 打开弹窗，返回 Promise |
251
+ | `close()` | - | `void` | 关闭弹窗 |
252
+ | `setLoading(loading)` | `boolean` | `void` | 设置加载状态 |
253
+ | `isReady()` | - | `boolean` | 检查服务是否就绪 |
254
+ | `setLocale(locale)` | `I18nLocale` | `void` | 设置国际化语言 |
255
+ | `getLocale()` | - | `I18nLocale` | 获取当前语言 |
256
+
257
+ #### 实例方法
258
+
259
+ | 方法 | 参数 | 返回值 | 说明 |
260
+ | ---------------------------- | ------------------ | ------ | -------------------- |
261
+ | `openModal(options)` | `OpenModalOptions` | `void` | 打开导入弹窗 |
262
+ | `closeModal()` | - | `void` | 关闭弹窗 |
263
+ | `setConfirmLoading(loading)` | `boolean` | `void` | 设置确认按钮加载状态 |
264
+ | `hide()` | - | `void` | 隐藏弹窗 |
265
+ | `destroy()` | - | `void` | 销毁实例 |
266
+
267
+ ### OpenModalOptions 配置
268
+
269
+ | 参数 | 类型 | 默认值 | 说明 |
270
+ | -------------------- | ------------------------------------------------- | ------------ | ---------------------- |
271
+ | `type` | `ExportTypeEnum` | `excel` | 导出文件类型 |
272
+ | `title` | `string` | `'批量导入'` | 弹窗标题 |
273
+ | `width` | `string` | `'480px'` | 弹窗宽度 |
274
+ | `templateType` | `TemplateTypeEnum` | `BASE` | 模板类型 |
275
+ | `tabs` | `TabConfig[]` | `[]` | 自定义标签页配置 |
276
+ | `defaultActiveTab` | `number` | `0` | 默认激活的标签页 |
277
+ | `brandData` | `BrandOption[] \| (() => Promise<BrandOption[]>)` | - | 品牌数据或异步获取函数 |
278
+ | `brandPlaceholder` | `string` | `'默认品牌'` | 品牌选择占位符 |
279
+ | `imageRatios` | `ImageRatioOption[]` | - | 图片比例选项 |
280
+ | `extendImageRatios` | `ImageRatioOption[]` | - | 扩展图片比例选项 |
281
+ | `customTips` | `string[]` | - | 自定义提示信息 |
282
+ | `templateUrl` | `string` | - | 模板下载链接 |
283
+ | `uploadTitle` | `string` | - | 上传区域标题 |
284
+ | `uploadLinkText` | `string` | - | 上传链接文字 |
285
+ | `uploadHint` | `string` | - | 上传提示信息 |
286
+ | `acceptTypes` | `string` | - | 接受的文件类型 |
287
+ | `showBrand` | `boolean` | - | 是否显示品牌选择 |
288
+ | `showImageRatio` | `boolean` | - | 是否显示图片比例选择 |
289
+ | `showMonth` | `boolean` | - | 是否显示月份选择 |
290
+ | `showDateRange` | `boolean` | - | 是否显示日期范围选择 |
291
+ | `dateRangeShortcuts` | `DateRangeShortcut[]` | - | 日期快捷选项 |
292
+ | `disabledDate` | `(date: Date) => boolean` | - | 禁用日期函数 |
293
+ | `locale` | `I18nLocale` | - | 国际化语言 |
294
+
295
+ #### 上传配置 (UploadConfig)
296
+
297
+ 所有上传相关配置统一放在 `uploadConfig` 对象中：
298
+
299
+ | 参数 | 类型 | 默认值 | 说明 |
300
+ | ---------------- | ----------------------------------------------- | ----------- | ----------------------- |
301
+ | `autoUpload` | `boolean` | `false` | 是否立即上传文件 |
302
+ | `multiple` | `boolean` | `false` | 是否支持多文件上传 |
303
+ | `maxFiles` | `number` | `10` | 最大文件数量 |
304
+ | `maxFileSize` | `number` | `104857600` | 单文件最大大小（100MB） |
305
+ | `customUpload` | `(file, context?, onProgress?) => Promise<any>` | - | 自定义上传函数 |
306
+ | `chunkedUpload` | `ChunkUploadStrategy` | - | 分片上传策略配置 |
307
+ | `confirmLoading` | `boolean` | `true` | 确定按钮 loading 控制 |
308
+
309
+ ##### 分片上传策略 (ChunkUploadStrategy)
310
+
311
+ ```typescript
312
+ interface ChunkUploadStrategy {
313
+ initUpload: (params: InitUploadParams) => Promise<InitUploadResult>;
314
+ getResumableOptions: (initResult: InitUploadResult) => ResumableOptions;
315
+ mergeChunks: (uploadSessionId: string) => Promise<any>;
316
+ }
317
+ ```
318
+
319
+ ##### 文件操作上下文
320
+
321
+ `customUpload` 函数的第三个参数，提供基本的文件操作能力：
322
+
323
+ ```typescript
324
+ interface Context {
325
+ /** 当前文件列表 */
326
+ fileList: FileUploadItem[];
327
+ /** 删除指定索引的文件 */
328
+ removeFile: (index: number) => void;
329
+ }
330
+ ```
331
+
332
+ #### 回调函数
333
+
334
+ | 参数 | 类型 | 说明 |
335
+ | ------------------ | --------------------------------- | ----------------------------------- |
336
+ | `onBeforeConfirm` | `(data) => void \| Promise<void>` | 确认前回调 |
337
+ | `onConfirm` | `(data) => void` | 确认回调，返回 `{success: boolean}` |
338
+ | `onBeforeCancel` | `() => void \| Promise<void>` | 取消前回调 |
339
+ | `onCancel` | `() => void` | 取消回调 |
340
+ | `onTabChange` | `(data) => void` | 标签切换回调 |
341
+ | `onFileChange` | `(files) => void` | 文件变化回调 |
342
+ | `onUploadProgress` | `(file, progress) => void` | 上传进度回调 |
343
+ | `onUploadSuccess` | `(file, response) => void` | 上传成功回调 |
344
+ | `onUploadError` | `(file, error) => void` | 上传失败回调 |
345
+
346
+ ### 模板类型 (TemplateTypeEnum)
347
+
348
+ | 类型 | 说明 |
349
+ | ----------- | ------------------------ |
350
+ | `BASE` | 基础模板，仅文件上传 |
351
+ | `TEMPLATE1` | 品牌 + 图片比例选择 |
352
+ | `TEMPLATE2` | 覆盖/增量导入 + 图片上传 |
353
+ | `TEMPLATE3` | 月份选择 + 营业目标导入 |
354
+ | `TEMPLATE4` | 品牌选择 + 菜谱方案导入 |
355
+ | `TEMPLATE5` | 合批修改价格 + 日期范围 |
356
+
357
+ ### 国际化 (I18nLocaleEnum)
358
+
359
+ | 语言 | 枚举值 |
360
+ | -------- | ------- |
361
+ | 简体中文 | `ZH_CN` |
362
+ | 繁体中文 | `ZH_TW` |
363
+ | 英语 | `EN_US` |
364
+ | 日语 | `JA` |
365
+ | 印尼语 | `ID` |
366
+
367
+ ### 类型定义
368
+
369
+ ```typescript
370
+ interface TabConfig {
371
+ label: string;
372
+ key: string;
373
+ }
374
+
375
+ interface BrandOption {
376
+ label: string;
377
+ value: string | number;
378
+ }
379
+
380
+ interface ImageRatioOption {
381
+ label: string;
382
+ value: string;
383
+ }
384
+
385
+ interface ImportFormData {
386
+ brandId: string | number | undefined;
387
+ imageRatio: string;
388
+ month: number;
389
+ dateRange: [Date | null, Date | null];
390
+ }
391
+
392
+ interface ImportSubmitData {
393
+ files: File[];
394
+ formData: ImportFormData;
395
+ activeTab: TabConfig | undefined;
396
+ activeTabIndex: number;
397
+ }
398
+
399
+ interface FileUploadItem {
400
+ id: string;
401
+ file: File;
402
+ name: string;
403
+ size: number;
404
+ progress: number;
405
+ status: "pending" | "uploading" | "success" | "error";
406
+ errorMessage?: string;
407
+ uploadSessionId?: string;
408
+ response?: any;
409
+ }
410
+ ```
411
+
481
412
  ## UMD 使用方式
482
413
 
483
414
  ```html
package/index.d.ts CHANGED
@@ -195,7 +195,7 @@ declare class ImportDialog {
195
195
  }) => void): void;
196
196
  onBrandChange(callback: (value: string | number) => void): void;
197
197
  private static getInstance;
198
- static open(options?: OpenModalOptions): Promise<ImportSubmitData>;
198
+ static open(options?: OpenModalOptions): Promise<ImportSubmitData | null>;
199
199
  static close(): void;
200
200
  static setLoading(loading: boolean): void;
201
201
  static isReady(): boolean;
@@ -347,10 +347,6 @@ export declare interface OpenModalOptions {
347
347
  url: string;
348
348
  activeTab?: TabConfig;
349
349
  }) => void;
350
- onFileChange?: (files: FileUploadItem[]) => void;
351
- onUploadProgress?: (file: FileUploadItem, progress: number) => void;
352
- onUploadSuccess?: (file: FileUploadItem, response: any) => void;
353
- onUploadError?: (file: FileUploadItem, error: Error) => void;
354
350
  }
355
351
 
356
352
  /**
@@ -472,6 +468,14 @@ export declare interface UploadConfig {
472
468
  * 主要用于延迟上传场景，控制上传过程中的 UI 反馈
473
469
  */
474
470
  confirmLoading?: boolean;
471
+ /** 文件列表变化回调（添加/删除文件时触发） */
472
+ onFileChange?: (files: FileUploadItem[]) => void;
473
+ /** 上传进度回调 */
474
+ onProgress?: (file: FileUploadItem, progress: number) => void;
475
+ /** 上传成功回调 */
476
+ onSuccess?: (file: FileUploadItem, response: any) => void;
477
+ /** 上传失败回调 */
478
+ onError?: (file: FileUploadItem, error: Error) => void;
475
479
  }
476
480
 
477
481
  export { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sl-material/sl-import",
3
- "version": "1.0.0-beta16",
3
+ "version": "1.0.0-beta18",
4
4
  "description": "导入组件 - 支持批量导入文件，提供多种模板配置",
5
5
  "main": "./sl-import.cjs.js",
6
6
  "module": "./sl-import.es.js",