@jetprint/editor-sdk 1.0.0

package/dist/components/Editor/composables/usePreviewManager.d.ts

@@ -0,0 +1,240 @@
+/**
+ * 预览管理 Composable
+ * 负责预览数据生成、渲染队列管理
+ */
+import { type Ref } from 'vue';
+import type { Canvas } from 'fabric';
+import type { IRenderByJson } from '../../../utils/renderService';
+export declare function usePreviewManager(getCanvas: () => Canvas | null, fileBaseUrl?: string): {
+    previewRenderData: Ref<{
+        psdJson: {
+            canvasWidth: number;
+            canvasHeight: number;
+            layerList: {
+                name: string;
+                type: import("../../..").PsdLayerType;
+                blendMode?: string | undefined;
+                bounds?: {
+                    top: number;
+                    left: number;
+                    bottom?: number | undefined;
+                    right?: number | undefined;
+                    width: number;
+                    height: number;
+                } | undefined;
+                layerOrder?: number | undefined;
+                imagePath?: string | undefined;
+                vectorMask?: {
+                    paths: {
+                        open: boolean;
+                        knots: {
+                            linked: boolean;
+                            points: number[];
+                        }[];
+                        fillRule?: string | undefined;
+                        operation?: string | undefined;
+                    }[];
+                    points?: {
+                        x: number;
+                        y: number;
+                        type?: number | undefined;
+                    }[] | undefined;
+                    invert?: boolean | undefined;
+                    notLink?: boolean | undefined;
+                    disable?: boolean | undefined;
+                    fillStartsWithAllPixels?: boolean | undefined;
+                } | undefined;
+                children?: /*elided*/ any[] | undefined;
+                isSmartObject?: boolean | undefined;
+                size?: {
+                    width: number;
+                    height: number;
+                } | undefined;
+                placedLayer?: {
+                    width: number;
+                    height: number;
+                } | undefined;
+                originalWidth?: number | undefined;
+                originalHeight?: number | undefined;
+                meshPoints?: {
+                    x: number;
+                    y: number;
+                    type?: number | undefined;
+                }[] | undefined;
+                transform?: number[] | undefined;
+                quiltSliceX?: number[] | undefined;
+                quiltSliceY?: number[] | undefined;
+                filterList?: {
+                    type: string;
+                    enabled: boolean;
+                    filter?: {
+                        puppetShapeList?: {
+                            originalVertexArray: {
+                                x: number;
+                                y: number;
+                                type?: number | undefined;
+                            }[];
+                            deformedVertexArray: {
+                                x: number;
+                                y: number;
+                                type?: number | undefined;
+                            }[];
+                            indexArray: number[];
+                        }[] | undefined;
+                    } | undefined;
+                }[] | undefined;
+                id?: number | undefined;
+                opacity?: number | undefined;
+                clipping?: boolean | undefined;
+            }[];
+        };
+        materialList: {
+            layerName: string;
+            url: string;
+            sourceName?: string | undefined;
+        }[];
+        fabricScreenshotList: {
+            id: number;
+            name?: string | undefined;
+            url: string;
+            designImage?: {
+                readonly height: number;
+                readonly width: number;
+                close: {
+                    (): void;
+                    (): void;
+                };
+            } | undefined;
+            contentVersion?: number | string | undefined;
+        }[];
+        width?: number | undefined;
+        height?: number | undefined;
+        baseUrl?: string | undefined;
+        previewTier?: "fast" | "hd" | undefined;
+        hasPendingHdFollowup?: boolean | undefined;
+        maxImageSize?: number | undefined;
+        previewQuality?: "quick" | "normal" | undefined;
+        skipDeform?: boolean | undefined;
+        selectedColor?: string | undefined;
+    } | null, IRenderByJson | {
+        psdJson: {
+            canvasWidth: number;
+            canvasHeight: number;
+            layerList: {
+                name: string;
+                type: import("../../..").PsdLayerType;
+                blendMode?: string | undefined;
+                bounds?: {
+                    top: number;
+                    left: number;
+                    bottom?: number | undefined;
+                    right?: number | undefined;
+                    width: number;
+                    height: number;
+                } | undefined;
+                layerOrder?: number | undefined;
+                imagePath?: string | undefined;
+                vectorMask?: {
+                    paths: {
+                        open: boolean;
+                        knots: {
+                            linked: boolean;
+                            points: number[];
+                        }[];
+                        fillRule?: string | undefined;
+                        operation?: string | undefined;
+                    }[];
+                    points?: {
+                        x: number;
+                        y: number;
+                        type?: number | undefined;
+                    }[] | undefined;
+                    invert?: boolean | undefined;
+                    notLink?: boolean | undefined;
+                    disable?: boolean | undefined;
+                    fillStartsWithAllPixels?: boolean | undefined;
+                } | undefined;
+                children?: /*elided*/ any[] | undefined;
+                isSmartObject?: boolean | undefined;
+                size?: {
+                    width: number;
+                    height: number;
+                } | undefined;
+                placedLayer?: {
+                    width: number;
+                    height: number;
+                } | undefined;
+                originalWidth?: number | undefined;
+                originalHeight?: number | undefined;
+                meshPoints?: {
+                    x: number;
+                    y: number;
+                    type?: number | undefined;
+                }[] | undefined;
+                transform?: number[] | undefined;
+                quiltSliceX?: number[] | undefined;
+                quiltSliceY?: number[] | undefined;
+                filterList?: {
+                    type: string;
+                    enabled: boolean;
+                    filter?: {
+                        puppetShapeList?: {
+                            originalVertexArray: {
+                                x: number;
+                                y: number;
+                                type?: number | undefined;
+                            }[];
+                            deformedVertexArray: {
+                                x: number;
+                                y: number;
+                                type?: number | undefined;
+                            }[];
+                            indexArray: number[];
+                        }[] | undefined;
+                    } | undefined;
+                }[] | undefined;
+                id?: number | undefined;
+                opacity?: number | undefined;
+                clipping?: boolean | undefined;
+            }[];
+        };
+        materialList: {
+            layerName: string;
+            url: string;
+            sourceName?: string | undefined;
+        }[];
+        fabricScreenshotList: {
+            id: number;
+            name?: string | undefined;
+            url: string;
+            designImage?: {
+                readonly height: number;
+                readonly width: number;
+                close: {
+                    (): void;
+                    (): void;
+                };
+            } | undefined;
+            contentVersion?: number | string | undefined;
+        }[];
+        width?: number | undefined;
+        height?: number | undefined;
+        baseUrl?: string | undefined;
+        previewTier?: "fast" | "hd" | undefined;
+        hasPendingHdFollowup?: boolean | undefined;
+        maxImageSize?: number | undefined;
+        previewQuality?: "quick" | "normal" | undefined;
+        skipDeform?: boolean | undefined;
+        selectedColor?: string | undefined;
+    } | null>;
+    previewTitle: Ref<string, string>;
+    queuePreviewUpdate: (reason: string) => void;
+    buildInitialPreviewRenderData: () => Promise<void>;
+    getRenderDataForIndex: (index: number) => Promise<IRenderByJson | null>;
+    clearPreviewCache: () => void;
+    getPreviewCacheStats: () => {
+        bitmaps: number;
+        blobUrls: number;
+        screenshots: number;
+    };
+};

