@sl-material/sl-import 1.0.0-beta0

package/index.d.ts

@@ -0,0 +1,456 @@
+export declare interface BrandOption {
+    label: string;
+    value: string | number;
+}
+
+/**
+ * 分片上传配置
+ * 业务侧提供：initUpload, getResumableConfig, mergeChunks
+ */
+export declare interface ChunkedUploadConfig {
+    /**
+     * 初始化分片上传
+     * @param fileName 文件名
+     * @param fileSize 文件大小
+     * @returns 初始化结果
+     */
+    initUpload: (fileName: string, fileSize: number) => Promise<ChunkUploadInitResult>;
+    /**
+     * 获取Resumable配置（业务侧可自定义，组件提供默认值）
+     * @param initResult 初始化结果
+     * @returns Resumable配置（会与默认配置合并）
+     */
+    getResumableConfig: (initResult: ChunkUploadInitResult) => ResumableConfig;
+    /**
+     * 合并分片
+     * @param uploadSessionId 上传会话ID
+     * @returns 合并结果（任意业务数据）
+     */
+    mergeChunks: (uploadSessionId: string) => Promise<any>;
+}
+
+/**
+ * 分片上传初始化结果
+ */
+export declare interface ChunkUploadInitResult {
+    /** 上传会话ID */
+    uploadSessionId: string;
+    /** 分片大小（字节） */
+    partSize: number;
+    /** 总分片数 */
+    totalParts: number;
+}
+
+export declare interface DateRangeShortcut {
+    text: string;
+    value: () => [Date, Date];
+}
+
+declare const DEFAULT_IMAGE_RATIOS: ImageRatioOption[];
+
+/**
+ * 默认语言
+ */
+export declare const DEFAULT_LOCALE: I18nLocale;
+
+declare const DEFAULT_TEMPLATE_CONFIGS: Record<TemplateTypeEnum, TemplateConfig>;
+
+export declare enum ExportTypeEnum {
+    image = "image",
+    excel = "excel"
+}
+
+export declare interface FileUploadItem {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    progress: number;
+    status: FileUploadStatus;
+    errorMessage?: string;
+    uploadSessionId?: string;
+    response?: any;
+}
+
+export declare type FileUploadStatus = "pending" | "uploading" | "success" | "error";
+
+declare const getImageRatioOptions: (t: (key: string) => string) => ImageRatioOption[];
+
+export declare const getLocale: () => I18nLocaleEnum;
+
+declare const getTranslatedTemplateConfigs: (t: (key: keyof LocaleMessages) => string) => Record<TemplateTypeEnum, TemplateConfig>;
+
+/**
+ * 支持的语言类型
+ */
+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"
+}
+
+export declare interface ImageRatioOption {
+    label: string;
+    value: string;
+}
+
+declare class ImportDialog {
+    private static instance;
+    private container;
+    private modalElement;
+    private styleElement;
+    private dateRangePicker;
+    private activeTabIndex;
+    private brandList;
+    private brandLoading;
+    private confirmLoading;
+    private formData;
+    private modalOptions;
+    private renderer;
+    /**
+     * 文件上传管理器 - 负责处理所有文件上传相关的逻辑
+     *
+     * 功能：
+     * 1. 文件状态管理：维护上传文件列表、进度、状态等
+     * 2. 文件操作：添加、删除、重置文件
+     * 3. 上传控制：开始/停止上传、进度跟踪
+     * 4. 错误处理：失败文件管理、错误消息显示
+     * 5. 配置管理：动态更新上传参数（多文件、分块、大小限制等）
+     *
+     * 避免了在 ImportDialog 中直接处理复杂的文件上传逻辑，实现了职责分离
+     */
+    private uploader;
+    private onTabChangeCallback?;
+    private onBrandChangeCallback?;
+    constructor(container?: HTMLElement);
+    private injectStyles;
+    /**
+     * 上传相关的逻辑处理
+     */
+    private initUploader;
+    private get currentConfig();
+    private get dialogTitle();
+    private get dialogWidth();
+    private getRenderContext;
+    private createModal;
+    /**
+     * 更新模态框界面 - 核心UI更新机制
+     *
+     * 功能：
+     * 1. 保存当前日期选择器的状态（避免用户输入丢失）
+     * 2. 更新渲染器上下文并重新生成HTML
+     * 3. 重新绑定所有事件监听器（DOM被替换后需要重新绑定）
+     * 4. 如果启用了日期范围选择器，重新初始化并恢复状态
+     *
+     * 调用场景：
+     * - 文件上传状态变化时
+     * - 品牌数据加载时
+     * - Tab切换时
+     * - 确认按钮加载状态变化时
+     * - 语言切换时等
+     */
+    private updateModal;
+    private initDateRangePicker;
+    /**
+     * 给 dom 绑定事件
+     * @returns
+     */
+    private bindEvents;
+    private bindFormEvents;
+    private bindCustomSelectEvents;
+    private closeAllSelects;
+    private resetForm;
+    private loadBrandData;
+    private handleTabChange;
+    /**
+     * 取消按钮事件
+     */
+    private handleCancel;
+    /**
+     * 确认按钮事件
+     * @returns
+     */
+    private handleConfirm;
+    private showMessage;
+    /**
+     * 内部方法：打开模态框的核心逻辑
+     */
+    private _openModalCore;
+    openModal(options?: OpenModalOptions): void;
+    closeModal(): void;
+    setConfirmLoading(loading: boolean): void;
+    hide(): void;
+    destroy(): void;
+    private handleDocumentClick;
+    onTabChange(callback: (data: {
+        index: number;
+        tab: TabConfig;
+    }) => void): void;
+    onBrandChange(callback: (value: string | number) => void): void;
+    private static getInstance;
+    static open(options?: OpenModalOptions): Promise<ImportSubmitData>;
+    static close(): void;
+    static setLoading(loading: boolean): void;
+    static isReady(): boolean;
+    static setLocale(locale: I18nLocale): void;
+    static getLocale(): I18nLocale;
+    static destroyInstance(): void;
+    static install(): void;
+}
+export { ImportDialog }
+export default ImportDialog;
+
+export declare interface ImportDialogProps {
+    type: ExportTypeEnum;
+    visible: boolean;
+    title?: string;
+    width?: string;
+    templateType?: TemplateTypeEnum;
+    tabs?: TabConfig[];
+    defaultActiveTab?: number;
+    brandData?: BrandOption[] | (() => Promise<BrandOption[]>);
+    brandPlaceholder?: string;
+    imageRatios?: ImageRatioOption[];
+    extendImageRatios?: ImageRatioOption[];
+    tips?: 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;
+}
+
+export declare const importDialogService: typeof ImportDialog;
+
+export declare interface ImportFormData {
+    brandId: string | number | undefined;
+    imageRatio: string;
+    month: number;
+    dateRange: [Date | null, Date | null];
+}
+
+export declare interface ImportSubmitData {
+    files: File[];
+    formData: ImportFormData;
+    activeTab: TabConfig | undefined;
+    activeTabIndex: number;
+}
+
+export declare const installImportDialog: () => void;
+
+export declare interface LocaleMessages {
+    loadingText: string;
+    cancel: string;
+    confirm: string;
+    download: string;
+    select: string;
+    required: string;
+    batchImport: string;
+    downloadTemplateTitle: string;
+    downloadTemplateText: string;
+    importSettingsTitle: string;
+    selectBrand: string;
+    defaultBrand: string;
+    selectImageRatio: string;
+    selectMonth: string;
+    selectDate: string;
+    uploadTitle: string;
+    dragFileHere: string;
+    or: string;
+    uploadLinkText: string;
+    uploadHint: string;
+    tipsTitle: string;
+    month: string;
+    startDate: string;
+    endDate: string;
+    to: string;
+    fileTypeError: string;
+    fileSizeError: string;
+    uploadFailed: string;
+    uploadSuccess: string;
+    uploading: string;
+    uploadTitleBase: string;
+    uploadTitleTemplate1: string;
+    uploadTitleTemplate2: string;
+    uploadTitleTemplate3: string;
+    uploadTitleTemplate4: string;
+    uploadTitleTemplate5: string;
+    uploadLinkTextDefault: string;
+    uploadLinkTextImport: string;
+    uploadHintExcel: string;
+    uploadHintImage: string;
+    tipsDefault: string[];
+    tipsTemplate1: string[];
+    tipsTemplate2: string[];
+    tipsTemplate3: string[];
+    tipsTemplate4: string[];
+    tipsTemplate5: string[];
+    tabCoverImport: string;
+    tabIncrementImport: string;
+    tabInPrice: string;
+    tabOutPrice: string;
+    imageRatioOriginal: string;
+    imageRatio4to3: string;
+    imageRatio3to4: string;
+    imageRatio1to1: string;
+    imageRatio16to9: string;
+}
+
+export declare interface OpenModalOptions {
+    type?: ExportTypeEnum;
+    title?: string;
+    width?: string;
+    templateType?: TemplateTypeEnum;
+    tabs?: TabConfig[];
+    defaultActiveTab?: number;
+    brandData?: BrandOption[] | (() => Promise<BrandOption[]>);
+    brandPlaceholder?: string;
+    imageRatios?: ImageRatioOption[];
+    extendImageRatios?: ImageRatioOption[];
+    tips?: 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;
+    onBeforeConfirm?: (data: ImportSubmitData) => void | Promise<void>;
+    onConfirm?: (data: ImportSubmitData) => void;
+    onBeforeCancel?: () => void | Promise<void>;
+    onCancel?: () => void;
+    onTabChange?: (data: {
+        index: number;
+        tab: TabConfig;
+    }) => void;
+    onDownloadTemplate?: (data: {
+        url: string;
+        activeTab?: TabConfig;
+    }) => void;
+    onFileChange?: (files: FileUploadItem[]) => void;
+    onUploadProgress?: (file: FileUploadItem, progress: number) => void;
+    onUploadSuccess?: (file: FileUploadItem, response: any) => void;
+    onUploadError?: (file: FileUploadItem, error: Error) => void;
+}
+
+/**
+ * Resumable.js 配置选项
+ */
+export declare interface ResumableConfig {
+    /** 上传目标URL */
+    target: string;
+    /** 请求头 */
+    headers?: Record<string, string>;
+    /** 查询参数 */
+    query?: Record<string, any>;
+    /** 分片大小（可选，默认使用initResult.partSize） */
+    chunkSize?: number;
+    /** 并发上传数（默认3） */
+    simultaneousUploads?: number;
+    /** 最大重试次数（默认3） */
+    maxChunkRetries?: number;
+    /** 重试间隔毫秒（默认1000） */
+    chunkRetryInterval?: number;
+}
+
+export declare const setLocale: (locale: I18nLocale) => void;
+
+export declare const t: (key: keyof LocaleMessages, params?: Record<string, string | number>) => string;
+
+export declare interface TabConfig {
+    label: string;
+    key: string;
+}
+
+export declare interface TemplateConfig {
+    type: ExportTypeEnum;
+    tabs: TabConfig[];
+    showBrand: boolean;
+    showImageRatio: boolean;
+    showMonth: boolean;
+    showDateRange: boolean;
+    uploadTitle: string;
+    uploadLinkText: string;
+    uploadHint: string;
+    acceptTypes: string;
+    tips: string[];
+    templateUrl: string;
+}
+
+export declare enum TemplateTypeEnum {
+    BASE = "base",
+    TEMPLATE1 = "template1",
+    TEMPLATE2 = "template2",
+    TEMPLATE3 = "template3",
+    TEMPLATE4 = "template4",
+    TEMPLATE5 = "template5"
+}
+
+declare namespace types {
+    export {
+        TabConfig,
+        TemplateConfig,
+        BrandOption,
+        ImageRatioOption,
+        ImportFormData,
+        FileUploadStatus,
+        FileUploadItem,
+        ChunkUploadInitResult,
+        ResumableConfig,
+        ChunkedUploadConfig,
+        UploadConfig,
+        ImportSubmitData,
+        ImportDialogProps,
+        OpenModalOptions,
+        DEFAULT_IMAGE_RATIOS,
+        getImageRatioOptions,
+        getTranslatedTemplateConfigs,
+        DEFAULT_TEMPLATE_CONFIGS
+    }
+}
+export { types }
+
+export declare interface UploadConfig {
+    /** 最大文件数量，默认 10 */
+    maxFiles?: number;
+    /** 是否支持多文件上传，默认 false */
+    multiple?: boolean;
+    /** 单文件最大大小（字节），默认 100MB */
+    maxFileSize?: number;
+    /** 自定义上传函数（普通上传时使用）主要用于自定义上传参数 */
+    customUpload?: (file: File, onProgress?: (progress: number) => void) => Promise<any>;
+    /**
+     * 分片上传配置
+     * 配置此项后自动启用分片上传（仅单文件模式生效）
+     */
+    chunkedUpload?: ChunkedUploadConfig;
+    /**
+     * 上传时机控制
+     * - true: 选择文件后立即上传（默认）
+     * - false: 点击确定时才开始上传
+     * 适用于 customUpload 和 chunkedUpload
+     */
+    autoUpload?: boolean;
+}
+
+export { }

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@sl-material/sl-import",
+  "version": "1.0.0-beta0",
+  "description": "导入组件 - 支持批量导入文件，提供多种模板配置",
+  "main": "./sl-import.cjs.js",
+  "module": "./sl-import.es.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./sl-import.es.js",
+      "require": "./sl-import.cjs.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "files": [
+    "sl-import.cjs.js",
+    "sl-import.es.js",
+    "sl-import.umd.umd.js",
+    "index.d.ts",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "import",
+    "upload",
+    "dialog",
+    "typescript",
+    "javascript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@sl-ui-pc/theme-chalk": "0.1.0-beta1",
+    "flatpickr": "^4.6.13",
+    "resumablejs": "^1.1.0"
+  }
+}