package/dist/components/Editor/composables/usePreviewRenderer.d.ts

@@ -0,0 +1,111 @@
+/**
+ * 预览渲染 Composable
+ * 抽离 buildInitialPreviewRenderData / getRenderDataForIndex / renderAllTemplates
+ * 多图（SPLIT）：默认 buildMaskGroups + getInverseMaskUrl；若启用 Zone 截图管线且有分片 mask 则与 COMPLETE 同裁切路径。
+ * 单片（COMPLETE）：SPLIT 分片 MASK+DOTTED 按 bounds 裁切，或 Zone 管线。
+ */
+import { type Ref } from 'vue';
+import type { IRenderByJson, IMaterial } from '../../../utils/renderService';
+import { type SplitPieceDesignClipBlob } from '../utils/buildSplitPieceDesignClipBlobs';
+type TemplateItem = {
+    jsonURL?: string;
+    resources?: any[];
+};
+type MaskGroup = {
+    id: string;
+    name: string;
+};
+type PreviewBuildOptions = {
+    commitHd?: boolean;
+    useCachedSplitScreenshotsOnly?: boolean;
+};
+type RenderDataForIndexOptions = {
+    skipSaveAndScreenshot?: boolean;
+    resetCompleteBatchCache?: boolean;
+    useCachedSplitScreenshotsOnly?: boolean;
+};
+export declare function usePreviewRenderer(options: {
+    usePreviewEffect: () => boolean;
+    templateItems: Ref<TemplateItem[]>;
+    previewTemplateIndex: Ref<number>;
+    selectedDiecutId: Ref<string>;
+    selectedMode: Ref<string>;
+    selectedColor: Ref<string>;
+    previewRenderData: Ref<IRenderByJson | null>;
+    toProxyUrl: (url: string) => string;
+    buildMaterialList: (resources?: any[]) => IMaterial[];
+    collectGroupIdByName: (layersList: any[], map?: Map<string, number>) => Map<string, number>;
+    buildMaskGroups: () => MaskGroup[];
+    getInverseMaskUrl: (groupId: string) => string;
+    /** 当前尺码下该分片设计截图的内容版本号：写入 fabricScreenshot.contentVersion，供预览签名区分尺码/检测改动 */
+    getInverseMaskVersion?: (groupId: string) => number;
+    getCanvas: () => any;
+    getEffectiveDiecutData: () => any;
+    loadImage: (url: string) => Promise<HTMLImageElement>;
+    guideResourceRole?: string;
+    /** 编辑区域宽度，用于单片合成图基准尺寸 */
+    getEditorAreaWidth?: () => number;
+    /** 当前选中尺码，多尺码时使 fabricScreenshotList id 与 psdJson 一致 */
+    getSelectedSize?: () => string;
+    saveCanvasState: (diecutId: string) => Promise<void>;
+    generateDiecutScreenshot: (diecutId: string, opts?: {
+        multiplier?: number;
+        useIdentityViewport?: boolean;
+    }) => Promise<void>;
+    /**
+     * 从 diecut 的「已保存 JSON 状态」生成该 diecut 的 inverse mask blob。
+     * 修复 H22：buildInitialPreviewRenderData 在 SPLIT 模式发现缺失分片时，原 fallback
+     * 用当前画布生成（只含 active 分片内容）会污染其他分片的 inverse mask 为空。
+     * 改用此 API 时，会用该分片自己保存的 JSON 状态离屏渲染再裁切，保证内容正确。
+     */
+    generateDiecutScreenshotFromSavedState?: (diecutId: string) => Promise<boolean>;
+    /** 与下载按钮相同的拿图逻辑，供 renderAllTemplates 复用 */
+    getPreviewImageBlobs?: () => Promise<Array<{
+        index: number;
+        blob: Blob;
+    }>>;
+    /** 分片 Guideline 内存副本（拖动后已写回 bounds），供截图与导出与画布一致 */
+    getCachedSplitGuidelineJson?: (templateJsonUrl: string) => Record<string, unknown> | null | undefined;
+    /** Zone 模式下分片实时位置与对应 MASK，供 COMPLETE 走实时裁切生成 fabricScreenshotList */
+    getZonesForScreenshot?: () => Array<{
+        id: number;
+        name?: string;
+        placed: {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+        };
+        maskUrl: string;
+    }>;
+    /** 为 true 时走 Zone 裁切 fabric 列表（COMPLETE 与 SPLIT 在开启 completeUsesZoneModel 时均可） */
+    isZonesMode?: () => boolean;
+    /**
+     * COMPLETE 拖动态：仅重建该 groupId 的 live 裁切，其余分片沿用 previewRenderData 中已有项。
+     */
+    getDraggingLiveZoneGroupId?: () => string | null;
+    /** 画布对象拖动中：禁止 refreshZonesPreviewQuick（含 debounce timer 触发的二次调用） */
+    getIsDraggingObject?: () => boolean;
+}): {
+    buildInitialPreviewRenderData: (buildOpts?: PreviewBuildOptions) => Promise<void>;
+    getRenderDataForIndex: (index: number, opts?: RenderDataForIndexOptions) => Promise<IRenderByJson | null>;
+    renderAllTemplates: () => Promise<Array<{
+        index: number;
+        bitmap: ImageBitmap | null;
+        blob?: Blob;
+    }>>;
+    resetCompleteModeBatchCache: () => void;
+    refreshCompletePreviewFromDesignClipBlobs: (clips: SplitPieceDesignClipBlob[]) => void;
+    refreshZonesPreviewQuick: (quickOpts?: {
+        /** 松手后拖动态已结束，用此 id 仅更新当前分片 */
+        focusZoneId?: string | null;
+        /** 为 true 时跳过低清预览最小间隔（松手尽快出图） */
+        skipMinInterval?: boolean;
+    }) => Promise<void>;
+    prewarmZonesPreviewQuick: (target?: any) => Promise<void>;
+    endZonesPreviewQuick: () => void;
+    clearZoneScreenshotCache: () => void;
+    disposeZoneScreenshotWorker: () => void;
+    getPreviewBuildInFlight: () => Promise<void> | null;
+};
+export {};

package/dist/components/Editor/composables/usePreviewUpdateQueue.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 预览更新队列（默认 debounce；可选 immediate 立即执行完整管道）
+ * 负责 queuePreviewUpdate：保存当前 diecut 状态 -> 生成遮罩截图 -> 刷新预览 renderData
+ */
+export type QueuePreviewUpdateMeta = {
+    /** 日志 / 调试来源标识 */
+    source?: string;
+    startTime?: number;
+    /** 为 true 时跳过 debounce，立即执行保存 / 截图 / build（仍会取消尚未执行的 debounce 任务） */
+    immediate?: boolean;
+    /** 拖动中入队时保留：松手后由 flushDeferredPreviewAfterDrag 重放 */
+    deferredFromDrag?: boolean;
+    /** 为 false 时仅提交 quick preview renderData，不做 HD 预览构建 */
+    commitHd?: boolean;
+    /** 为 true 时不触发 generateDiecutScreenshot（极速松手已用 refreshZonesPreviewQuick 出图） */
+    skipDiecutScreenshot?: boolean;
+    /** 为 true 时不执行 buildInitialPreviewRenderData（避免松手后再跑一遍 Three） */
+    skipBuildPreview?: boolean;
+};
+type PreviewBuildOptions = {
+    commitHd?: boolean;
+    skipDiecutScreenshot?: boolean;
+    skipBuildPreview?: boolean;
+};
+export declare function usePreviewUpdateQueue(options: {
+    getSelectedDiecutId: () => string;
+    getHasCanvas: () => boolean;
+    saveCanvasState: (diecutId: string) => Promise<void>;
+    generateDiecutScreenshot: (diecutId: string, precapturedBaseBlob?: Blob | null) => Promise<void>;
+    /**
+     * 后台截图前先同步捕获当前主画布像素。否则 generateDiecutScreenshot 内部 idle capture
+     * 可能晚于分片切换，导致用下一分片画布内容写入上一分片缓存。
+     */
+    captureMainBaseBlob?: () => Promise<Blob | null>;
+    buildInitialPreviewRenderData: (opts?: PreviewBuildOptions) => Promise<void> | void;
+    delay?: number;
+    /** 为 true 时不入队（如批量还原设计时暂停预览刷新） */
+    shouldSkip?: () => boolean;
+    /**
+     * 为 true 时跳过 generateDiecutScreenshot（如 COMPLETE：预览 fabric 列表由 buildCompleteFabricScreenshotList 生成，不依赖 getInverseMaskUrl）
+     */
+    shouldSkipDiecutScreenshot?: () => boolean;
+    /**
+     * generateDiecutScreenshot 成功后清除该 diecut 的 dirty 标记。
+     * 关键优化:user 改了 prev 分片后,queuePreviewUpdate 会异步触发 generateDiecutScreenshot 并 commit
+     * inverse-mask blob。如果不清 dirty,切换分片时 useEditorWatchers 内 isDiecutDirty(prev)=true
+     * 会触发第二次截图(冗余 1-2.5s)。
+     */
+    consumeDiecutDirty?: (id: string) => void;
+    /** 画布对象拖动中：不入队执行截图/build，合并为松手后一次 */
+    getIsDraggingObject?: () => boolean;
+    /**
+     * 松手重放 `deferredWhileDrag` 时调用（与外层 `queuePreviewUpdateRef` 等包装层一致，例如统一注入 commitHd）
+     */
+    replayDeferred?: (reason: string, meta?: QueuePreviewUpdateMeta) => void;
+}): {
+    queuePreviewUpdate: (reason: string, meta?: QueuePreviewUpdateMeta) => void;
+    clearPending: () => void;
+    dispose: () => void;
+    flushDeferredPreviewAfterDrag: () => void;
+};
+export {};

package/dist/components/Editor/composables/useProductData.d.ts

@@ -0,0 +1,166 @@
+import type { ProductItem, BasicInfo, DiecutResponse, DeformationResponse, ProductListApi, ProductDetailApi } from '../../../types';
+export declare function useProductData(props: any, options?: {
+    productListApi?: ProductListApi;
+    productDetailApi?: ProductDetailApi;
+    productListPageSize?: number;
+    productListInitialPage?: number;
+    /** 仅当该 ID 在第一页列表中时才选中，否则 selectedProductIndex 设为 -1 */
+    initialProductId?: string | number;
+}): {
+    isListMode: import("vue").ComputedRef<boolean>;
+    productItemsState: import("vue").Ref<{
+        id?: number | string | undefined;
+        name?: string | undefined;
+        description?: string | undefined;
+        coverImg?: string | undefined;
+    }[], ProductItem[] | {
+        id?: number | string | undefined;
+        name?: string | undefined;
+        description?: string | undefined;
+        coverImg?: string | undefined;
+    }[]>;
+    productTotal: import("vue").Ref<number, number>;
+    productPage: import("vue").Ref<number, number>;
+    productPageSize: import("vue").Ref<number, number>;
+    selectedProductIndex: import("vue").Ref<number, number>;
+    basicInfoState: import("vue").Ref<{
+        id?: number | string | undefined;
+        name?: string | undefined;
+        description?: string | undefined;
+        sizes?: string[] | undefined;
+        colors?: string[] | undefined;
+        colorNamesZh?: string[] | undefined;
+        colorNamesEn?: string[] | undefined;
+        colorsZh?: string[] | undefined;
+        coverImg?: string | undefined;
+        sku?: string | undefined;
+    } | null, BasicInfo | {
+        id?: number | string | undefined;
+        name?: string | undefined;
+        description?: string | undefined;
+        sizes?: string[] | undefined;
+        colors?: string[] | undefined;
+        colorNamesZh?: string[] | undefined;
+        colorNamesEn?: string[] | undefined;
+        colorsZh?: string[] | undefined;
+        coverImg?: string | undefined;
+        sku?: string | undefined;
+    } | null>;
+    diecutDataState: import("vue").Ref<{
+        msg?: string | undefined;
+        code?: number | undefined;
+        data?: {
+            jsonURL?: string | null | undefined;
+            size?: string | undefined;
+            type?: string | undefined;
+            resources?: {
+                groupId?: string | undefined;
+                groupName?: string | undefined;
+                fileName?: string | undefined;
+                url?: string | undefined;
+                type?: string | undefined;
+                width?: number | undefined;
+                height?: number | undefined;
+            }[] | null | undefined;
+            sizeMode?: string | undefined;
+        }[] | undefined;
+    } | null, DiecutResponse | {
+        msg?: string | undefined;
+        code?: number | undefined;
+        data?: {
+            jsonURL?: string | null | undefined;
+            size?: string | undefined;
+            type?: string | undefined;
+            resources?: {
+                groupId?: string | undefined;
+                groupName?: string | undefined;
+                fileName?: string | undefined;
+                url?: string | undefined;
+                type?: string | undefined;
+                width?: number | undefined;
+                height?: number | undefined;
+            }[] | null | undefined;
+            sizeMode?: string | undefined;
+        }[] | undefined;
+    } | null>;
+    deformationDataState: import("vue").Ref<{
+        msg?: string | undefined;
+        code?: number | undefined;
+        data?: {
+            size?: string | undefined;
+            sizeMode?: string | undefined;
+            infos?: {
+                name?: string | undefined;
+                jsonURL?: string | undefined;
+                sort?: number | undefined;
+                resources?: {
+                    name?: string | undefined;
+                    url?: string | undefined;
+                }[] | undefined;
+            }[] | null | undefined;
+        }[] | {
+            color?: string | undefined;
+            sizes?: {
+                size?: string | undefined;
+                sizeMode?: string | undefined;
+                infos?: {
+                    name?: string | undefined;
+                    jsonURL?: string | undefined;
+                    sort?: number | undefined;
+                    resources?: {
+                        name?: string | undefined;
+                        url?: string | undefined;
+                    }[] | undefined;
+                }[] | null | undefined;
+            }[] | undefined;
+        }[] | undefined;
+    } | null, DeformationResponse | {
+        msg?: string | undefined;
+        code?: number | undefined;
+        data?: {
+            size?: string | undefined;
+            sizeMode?: string | undefined;
+            infos?: {
+                name?: string | undefined;
+                jsonURL?: string | undefined;
+                sort?: number | undefined;
+                resources?: {
+                    name?: string | undefined;
+                    url?: string | undefined;
+                }[] | undefined;
+            }[] | null | undefined;
+        }[] | {
+            color?: string | undefined;
+            sizes?: {
+                size?: string | undefined;
+                sizeMode?: string | undefined;
+                infos?: {
+                    name?: string | undefined;
+                    jsonURL?: string | undefined;
+                    sort?: number | undefined;
+                    resources?: {
+                        name?: string | undefined;
+                        url?: string | undefined;
+                    }[] | undefined;
+                }[] | null | undefined;
+            }[] | undefined;
+        }[] | undefined;
+    } | null>;
+    lastProductKey: import("vue").Ref<string | null, string | null>;
+    effectiveBasicInfo: import("vue").ComputedRef<any>;
+    effectiveDiecutData: import("vue").ComputedRef<any>;
+    effectiveDeformationData: import("vue").ComputedRef<any>;
+    productItems: import("vue").ComputedRef<ProductItem[]>;
+    selectedProduct: import("vue").ComputedRef<ProductItem | undefined>;
+    hasProductTotal: import("vue").ComputedRef<boolean>;
+    totalProducts: import("vue").ComputedRef<number>;
+    totalPages: import("vue").ComputedRef<number>;
+    hasPrevPage: import("vue").ComputedRef<boolean>;
+    hasNextPage: import("vue").ComputedRef<boolean>;
+    loadProductList: (page?: number) => Promise<void>;
+    loadProductDetails: (productId: number | string) => Promise<void>;
+    changeProductPage: (nextPage: number) => Promise<void>;
+    getCurrentProductKey: (product: ProductItem | null, basicInfo: BasicInfo | null) => string | null;
+    hasProductChanged: (product: ProductItem | null, basicInfo: BasicInfo | null) => boolean;
+    resetForProductChange: () => void;
+};

package/dist/components/Editor/composables/useSplitPieceHandTool.d.ts

@@ -0,0 +1,34 @@
+/**
+ * COMPLETE 分片蒙版「抓手模式」：关闭时不可拖；开启后双击某片进入可拖状态，再双击同一蒙版仅卸武装（不关闭抓手）；Esc 退出抓手模式。
+ */
+import { type Ref } from 'vue';
+import { type Canvas } from 'fabric';
+export declare function useSplitPieceHandTool(options: {
+    getCanvas: () => Canvas | null;
+    isReadOnly: () => boolean;
+    /** 分片 Guideline 与画布蒙版同步中：勿因 selection 瞬态 disarm（applyEditorGuideLayers 会移除对象触发 cleared） */
+    shouldSuppressSelectionDisarm?: () => boolean;
+    /**
+     * 双击分片蒙版（或虚线映射到蒙版）时聚焦视口；抓手关闭时蒙版 evented:false，仍用几何命中。
+     * 抓手开启且本次双击为「退出武装」时不调用。
+     */
+    onSplitMaskDoubleClickFocus?: (maskObject: any) => void;
+    /** 双击画布空白区域（非对象）时回调，可用于恢复视口与清理焦点提示 */
+    onCanvasBlankDoubleClick?: () => void;
+    /** 鼠标悬浮在分片（含虚线层）上时回调，用于显示交互提示 */
+    onSplitMaskHoverChange?: (payload: {
+        groupId: string;
+        partName: string;
+        clientX: number;
+        clientY: number;
+    } | null) => void;
+}): {
+    handToolActive: Ref<boolean, boolean>;
+    applyMaskInteractionPolicy: () => void;
+    restoreArmedSplitMaskSelection: () => void;
+    isArmedMaskActiveOnCanvas: () => boolean;
+    getArmedGroupId: () => string | null;
+    attachToCanvas: () => void;
+    detachFromCanvas: () => void;
+    resetForNewCanvas: () => void;
+};

package/dist/components/Editor/composables/useTemplateLoader.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 模板加载/模式切换管理 Composable
+ * 负责模板 JSON 加载、画布重置、模式配置获取等
+ */
+import type { Canvas } from 'fabric';
+import type { Ref, ComputedRef } from 'vue';
+export interface TemplateItem {
+    jsonURL?: string;
+    resources?: any[];
+    type?: string;
+    size?: string;
+}
+export interface UseTemplateLoaderOptions {
+    getCanvas: () => Canvas | null;
+    toProxyUrl: (url: string) => string;
+    templateModeOptions: ComputedRef<TemplateItem[]>;
+    selectedSize: Ref<string>;
+    selectedMode: Ref<string>;
+    setLoadingTemplate: (loading: boolean) => void;
+    templateError: Ref<string>;
+    loadCanvasJson: (json: any, onDone?: () => void | Promise<void>) => Promise<void>;
+    clearGuideResources: () => void;
+    renderGuideResources: (resources: any[]) => void;
+    /** 若提供则在 loadTemplateJson 完成后调用（如单片分片可拖动蒙版），否则仍用 renderGuideResources */
+    applyGuideLayers?: (filteredTemplateGuideResources: any[]) => void | Promise<void>;
+    isGuideResource: (resource: any) => boolean;
+    setZoom: (value: number) => void;
+    zoom: Ref<number>;
+    /** 模板 JSON 拉取成功后回调（用于保存快照时把 jsonURL 替换为解析对象） */
+    onTemplateJsonLoaded?: (jsonURL: string, json: unknown) => void;
+}
+export declare function useTemplateLoader(options: UseTemplateLoaderOptions): {
+    resetCanvasForTemplate: () => void;
+    getModeConfig: () => TemplateItem | null;
+    loadTemplateJson: (jsonURL: string, resources?: any[]) => Promise<void>;
+};