From c005b85c063d211396735ebd9067a0b10ab28f78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Fri, 6 Feb 2026 11:11:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=94=BB=E5=B8=83loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Canvas/CanvasEditor/index.vue   | 3330 ++++++++---------
 .../CanvasEditor/managers/CanvasManager.js    |    4 +-
 2 files changed, 1655 insertions(+), 1679 deletions(-)

diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 53f4455b..d0bd2bf4 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -1,1739 +1,1717 @@
 <script setup>
-import {
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  defineAsyncComponent,
-  shallowRef,
-  provide,
-  defineExpose,
-  nextTick,
-  watchEffect,
-} from "vue";
-import { CanvasManager } from "./managers/CanvasManager";
-import { LayerManager } from "./managers/LayerManager";
-import { CommandManager } from "./managers/command/CommandManager";
-import { KeyboardManager } from "./managers/events/KeyboardManager.js";
-import CanvasConfig from "./config/canvasConfig.js";
-import { LiquifyManager } from "./managers/liquify/LiquifyManager";
-import { SelectionManager } from "./managers/selection/SelectionManager";
-import { PartManager } from "./managers/PartManager";
-import { RedGreenModeManager } from "./managers/RedGreenModeManager";
-import texturePresetManager from "./managers/brushes/TexturePresetManager";
-import { BrushStore } from "./store/BrushStore";
-import cuowuImg from "@/assets/images/homePage/cuowu.svg";
-import { Https } from "@/tool/https";
-import SelectImages from "@/component/common/SelectImages.vue";
-import CropImage from "./components/CropImage.vue";
-import { UrlToFile } from "@/tool/util";
-
-// import { MinimapManager } from "./managers/minimap/MinimapManager";
-
-// 导入封装的组件
-import ToolsSidebar from "./components/ToolsSidebar.vue";
-import HeaderMenu from "./components/HeaderMenu.vue";
-import LayersPanel from "./components/LayersPanel/LayersPanel.vue";
-import BrushControlPanel from "./components/BrushControlPanel.vue";
-import TextEditorPanel from "./components/TextEditorPanel.vue"; // 引入文本编辑面板
-import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑面板
-import PalletPanel from "./components/PalletPanel/index.vue";
-import SelectMenuPanel from "./components/SelectMenuPanel/index.vue"; // 引入选择工具菜单组件
-import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
-import PartSelectorPanel from "./components/PartSelectorPanel.vue"; // 引入部件选取面板
-import { LayerType, OperationType } from "./utils/layerHelper.js";
-import { ToolManager } from "./managers/ToolManager.js";
-import { fabric } from "fabric-with-all";
-import {
-  uploadImageAndCreateLayer,
-  loadImageUrlToLayer,
-  loadImage,
-  resizeImage,
-} from "./utils/imageHelper.js";
-import { optimizeCanvasRendering } from "./utils/helper";
-// import MinimapPanel from "./components/MinimapPanel.vue";
-import { useI18n } from "vue-i18n";
-const { t } = useI18n();
-const KeyboardShortcutHelp = defineAsyncComponent(() =>
-  import("./components/KeyboardShortcutHelp.vue")
-);
-
-const emit = defineEmits([
-  "trigger-red-green-mouseup", // 红绿图模式鼠标抬起事件
-  "changeCanvas", // 画布变更事件
-  "canvasInit", // 画布初始化事件
-  "canvas-load-json-success", // 画布加载JSON成功事件
-  "trigger-library", // 触发打开Library选择图片事件
-  "before-unmount-export-extra-info", // 组件卸载前导出额外信息事件
-]);
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: "", // 默认空
-  },
-  canvasJSON: {
-    type: [Object, String],
-    default: "", // 默认空
-  },
-  config: {
-    type: Object,
-    default: () => CanvasConfig, // 默认配置
-  },
-  isChangeCanvasSize: {
-    type: Boolean,
-    default: true, // 是否允许修改画布大小
-  },
-  showLayersPanel: {
-    type: Boolean,
-    default: true, // 是否显示图层面板
-  },
-  enabledRedGreenMode: {
-    type: Boolean,
-    default: false, // 是否启用红绿图模式
-  },
-  clothingMinIOPath: {
-    type: String,
-    default: "", // 衣服底图URL-线稿miniIo地址（传入后启动部件选取功能）
-  },
-  clothingImageUrl: {
-    type: String,
-    default: "", // 衣服底图URL-线稿
-  },
-  clothingImageUrl2: {
-    type: String,
-    default: "", // 衣服底图URL-上色
-  },
-  redGreenImageUrl: {
-    type: String,
-    default: "", // 红绿图URL
-  },
-  clothingImageOpts: {
-    type: Object,
-    default: () => {
-      return {
-        scaleX: 1,
-        scaleY: 1,
-      };
-    },
-  },
-  isFixedErasable: {
-    type: Boolean,
-    default: false, // 是否允许擦除固定图层
-  },
-  isBackgroundErasable: {
-    type: Boolean,
-    default: false, // 是否允许擦除背景图层
-  },
-  isBackgroundChangeable: {
-    type: Boolean,
-    default: true, // 是否允许修改背景图层
-  },
-  showFixedLayer: {
-    type: Boolean,
-    default: false, // 是否显示固定图层
-  },
-  isGeneral: {
-    // 从generalMiniCanvas来的
-    type: Boolean,
-    default: false,
-  },
-  isEdit: {
-    // 从design点击喜欢过的图片,再点击顶部的编辑图标
-    type: Boolean,
-    default: false,
-  },
-  hideCanvas: {
-    type: Boolean,
-    default: false, // 是否隐藏画布-隐藏关闭部分功能
-  },
-});
-console.log("config",props.config)
-const loading = ref(false); 
-// 引用和状态
-const canvasRef = ref(null);
-const canvasContainerRef = shallowRef(null);
-const imageUploadRef = ref(null);
-const currentZoom = ref(100);
-const appContainerRef = ref(null);
-
-// 画布设置
-const canvasWidth = ref(props.config.width);
-const canvasHeight = ref(props.config.height);
-const canvasColor = ref(props.config.backgroundColor);
-// const layerWidth = ref(CanvasConfig.layerWidth);
-const brushSize = ref(CanvasConfig.brushSize); // 画笔大小
-const canvasManagerLoaded = ref(false); //  画布是否加载完成
-
-// 红绿图模式状态
-const isRedGreenMode = ref(false);
-
-const isShowLayerPanel = ref(false); // 是否显示图层面板
-
-provide("isShowLayerPanel", isShowLayerPanel); // 提供红绿图模式状态给子组件
-
-// 小地图设置
-// const minimapEnabled = ref(true);
-// const minimapManager = ref(null);
-
-// 图层和元素管理
-const layers = ref([]);
-const activeLayerId = ref(null);
-const activeElementId = ref(null);
-const lastSelectLayerId = ref(null); // 最后选择的图层ID
-
-// 当前选择的工具
-const activeTool = ref(CanvasConfig.defaultTool); // 默认工具
-
-//监听画布元素宽度是否发生变化
-let observer = null;
-let observerTime = null; //加入防抖
-
-// 管理器实例
-let canvasManager = null;
-let layerManager = null;
-let commandManager = null;
-let keyboardManager = null;
-let toolManager = null;
-let liquifyManager = null;
-let selectionManager = null;
-let partManager = null;
-let redGreenModeManager = null;
-
-// 快捷键帮助模态框状态
-const showShortcutHelp = ref(false);
-
-function toggleShortcutHelp() {
-  showShortcutHelp.value = !showShortcutHelp.value;
-}
-
-watch(()=>props.hideCanvas, (newVal)=>{
-	console.log("==========是否隐藏画布",newVal)
-  if(newVal){
-    keyboardManager?.removeEvents()
-  }else {
-	keyboardManager?.init()
-  }
-})
-
-// 工具选择处理
-function handleToolSelect(tool) {
-  activeTool.value = tool;
-  // toolManager.setActiveTool(tool); // 更新工具管理器中的当前工具  普通模式，不可撤回操作
-  toolManager.setToolWithCommand(tool, {
-    undoable: props.enabledRedGreenMode ? false : true, // 普通模式下工具选择不可撤销
-  }); // 命令模式 可撤回操作
-}
-
-// 触发组件初始化事件
-function handleCanvasInit(isLoadJson = false) {
-  emit("canvasInit", {
-    isLoadJson: isLoadJson ?? !!props.canvasJSON, // 是否加载了JSON数据
-    isRedGreenMode: isRedGreenMode.value,
-    layers,
-    activeLayerId,
-    canvasManager,
-    layerManager,
-    commandManager,
-    toolManager,
-    keyboardManager,
-    liquifyManager,
-    selectionManager,
-    partManager,
-    redGreenModeManager,
-  });
-}
-
-function toggleMinimap(enabled) {
-  // minimapEnabled.value = enabled;
-  // if (minimapManager.value) {
-  //   minimapManager.value.setVisibility(enabled);
-  // }
-}
-
-// 初始化画布
-onMounted(async () => {
-  // 设置BrushStore的全局引用，供BaseBrush使用
-  if (typeof window !== "undefined") {
-    window.BrushStore = BrushStore;
-  }
-
-  // 如果启用了红绿图模式，设置画布大小为默认值
-  if (props.enabledRedGreenMode) {
-    canvasHeight.value = canvasContainerRef.value.clientWidth;
-    canvasWidth.value = canvasContainerRef.value.clientHeight;
-  }
-
-  // 创建管理器实例
-  canvasManager = new CanvasManager(canvasRef.value, {
-    width: canvasContainerRef.value.clientWidth,
-    height: canvasContainerRef.value.clientHeight,
-    // backgroundColor: canvasColor.value,
-    currentZoom,
-    layers,
-    lastSelectLayerId,
-    canvasWidth,
-    canvasHeight,
-    canvasColor,
-    enabledRedGreenMode: props.enabledRedGreenMode,
-    isFixedErasable: props.isFixedErasable,
-	props,
-	emit,
-  });
-  canvasManager.canvas.activeLayerId = activeLayerId;
-  canvasManager.activeLayerId = activeLayerId;
-  canvasManager.canvas.activeElementId = activeElementId;
-  canvasManager.canvas.loading = loading;
-
-  // 创建命令管理器
-  commandManager = new CommandManager({
-    canvas: canvasManager.canvas,
-    autoSaveState: true,
-  });
-
-  // 创建图层管理器
-  layerManager = new LayerManager({
-    canvas: canvasManager.canvas,
-    canvasWidth: canvasWidth.value,
-    canvasHeight: canvasHeight.value,
-    backgroundColor: canvasColor,
-    isRedGreenMode: props.enabledRedGreenMode,
-    lastSelectLayerId,
-    layers,
-    activeLayerId,
-    canvasManager, // 添加对 canvasManager 的引用
-    commandManager, // 添加对命令管理器的引用
-    t, // 国际化函数
-  });
-
-  // commandManager.setLayerManager(layerManager); // 设置命令管理器需要访问的图层数据
-
-  // 设置缩略图管理器需要访问的图层数据
-  // canvasManager.layers = layers;
-
-  // 创建工具管理器实例
-  toolManager = new ToolManager({
-    canvas: canvasManager.canvas, // fabric.js 画布实例
-    commandManager, // 命令管理器实例，用于撤销/重做
-    canvasManager, // 画布管理器实例
-    layerManager,
-    activeTool, // 响应式引用，存储当前选中的工具
-    brushSize: brushSize.value, // 可选，初始画笔大小
-    t, // 国际化函数
-  });
-
-  // 初始化文本编辑功能
-  toolManager.setupTextEditingEvents();
-
-  toolManager.setFileUploadHandler(triggerImageUpload); // 设置快捷图片上传处理函数
-
-  layerManager.setToolManager(toolManager); // 将工具管理器传递给图层管理器
-  canvasManager.setToolManager(toolManager); // 将工具管理器传递给画布管理器
-  canvasManager.setLayerManager(layerManager);
-  canvasManager.setCommandManager(commandManager); // 将命令管理器传递给画布管理器
-
-  // 初始化快捷键管理器
-  keyboardManager = new KeyboardManager({
-    canvas: canvasManager.canvas,
-    commandManager,
-    layerManager,
-    canvasManager,
-    toolManager,
-	isRedGreenMode,
-	pasteText: (text) => {
-    //   console.log("粘贴的文本:", text);
-	  handleAddText(text);
-    },
-    pasteImage: (file) => {
-    //   console.log("粘贴的图片:", file);
-	  uploadImageAndCreateLayer({
-		file,
-		layerManager,
-		toolManager,
-		canvas: canvasManager.canvas,
-	  });
-    },
-  });
-
-  // 绑定快捷键事件
-  if(!props.hideCanvas) keyboardManager.init();
-  // 绑定画布操作事件
-  canvasManager.setupCanvasEvents(activeElementId, layerManager);
-  canvasManager.setupCanvasInitEvent(handleCanvasInit); // 绑定画布初始化事件
-
-  provide("canvasManager", canvasManager); // 提供给子组件使用
-  provide("layerManager", layerManager); // 提供给子组件使用
-  provide("commandManager", commandManager); // 提供给子组件使用
-  provide("toolManager", toolManager); // 提供给子组件使用
-  provide("keyboardManager", keyboardManager); // 提供给子组件使用
-  provide("activeTool", activeTool); // 提供给子组件使用
-  provide("liquifyManager", () => liquifyManager); // 提供液化管理器
-  provide("texturePresetManager", texturePresetManager); // 提供纹理预设管理器
-  provide("layers", layers); // 提供图层数据
-  provide("lastSelectLayerId", lastSelectLayerId); // 提供最后选择的图层ID
-
-  // 初始化网格设置
-  // toggleGridVisibility(gridEnabled.value);
-
-  // 初始化小地图
-  // minimapManager.value = new MinimapManager(canvasManager.canvas);
-
-  // 初始化液化管理器
-  liquifyManager = new LiquifyManager({
-    canvas: canvasManager.canvas,
-    layerManager,
-  });
-  // 将liquifyManager设置到canvasManager中，确保ToolManager能访问到它
-  canvasManager.setLiquifyManager(liquifyManager);
-
-  // 初始化选区管理器
-  selectionManager = new SelectionManager({
-    canvas: canvasManager.canvas,
-    layerManager,
-	props,
-  });
-  canvasManager.setSelectionManager(selectionManager);
-
-  // 初始化部件选择管理器
-  partManager = new PartManager({
-    canvas: canvasManager.canvas,
-    layerManager,
-    canvasManager,
-	selectionManager,
-    toolManager,
-	commandManager,
-	props,
-  });
-  canvasManager.setPartManager(partManager);
-
-  if (props.canvasJSON) {
-    // 如果传入了初始JSON数据，加载到画布上
-    if (typeof props.canvasJSON === "string") {
-      try {
-        await canvasManager.loadJSON(props.canvasJSON);
-      } catch (error) {
-        console.error("加载画布JSON失败:", error);
-        // 初始化图层 - 确保创建背景层
-        await layerManager.initializeLayers();
-      }
-    } else if (typeof props.canvasJSON === "object") {
-      await canvasManager.loadJSON(JSON.stringify(props.canvasJSON));
-    }
-  } else {
-    // 初始化图层 - 确保创建背景层
-    await layerManager.initializeLayers();
-  }
-
-  if (
-    props.enabledRedGreenMode &&
-    props.clothingImageUrl &&
-    props.redGreenImageUrl
-  ) {
-    canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色    // 初始化红绿图模式管理器
-    redGreenModeManager = new RedGreenModeManager({
-      canvas: canvasManager.canvas,
-      canvasManager,
-      layerManager,
-      toolManager,
-      commandManager,
-      clothingImageOpts: props.clothingImageOpts,
-    });
-
-    canvasManager.setRedGreenModeManager(redGreenModeManager);
-
-    // 如果提供了图片URL，立即初始化红绿图模式
-    if (props.clothingImageUrl && props.redGreenImageUrl) {
-      try {
-        await redGreenModeManager.initialize({
-          clothingImageUrl: props.clothingImageUrl,
-          redGreenImageUrl: props.redGreenImageUrl,
-          onImageGenerated: (imageData) => {
-            console.log("红绿图生成:", imageData);
-            // 这里可以添加图片生成后的回调处理
-            emit("trigger-red-green-mouseup", imageData);
-          },
-        });
-
-        // 设置红绿图模式状态
-        isRedGreenMode.value = true;
-
-        console.log("红绿图模式已自动启用");
-      } catch (error) {
-        console.error("红绿图模式初始化失败:", error);
-      }
-    }
-
-    // 初始设置
-    handleWindowResize(); // 设置画布大小
-  } else if (!isRedGreenMode.value && props.clothingImageUrl) {
-    try {
-      await canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
-        undoable: false, // 不可撤销操作
-        ...(props?.clothingImageOpts || {}),
-      });
-    } catch (error) {
-      console.error("更换底图失败:", error);
-    }
-
-    canvasManager?.centerBackgroundLayer?.(
-      canvasManager.canvas.width,
-      canvasManager.canvas.height
-    );
-  }
-
-  // // 设置固定图层是否可擦除
-  // canvasManager.setFixedLayerErasable({
-  //   type: "isFixed",
-  //   flag: !props.isFixedErasable, // 设置操作类型为可擦除
-  // });
-  // // 设置背景图层是否可擦除
-  // canvasManager.setFixedLayerErasable({
-  //   type: "isBackground",
-  //   flag: !props.isBackgroundErasable, // 设置操作类型为可擦除
-  // });
-
-  canvasManagerLoaded.value = true;
-
-  // 添加删除按钮
-  // if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
-  addRemoveBtn(removeLayer);
-
-  // 触发组件初始化事件
-  nextTick(() => {
-    // 确保所有依赖都已加载完成
-    handleCanvasInit();
-	emit("canvas-load-json-success");
-    setTimeout(() => {
-      // 初始状态下生成所有预览图
-      canvasManager?.updateAllThumbnails?.();
-    }, 500);
-  });
-
-  let trailingTimeout = null;
-  observer = new ResizeObserver((entries) => {
-    clearTimeout(trailingTimeout);
-    trailingTimeout = setTimeout(async () => {
-		if(canvasManager.awaitCanvasRun) await canvasManager.awaitCanvasRun();
-		handleWindowResize()
-    }, 100);
-  });
-  observer.observe(canvasContainerRef.value);
-  // 使用window的resize事件代替ResizeObserver
-  // 只有当窗口大小变化时才更新画布尺寸
-  //   window.addEventListener("resize", handleWindowResize);
-  setInitZoom();
-});
-
-watchEffect(() => {
-  // 设置固定图层是否可擦除
-  if (canvasManagerLoaded.value) {
-    canvasManager?.setFixedLayerErasable({
-      type: "isFixed",
-      flag: !props.isFixedErasable, // 设置操作类型为可擦除
-    });
-    // 设置背景图层是否可擦除
-    canvasManager?.setFixedLayerErasable({
-      type: "isBackground",
-      flag: !props.isBackgroundErasable, // 设置操作类型为可擦除
-    });
-  }
-});
-
-onBeforeUnmount(async () => {
-  observer.unobserve(canvasContainerRef.value);
-//   const extraInfo = await canvasManager.exportExtraInfo();
-//   emit("before-unmount-export-extra-info", extraInfo);
-
-  console.log("onBeforeUnmount  组件卸载，清理资源...");
-  canvasManager?.dispose?.();
-  commandManager?.dispose?.();
-  layerManager?.dispose?.();
-  keyboardManager?.dispose?.();
-  toolManager?.dispose?.();
-  liquifyManager?.dispose?.();
-  selectionManager?.dispose?.();
-  partManager?.dispose?.();
-  redGreenModeManager?.dispose?.();
-//   minimapManager?.dispose?.();
-  canvasManager = null;
-  commandManager = null;
-  layerManager = null;
-  keyboardManager = null;
-  toolManager = null;
-  liquifyManager = null;
-  selectionManager = null;
-  partManager = null;
-  redGreenModeManager = null;
-  //   fabric.Object.prototype.controls.deleteControl = undefined;
-
-  // 移除window resize事件监听
-  //   window.removeEventListener("resize", handleWindowResize);
-});
-
-// 窗口大小变化处理函数
-async function handleWindowResize() {
-  console.log("==========画布窗口大小变化==========");
-  // 使用requestAnimationFrame来防止频繁更新
-  await new Promise(requestAnimationFrame);
-  if(!canvasManager) return;
-  await updateCanvasSize();
-  // 确保显示的缩放信息是最新的
-  await setInitZoom();
-  await new Promise(requestAnimationFrame);
-  await layerManager?.updateLayersObjectsInteractivity?.();
-}
-
-async function setInitZoom(){
-  if (props.config.initZoom && !props.enabledRedGreenMode) {
-    const width = canvasManager.width;
-    const height = canvasManager.height;
-    const cwidth = canvasWidth.value;
-    const cheight = canvasHeight.value;
-    let zoom = Math.min(1, width / cwidth, height / cheight);
-    if (zoom < 1) zoom -= 0.05;
-    await setZoom(zoom); // 设置画布缩放
-  }else{
-    currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
-  }
-}
-
-function resetZoom() {
-  canvasManager.resetZoom();
-}
-async function setZoom(zoom) {
-  await new Promise(requestAnimationFrame);
-  if (!canvasManager) return;
-  const newZoom = Math.max(zoom, 0.1);
-  // 使用画布中心作为缩放点
-  const centerPoint = {
-    x: canvasManager.canvas.width / 2,
-    y: canvasManager.canvas.height / 2,
-  };
-  canvasManager.animateZoom(centerPoint, newZoom);
-}
-
-function zoomIn() {
-  if (!canvasManager) return;
-
-  const currentZoom = canvasManager.canvas.getZoom();
-  const newZoom = Math.min(currentZoom * 1.2, 20); // 增加20%，最大20倍
-
-  // 使用画布中心作为缩放点
-  const centerPoint = {
-    x: canvasManager.canvas.width / 2,
-    y: canvasManager.canvas.height / 2,
-  };
-
-  canvasManager.animateZoom(centerPoint, newZoom);
-}
-
-function zoomOut() {
-  if (!canvasManager) return;
-
-  const currentZoom = canvasManager.canvas.getZoom();
-  const newZoom = Math.max(currentZoom / 1.2, 0.1); // 减少20%，最小0.1倍
-
-  // 使用画布中心作为缩放点
-  const centerPoint = {
-    x: canvasManager.canvas.width / 2,
-    y: canvasManager.canvas.height / 2,
-  };
-  canvasManager.animateZoom(centerPoint, newZoom);
-}
-
-async function updateCanvasSize() {
-  if (canvasManager && canvasContainerRef.value) {
-    const containerWidth = canvasContainerRef.value.clientWidth;
-    const containerHeight = canvasContainerRef.value.clientHeight;
-
-    // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
-    await canvasManager.setCanvasSize(containerWidth, containerHeight);
-
-    // // 如果启用了红绿图模式，使用 layerManager 的缩放方法
-    // if (props.enabledRedGreenMode && layerManager) {
-    //   layerManager.resizeCanvasWithScale(containerWidth, containerHeight, {
-    //     undoable: false, // 可撤销操作
-    //   });
-    // } else {
-    //   // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
-    //   canvasManager.setCanvasSize(containerWidth, containerHeight);
-    // }
-  }
-}
-
-function updateCanvasColor() {
-  canvasManager.setCanvasColor(canvasColor.value);
-}
-function createLayerName(){
-	const layer = t("Canvas.layer")
-	// 检查图层名称是否已存在
-    let layerIndex = 1;
-	let layerName = `${layer + " " + layerIndex}`;
-    while (layerManager.getLayerByName(layerName)) {
-      layerIndex++;
-      layerName = `${layer} ${layerIndex}`;
-    }
-    return layerName;
-}
-async function addLayer() {
-  await layerManager.createLayer(createLayerName());
-}
-async function addTopLayer() {
-  await layerManager.createLayer(createLayerName(), LayerType.EMPTY, {
-    insertTop: true,
-  });
-}
-
-function setActiveLayer(layerId) {
-  if (layerId !== activeLayerId.value) {
-    layerManager.setActiveLayer(layerId, {
-      undoable: true, // 可撤销
-    });
-
-    const activeObject = canvasManager.canvas.getActiveObject();
-    if (activeObject) {
-      canvasManager.canvas.discardActiveObject();
-      canvasManager.canvas.renderAll();
-    }
-  }
-}
-
-function toggleLayerVisibility(layerId) {
-  layerManager.toggleLayerVisibility(layerId, activeElementId.value);
-}
-
-function moveLayerUp(layerId) {
-  // 使用命令管理器执行移动图层命令，传递正确的方向参数
-  layerManager.moveLayer(layerId, "up");
-}
-
-function moveLayerDown(layerId) {
-  // 使用命令管理器执行移动图层命令，传递正确的方向参数
-  layerManager.moveLayer(layerId, "down");
-}
-
-function addRemoveBtn(fun) {
-  //添加删除按钮
-  const deleteIcon = cuowuImg;
-  // 创建删除图片元素
-  let deleteImg = document.createElement("img");
-  deleteImg.src = deleteIcon;
-  function renderIcon(icon) {
-    return function (ctx, left, top, styleOverride, fabricObject) {
-      var size = this.cornerSize;
-      ctx.save();
-      ctx.translate(left, top);
-      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
-      ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5);
-      ctx.restore();
-    };
-  }
-  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
-    x: 0.5,
-    y: -0.5,
-    offsetY: -16,
-    offsetX: 16,
-    cursorStyle: "pointer",
-    mouseUpHandler: deleteFun,
-    render: renderIcon(deleteImg),
-    cornerSize: 24,
-  });
-}
-
-function deleteFun(e, control) {
-  const target = control.target;
-  if(target.onDelete){
-	target.onDelete(target);
-  }else if(target.id){
-    removeLayer(layerManager?.activeLayerId?.value);
-  }
-}
-
-function removeLayer(layerId) {
-	if(layerId)layerManager.removeLayer(layerId);
-}
-
-function triggerImageUpload() {
-  imageUploadRef.value.click();
-}
-
-function handleImageUpload(event) {
-  const file = event.target.files[0];
-  if (!file) return;
-
-  // 导入新的图片处理辅助函数
-  // 显示加载中状态
-  const loadingMessage = "正在处理图片...";
-  console.log(loadingMessage);
-
-  uploadImageAndCreateLayer({
-    file,
-    layerManager,
-    toolManager,
-    canvas: canvasManager.canvas,
-  })
-    .then((layerId) => {
-      console.log(`图片上传成功，已创建图层: ${layerId}`);
-
-      // 清空文件输入，允许再次选择相同的文件
-      if (imageUploadRef.value) {
-        imageUploadRef.value.value = "";
-      }
-    })
-    .catch((error) => {
-      console.error("图片上传失败:", error);
-    });
-}
-
-const selectImages = ref(null);
-const handleImageSelect = (data) => {
-  UrlToFile(data.url, data.name).then((file) => {
-    handleImageUpload({ target: { files: [file] } });
-  });
-};
-function triggerLibrary() {
-  // console.log('CanvasEditor', '打开收藏')
-  if (props.isGeneral || props.isEdit) {
-    selectImages.value.init();
-  } else {
-    emit("trigger-library");
-  }
-}
-
-function handleAddText(text) {
-  if (toolManager && canvasManager && canvasManager.canvas) {
-    // 在画布中央创建文本
-    const canvasCenter = canvasManager.canvas.getCenter();
-    toolManager.createText(canvasCenter.left, canvasCenter.top, text);
-  }
-}
-
-// 红绿图模式切换处理
-function toggleRedGreenMode() {
-  if (!redGreenModeManager) return;
-
-  isRedGreenMode.value = !isRedGreenMode.value;
-
-  if (isRedGreenMode.value) {
-    redGreenModeManager.enterRedGreenMode();
-    // 切换到红色画笔工具
-    handleToolSelect("redBrush");
-  } else {
-    redGreenModeManager.exitRedGreenMode();
-    // 恢复到默认工具
-    handleToolSelect(CanvasConfig.defaultTool);
-  }
-}
-
-// 红绿图模式工具切换处理
-function handleRedGreenToolSelect(tool) {
-  if (!isRedGreenMode.value) return;
-
-  switch (tool) {
-    case "redBrush":
-    case "greenBrush":
-    case "eraser":
-      handleToolSelect(tool);
-      break;
-    default:
-      // 在红绿图模式下，只允许特定工具
-      break;
-  }
-}
-
-// 处理图层拖拽排序
-function handleLayersReorder(reorderData) {
-  const { oldIndex, newIndex, layerId } = reorderData;
-
-  if (layerManager && layerManager.reorderLayers) {
-    const success = layerManager.reorderLayers(oldIndex, newIndex, layerId);
-
-    if (success) {
-      console.log(
-        `图层 ${layerId} 已从位置 ${oldIndex} 移动到位置 ${newIndex}`
-      );
-
-      // 更新画布渲染顺序
-      if (canvasManager) {
-        canvasManager.canvas.renderAll();
-      }
-    } else {
-      console.warn("图层排序失败");
-    }
-  }
-}
-
-// 处理子图层拖拽排序
-function handleChildLayersReorder(reorderData) {
-  const { parentId, oldIndex, newIndex, layerId } = reorderData;
-
-  if (layerManager && layerManager.reorderChildLayers) {
-    const success = layerManager.reorderChildLayers(
-      parentId,
-      oldIndex,
-      newIndex,
-      layerId
-    );
-
-    if (success) {
-      console.log(
-        `子图层 ${layerId} 在父图层 ${parentId} 中已从位置 ${oldIndex} 移动到位置 ${newIndex}`
-      );
-
-      // 更新画布渲染顺序
-      if (canvasManager) {
-        canvasManager.canvas.renderAll();
-      }
-    } else {
-      console.warn("子图层排序失败");
-    }
-  }
-}
-
-// 处理画布变更事件
-const changeCanvas = async (command) => {
-  const commandData = {
-    isChange: command.canUndo || command.canRedo, // 是否有可撤销或可重做的操作
-    ...command, // 传递完整的命令数据
-  };
-  emit("changeCanvas", commandData);
-  canvasManager.changeCanvas();
-  if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
-    setTimeout(async () => {
-	  try {
-		const imageData = await canvasManager.exportImage({
-			restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
-			isCropByBg: true,
-		});
-		emit("trigger-red-green-mouseup", imageData);
-	  } catch (error) {
-		
-	  }
-    }, 100);
-  }
-};
-
-const cropImageRef = ref(null);
-const cropImage = (url) => {
-  return cropImageRef.value.open(url)
-};
-provide("cropImage", cropImage); // 提供给子组件使用
-// 颜色选择器组件
-const palletPanelRef = ref(null);
-const palletPanel = (url) => {
-  return palletPanelRef.value.open(url)
-};
-provide("palletPanel", palletPanel); // 提供给子组件使用
-
-
-
-// 处理画布容器的拖放事件
-const isDragOver = ref(false);
-const canvasDragover = (e) => {
-  e.preventDefault();
-  if (isRedGreenMode.value) return;
-  const types = e.dataTransfer.types;
-  isDragOver.value = types.includes("Files");
-};
-
-// 处理画布容器的拖离事件
-const canvasDragleave = (e) => {
-  e.preventDefault();
-  if (isRedGreenMode.value) return;
-  isDragOver.value = false;
-};
-
-// 处理画布容器的拖放事件
-const canvasDragdrop = (e) => {
-  e.preventDefault();
-  if (isRedGreenMode.value) return;
-  isDragOver.value = false;
-  const files = e.dataTransfer.files;
-  for (const file of files) {
-    if (file.type.startsWith("image/")) {
-      handleImageUpload({ target: { files: [file] } });
-    }
-  }
-};
-
-// 提供外部ref实例方法
-defineExpose({
-  layers, // 图层数据
-  activeTool, // 当前选中的工具
-  getCanvasManager: () => canvasManager, // 获取画布管理器实例
-  // type : isBackground   isFixed    flag:  是否可擦除图层
-  setFixedLayerErasable: ({ type = "isFixed", flag = false }) => {
-    canvasManager?.setFixedLayerErasable({
-      type,
-      flag, // 设置操作类型为可擦除
-    });
-  }, // 获取fabric画布实例
-  canvasManagerLoaded,
-  // 加载新数据到画布
-  loadJSON: (json, calllBack) => {
-    try {
-      if (json) canvasManager?.loadJSON?.(json, calllBack);
-      return true;
-    } catch (error) {
-      console.error("加载画布JSON失败:", error);
-      return false;
-    }
-  },
-  // 获取当前画布的JSON数据
-  getJSON: () => {
-    return canvasManager?.getJSON?.();
-  },
-  // (更换底图，不可撤销，不可操作)
-  changeFixedImage: (url, opts) => {
-    return canvasManager?.changeFixedImage?.(url, {
-      ...(props?.clothingImageOpts || {}),
-      ...opts,
-    });
-  },
-  updateOtherLayers: async (otherData) => {
-	await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve));
-    await canvasManager?.createOtherLayers?.(otherData);
-	layerManager.activeLayerId.value = ""
-	layerManager?.sortLayers();
-	await layerManager?.updateLayersObjectsInteractivity?.(true);
-	canvasManager?.canvas?.renderAll();
-	setTimeout(() => {
-      canvasManager?.updateAllThumbnails();
-    }, 500);
-	return true;
-  },
-  //图片url或者base64
-  addImageToLayer: async (
-    url,
-    { layerId, undoable, ...optios } = { layerId: null, undoable: true } // 可选参数 layerId  指定图层  将内容添加到指定图层   undoable 是否可撤销  false不可撤销  默认可撤销
-  ) => {
-    if (!url) return Promise.reject(new Error("图片URL不能为空"));
-    if (layerId) {
-      const fabricImage = await loadImage(url);
-      // 如果指定了图层ID，确保图层存在
-      return await canvasManager?.addImageToLayer?.({
-        targetLayerId: layerId,
-        fabricImage,
-        undoable, // 是否可撤销操作
-        ...optios,
-      });
-    }
-
-    // 未指定图层ID，默认添加到新的图层
-    return await loadImageUrlToLayer(
-      {
-        imageUrl: url,
-        layerManager,
-        canvas: canvasManager.canvas,
-        toolManager,
-      },
-      { undoable, ...optios }
-    );
-  },
-  // 导出图片
-  exportImage: async ({
-    isContainBg = false, // 是否包含背景图层
-    isContainFixed = false, // 是否包含固定图层
-	isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
-	isPrintTrimsNoRepeat = true, // 是否包含印花图层的不平铺
-	isPrintTrimsRepeat = true, // 是否包含印花图层的平铺
-	isContainNormalLayer = true, // 是否包含普通图层
-    isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小
-    layerId = "", // 导出具体图层ID
-    layerIdArray = [], // 导出多个图层ID数组
-    expPicType = "png", // 导出图片类型  JPG 或 PNG ,SVG
-    isEnhanceImg, // 是否是增强图片
-	width = 0,// 导出的图片宽度
-	height = 0, // 导出的图片高度
-  } = {}) => {
-	canvasManager?.canvas?.discardActiveObject();
-    var base64 = await canvasManager.exportImage({
-      isContainBg,
-      isContainFixed,
-	  isContainFixedOther,
-	  isPrintTrimsNoRepeat,
-	  isPrintTrimsRepeat,
-	  isContainNormalLayer,
-      isCropByBg,
-      layerId,
-      layerIdArray,
-      expPicType,
-      isEnhanceImg,
-    });
-	console.log('导出图片完成',)
-	if(width > 0 && height > 0){
-		base64 = await resizeImage(base64, width, height);
+	import {
+		ref,
+		onMounted,
+		onBeforeUnmount,
+		defineAsyncComponent,
+		shallowRef,
+		provide,
+		defineExpose,
+		nextTick,
+		watchEffect
+	} from "vue"
+	import { CanvasManager } from "./managers/CanvasManager"
+	import { LayerManager } from "./managers/LayerManager"
+	import { CommandManager } from "./managers/command/CommandManager"
+	import { KeyboardManager } from "./managers/events/KeyboardManager.js"
+	import CanvasConfig from "./config/canvasConfig.js"
+	import { LiquifyManager } from "./managers/liquify/LiquifyManager"
+	import { SelectionManager } from "./managers/selection/SelectionManager"
+	import { PartManager } from "./managers/PartManager"
+	import { RedGreenModeManager } from "./managers/RedGreenModeManager"
+	import texturePresetManager from "./managers/brushes/TexturePresetManager"
+	import { BrushStore } from "./store/BrushStore"
+	import cuowuImg from "@/assets/images/homePage/cuowu.svg"
+	import { Https } from "@/tool/https"
+	import SelectImages from "@/component/common/SelectImages.vue"
+	import CropImage from "./components/CropImage.vue"
+	import { UrlToFile } from "@/tool/util"
+
+	// import { MinimapManager } from "./managers/minimap/MinimapManager";
+
+	// 导入封装的组件
+	import ToolsSidebar from "./components/ToolsSidebar.vue"
+	import HeaderMenu from "./components/HeaderMenu.vue"
+	import LayersPanel from "./components/LayersPanel/LayersPanel.vue"
+	import BrushControlPanel from "./components/BrushControlPanel.vue"
+	import TextEditorPanel from "./components/TextEditorPanel.vue" // 引入文本编辑面板
+	import LiquifyPanel from "./components/LiquifyPanel.vue" // 引入液化编辑面板
+	import PalletPanel from "./components/PalletPanel/index.vue"
+	import SelectMenuPanel from "./components/SelectMenuPanel/index.vue" // 引入选择工具菜单组件
+	import SelectionPanel from "./components/SelectionPanel.vue" // 引入选区面板
+	import PartSelectorPanel from "./components/PartSelectorPanel.vue" // 引入部件选取面板
+	import { LayerType, OperationType } from "./utils/layerHelper.js"
+	import { ToolManager } from "./managers/ToolManager.js"
+	import { fabric } from "fabric-with-all"
+	import {
+		uploadImageAndCreateLayer,
+		loadImageUrlToLayer,
+		loadImage,
+		resizeImage
+	} from "./utils/imageHelper.js"
+	import { optimizeCanvasRendering } from "./utils/helper"
+	// import MinimapPanel from "./components/MinimapPanel.vue";
+	import { useI18n } from "vue-i18n"
+	const { t } = useI18n()
+	const KeyboardShortcutHelp = defineAsyncComponent(() =>
+		import("./components/KeyboardShortcutHelp.vue")
+	)
+
+	const emit = defineEmits([
+		"trigger-red-green-mouseup", // 红绿图模式鼠标抬起事件
+		"changeCanvas", // 画布变更事件
+		"canvasInit", // 画布初始化事件
+		"canvas-load-json-success", // 画布加载JSON成功事件
+		"trigger-library", // 触发打开Library选择图片事件
+		"before-unmount-export-extra-info" // 组件卸载前导出额外信息事件
+	])
+
+	const props = defineProps({
+		title: {
+			type: String,
+			default: "" // 默认空
+		},
+		canvasJSON: {
+			type: [Object, String],
+			default: "" // 默认空
+		},
+		config: {
+			type: Object,
+			default: () => CanvasConfig // 默认配置
+		},
+		isChangeCanvasSize: {
+			type: Boolean,
+			default: true // 是否允许修改画布大小
+		},
+		showLayersPanel: {
+			type: Boolean,
+			default: true // 是否显示图层面板
+		},
+		enabledRedGreenMode: {
+			type: Boolean,
+			default: false // 是否启用红绿图模式
+		},
+		clothingMinIOPath: {
+			type: String,
+			default: "" // 衣服底图URL-线稿miniIo地址（传入后启动部件选取功能）
+		},
+		clothingImageUrl: {
+			type: String,
+			default: "" // 衣服底图URL-线稿
+		},
+		clothingImageUrl2: {
+			type: String,
+			default: "" // 衣服底图URL-上色
+		},
+		redGreenImageUrl: {
+			type: String,
+			default: "" // 红绿图URL
+		},
+		clothingImageOpts: {
+			type: Object,
+			default: () => {
+				return {
+					scaleX: 1,
+					scaleY: 1
+				}
+			}
+		},
+		isFixedErasable: {
+			type: Boolean,
+			default: false // 是否允许擦除固定图层
+		},
+		isBackgroundErasable: {
+			type: Boolean,
+			default: false // 是否允许擦除背景图层
+		},
+		isBackgroundChangeable: {
+			type: Boolean,
+			default: true // 是否允许修改背景图层
+		},
+		showFixedLayer: {
+			type: Boolean,
+			default: false // 是否显示固定图层
+		},
+		isGeneral: {
+			// 从generalMiniCanvas来的
+			type: Boolean,
+			default: false
+		},
+		isEdit: {
+			// 从design点击喜欢过的图片,再点击顶部的编辑图标
+			type: Boolean,
+			default: false
+		},
+		hideCanvas: {
+			type: Boolean,
+			default: false // 是否隐藏画布-隐藏关闭部分功能
+		}
+	})
+	console.log("config", props.config)
+	const loading = ref(false)
+	const loading_ = ref(false)
+	const loadingTimeout = ref(null)
+	watch(
+		() => loading.value,
+		(newVal) => {
+			clearTimeout(loadingTimeout.value)
+			if (!newVal) {
+				loadingTimeout.value = setTimeout(() => {
+					loading_.value = false
+				}, 300)
+			} else {
+				loading_.value = true
+			}
+		}
+	)
+	// 引用和状态
+	const canvasRef = ref(null)
+	const canvasContainerRef = shallowRef(null)
+	const imageUploadRef = ref(null)
+	const currentZoom = ref(100)
+	const appContainerRef = ref(null)
+
+	// 画布设置
+	const canvasWidth = ref(props.config.width)
+	const canvasHeight = ref(props.config.height)
+	const canvasColor = ref(props.config.backgroundColor)
+	// const layerWidth = ref(CanvasConfig.layerWidth);
+	const brushSize = ref(CanvasConfig.brushSize) // 画笔大小
+	const canvasManagerLoaded = ref(false) //  画布是否加载完成
+
+	// 红绿图模式状态
+	const isRedGreenMode = ref(false)
+
+	const isShowLayerPanel = ref(false) // 是否显示图层面板
+
+	provide("isShowLayerPanel", isShowLayerPanel) // 提供红绿图模式状态给子组件
+
+	// 小地图设置
+	// const minimapEnabled = ref(true);
+	// const minimapManager = ref(null);
+
+	// 图层和元素管理
+	const layers = ref([])
+	const activeLayerId = ref(null)
+	const activeElementId = ref(null)
+	const lastSelectLayerId = ref(null) // 最后选择的图层ID
+
+	// 当前选择的工具
+	const activeTool = ref(CanvasConfig.defaultTool) // 默认工具
+
+	//监听画布元素宽度是否发生变化
+	let observer = null
+	let observerTime = null //加入防抖
+
+	// 管理器实例
+	let canvasManager = null
+	let layerManager = null
+	let commandManager = null
+	let keyboardManager = null
+	let toolManager = null
+	let liquifyManager = null
+	let selectionManager = null
+	let partManager = null
+	let redGreenModeManager = null
+
+	// 快捷键帮助模态框状态
+	const showShortcutHelp = ref(false)
+
+	function toggleShortcutHelp() {
+		showShortcutHelp.value = !showShortcutHelp.value
 	}
-	return base64;
-  },
-  // 导出颜色图层
-  exportColorLayer: () => {
-    return canvasManager.exportColorLayer();
-  },
-  /**
-   * 移动图层位置
-   * @param {string} layerId 图层ID
-   * @param {string} direction 移动方向，'up'或'down'
-   * @returns {boolean} 是否移动成功
-   */
-  moveLayer(layerId, direction) {
-    if (!layerManager) return false;
-    const result = layerManager.moveLayer(layerId, direction);
 
-    // 使用高级排序重建画布顺序
-    if (result) {
-      layerManager.forceRebuildCanvasOrder();
-    }
+	watch(
+		() => props.hideCanvas,
+		(newVal) => {
+			console.log("==========是否隐藏画布", newVal)
+			if (newVal) {
+				keyboardManager?.removeEvents()
+			} else {
+				keyboardManager?.init()
+			}
+		}
+	)
 
-    return result;
-  },
+	// 工具选择处理
+	function handleToolSelect(tool) {
+		activeTool.value = tool
+		// toolManager.setActiveTool(tool); // 更新工具管理器中的当前工具  普通模式，不可撤回操作
+		toolManager.setToolWithCommand(tool, {
+			undoable: props.enabledRedGreenMode ? false : true // 普通模式下工具选择不可撤销
+		}) // 命令模式 可撤回操作
+	}
 
-  /**
-   * 导出所有信息
-   * @returns {Object} 包含所有图层信息的对象
-  */
-  exportExtraInfo: () => {
-    return canvasManager.exportExtraInfo();
-  },
+	// 触发组件初始化事件
+	function handleCanvasInit(isLoadJson = false) {
+		loading.value = false
+		emit("canvasInit", {
+			isLoadJson: isLoadJson ?? !!props.canvasJSON, // 是否加载了JSON数据
+			isRedGreenMode: isRedGreenMode.value,
+			layers,
+			activeLayerId,
+			canvasManager,
+			layerManager,
+			commandManager,
+			toolManager,
+			keyboardManager,
+			liquifyManager,
+			selectionManager,
+			partManager,
+			redGreenModeManager
+		})
+	}
 
-  /**
-   * 拖拽排序图层
-   * @param {number} oldIndex 原索引
-   * @param {number} newIndex 新索引
-   * @param {string} layerId 图层ID
-   * @returns {boolean} 是否排序成功
-   */
-  reorderLayers(oldIndex, newIndex, layerId) {
-    if (!layerManager) return false;
+	function toggleMinimap(enabled) {
+		// minimapEnabled.value = enabled;
+		// if (minimapManager.value) {
+		//   minimapManager.value.setVisibility(enabled);
+		// }
+	}
 
-    // 优先使用高级排序功能
-    if (layerManager.layerSort) {
-      return layerManager.advancedReorderLayers(oldIndex, newIndex, layerId);
-    } else {
-      // 降级到基础排序
-      return layerManager.reorderLayers(oldIndex, newIndex, layerId);
-    }
-  },
+	// 初始化画布
+	onMounted(async () => {
+		// 设置BrushStore的全局引用，供BaseBrush使用
+		if (typeof window !== "undefined") {
+			window.BrushStore = BrushStore
+		}
 
-  /**
-   * 智能排序图层
-   * 根据对象类型和位置自动调整图层顺序
-   * @param {Array<string>} targetLayerIds 要排序的图层ID数组，null表示排序所有普通图层
-   * @returns {boolean} 是否排序成功
-   */
-  smartSortLayers(targetLayerIds = null) {
-    if (!layerManager) return false;
-    return layerManager.smartSortLayers(targetLayerIds);
-  },
+		// 如果启用了红绿图模式，设置画布大小为默认值
+		if (props.enabledRedGreenMode) {
+			canvasHeight.value = canvasContainerRef.value.clientWidth
+			canvasWidth.value = canvasContainerRef.value.clientHeight
+		}
 
-  /**
-   * 优化图层结构
-   * 清理空图层、重新排序等
-   * @returns {Object} 优化结果统计
-   */
-  optimizeLayerStructure() {
-    if (!layerManager)
-      return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 };
-    return layerManager.optimizeLayerStructure();
-  },
+		// 创建管理器实例
+		canvasManager = new CanvasManager(canvasRef.value, {
+			width: canvasContainerRef.value.clientWidth,
+			height: canvasContainerRef.value.clientHeight,
+			// backgroundColor: canvasColor.value,
+			currentZoom,
+			layers,
+			lastSelectLayerId,
+			canvasWidth,
+			canvasHeight,
+			canvasColor,
+			enabledRedGreenMode: props.enabledRedGreenMode,
+			isFixedErasable: props.isFixedErasable,
+			props,
+			emit
+		})
+		canvasManager.canvas.activeLayerId = activeLayerId
+		canvasManager.activeLayerId = activeLayerId
+		canvasManager.canvas.activeElementId = activeElementId
+		canvasManager.canvas.loading = loading
 
-  /**
-   * 强制重建画布对象顺序
-   * 当图层顺序发生变化后调用此方法确保画布对象顺序正确
-   */
-  forceRebuildCanvasOrder() {
-    if (!layerManager) return;
-    layerManager.forceRebuildCanvasOrder();
-  },
+		// 创建命令管理器
+		commandManager = new CommandManager({
+			canvas: canvasManager.canvas,
+			autoSaveState: true
+		})
 
-  /**
-   * 验证画布对象顺序是否正确
-   * @returns {boolean} 顺序是否正确
-   */
-  validateObjectOrder() {
-    if (!layerManager) return true;
-    return layerManager.validateObjectOrder();
-  },
+		// 创建图层管理器
+		layerManager = new LayerManager({
+			canvas: canvasManager.canvas,
+			canvasWidth: canvasWidth.value,
+			canvasHeight: canvasHeight.value,
+			backgroundColor: canvasColor,
+			isRedGreenMode: props.enabledRedGreenMode,
+			lastSelectLayerId,
+			layers,
+			activeLayerId,
+			canvasManager, // 添加对 canvasManager 的引用
+			commandManager, // 添加对命令管理器的引用
+			t // 国际化函数
+		})
 
-  /**
-   * 批量重新排序多个图层
-   * @param {Array} reorderOperations 排序操作数组 [{layerId, oldIndex, newIndex}]
-   * @returns {boolean} 是否全部操作成功
-   */
-  batchReorderLayers(reorderOperations) {
-    if (!layerManager) return false;
-    return layerManager.batchReorderLayers(reorderOperations);
-  },
-  /**
-   * 切换图层可见性
-   * @param {string} layerId 图层ID
-   * @returns {boolean} 更新后的可见性状态
-   */
-  toggleLayerVisibility(layerId) {
-    if (!layerManager) return false;
-    return layerManager.toggleLayerVisibility(layerId);
-  },
-  /**
-   * 获取图层可见性状态
-   * @param {string} layerId 图层ID
-   * @returns {boolean} 图层是否可见
-   */
-  getLayerVisibility(layerId) {
-    if (!layerManager) return false;
-    return layerManager.getLayerVisibility(layerId);
-  },
-});
+		// commandManager.setLayerManager(layerManager); // 设置命令管理器需要访问的图层数据
+
+		// 设置缩略图管理器需要访问的图层数据
+		// canvasManager.layers = layers;
+
+		// 创建工具管理器实例
+		toolManager = new ToolManager({
+			canvas: canvasManager.canvas, // fabric.js 画布实例
+			commandManager, // 命令管理器实例，用于撤销/重做
+			canvasManager, // 画布管理器实例
+			layerManager,
+			activeTool, // 响应式引用，存储当前选中的工具
+			brushSize: brushSize.value, // 可选，初始画笔大小
+			t // 国际化函数
+		})
+
+		// 初始化文本编辑功能
+		toolManager.setupTextEditingEvents()
+
+		toolManager.setFileUploadHandler(triggerImageUpload) // 设置快捷图片上传处理函数
+
+		layerManager.setToolManager(toolManager) // 将工具管理器传递给图层管理器
+		canvasManager.setToolManager(toolManager) // 将工具管理器传递给画布管理器
+		canvasManager.setLayerManager(layerManager)
+		canvasManager.setCommandManager(commandManager) // 将命令管理器传递给画布管理器
+
+		// 初始化快捷键管理器
+		keyboardManager = new KeyboardManager({
+			canvas: canvasManager.canvas,
+			commandManager,
+			layerManager,
+			canvasManager,
+			toolManager,
+			isRedGreenMode,
+			pasteText: (text) => {
+				//   console.log("粘贴的文本:", text);
+				handleAddText(text)
+			},
+			pasteImage: (file) => {
+				//   console.log("粘贴的图片:", file);
+				uploadImageAndCreateLayer({
+					file,
+					layerManager,
+					toolManager,
+					canvas: canvasManager.canvas
+				})
+			}
+		})
+
+		// 绑定快捷键事件
+		if (!props.hideCanvas) keyboardManager.init()
+		// 绑定画布操作事件
+		canvasManager.setupCanvasEvents(activeElementId, layerManager)
+		canvasManager.setupCanvasInitEvent(handleCanvasInit) // 绑定画布初始化事件
+
+		provide("canvasManager", canvasManager) // 提供给子组件使用
+		provide("layerManager", layerManager) // 提供给子组件使用
+		provide("commandManager", commandManager) // 提供给子组件使用
+		provide("toolManager", toolManager) // 提供给子组件使用
+		provide("keyboardManager", keyboardManager) // 提供给子组件使用
+		provide("activeTool", activeTool) // 提供给子组件使用
+		provide("liquifyManager", () => liquifyManager) // 提供液化管理器
+		provide("texturePresetManager", texturePresetManager) // 提供纹理预设管理器
+		provide("layers", layers) // 提供图层数据
+		provide("lastSelectLayerId", lastSelectLayerId) // 提供最后选择的图层ID
+
+		// 初始化网格设置
+		// toggleGridVisibility(gridEnabled.value);
+
+		// 初始化小地图
+		// minimapManager.value = new MinimapManager(canvasManager.canvas);
+
+		// 初始化液化管理器
+		liquifyManager = new LiquifyManager({
+			canvas: canvasManager.canvas,
+			layerManager
+		})
+		// 将liquifyManager设置到canvasManager中，确保ToolManager能访问到它
+		canvasManager.setLiquifyManager(liquifyManager)
+
+		// 初始化选区管理器
+		selectionManager = new SelectionManager({
+			canvas: canvasManager.canvas,
+			layerManager,
+			props
+		})
+		canvasManager.setSelectionManager(selectionManager)
+
+		// 初始化部件选择管理器
+		partManager = new PartManager({
+			canvas: canvasManager.canvas,
+			layerManager,
+			canvasManager,
+			selectionManager,
+			toolManager,
+			commandManager,
+			props
+		})
+		canvasManager.setPartManager(partManager)
+
+		if (props.canvasJSON) {
+			// 如果传入了初始JSON数据，加载到画布上
+			if (typeof props.canvasJSON === "string") {
+				try {
+					await canvasManager.loadJSON(props.canvasJSON)
+				} catch (error) {
+					console.error("加载画布JSON失败:", error)
+					// 初始化图层 - 确保创建背景层
+					await layerManager.initializeLayers()
+				}
+			} else if (typeof props.canvasJSON === "object") {
+				await canvasManager.loadJSON(JSON.stringify(props.canvasJSON))
+			}
+		} else {
+			// 初始化图层 - 确保创建背景层
+			await layerManager.initializeLayers()
+		}
+
+		if (props.enabledRedGreenMode && props.clothingImageUrl && props.redGreenImageUrl) {
+			canvasManager.canvas.fill = "#fff" // 设置画布背景色为白色    // 初始化红绿图模式管理器
+			redGreenModeManager = new RedGreenModeManager({
+				canvas: canvasManager.canvas,
+				canvasManager,
+				layerManager,
+				toolManager,
+				commandManager,
+				clothingImageOpts: props.clothingImageOpts
+			})
+
+			canvasManager.setRedGreenModeManager(redGreenModeManager)
+
+			// 如果提供了图片URL，立即初始化红绿图模式
+			if (props.clothingImageUrl && props.redGreenImageUrl) {
+				try {
+					await redGreenModeManager.initialize({
+						clothingImageUrl: props.clothingImageUrl,
+						redGreenImageUrl: props.redGreenImageUrl,
+						onImageGenerated: (imageData) => {
+							console.log("红绿图生成:", imageData)
+							// 这里可以添加图片生成后的回调处理
+							emit("trigger-red-green-mouseup", imageData)
+						}
+					})
+
+					// 设置红绿图模式状态
+					isRedGreenMode.value = true
+
+					console.log("红绿图模式已自动启用")
+				} catch (error) {
+					console.error("红绿图模式初始化失败:", error)
+				}
+			}
+
+			// 初始设置
+			handleWindowResize() // 设置画布大小
+		} else if (!isRedGreenMode.value && props.clothingImageUrl) {
+			try {
+				await canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
+					undoable: false, // 不可撤销操作
+					...(props?.clothingImageOpts || {})
+				})
+			} catch (error) {
+				console.error("更换底图失败:", error)
+			}
+
+			canvasManager?.centerBackgroundLayer?.(
+				canvasManager.canvas.width,
+				canvasManager.canvas.height
+			)
+		}
+
+		// // 设置固定图层是否可擦除
+		// canvasManager.setFixedLayerErasable({
+		//   type: "isFixed",
+		//   flag: !props.isFixedErasable, // 设置操作类型为可擦除
+		// });
+		// // 设置背景图层是否可擦除
+		// canvasManager.setFixedLayerErasable({
+		//   type: "isBackground",
+		//   flag: !props.isBackgroundErasable, // 设置操作类型为可擦除
+		// });
+
+		canvasManagerLoaded.value = true
+
+		// 添加删除按钮
+		// if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
+		addRemoveBtn(removeLayer)
+
+		// 触发组件初始化事件
+		nextTick(() => {
+			// 确保所有依赖都已加载完成
+			handleCanvasInit()
+			emit("canvas-load-json-success")
+			setTimeout(() => {
+				// 初始状态下生成所有预览图
+				canvasManager?.updateAllThumbnails?.()
+			}, 500)
+		})
+
+		let trailingTimeout = null
+		observer = new ResizeObserver((entries) => {
+			clearTimeout(trailingTimeout)
+			trailingTimeout = setTimeout(async () => {
+				if (canvasManager.awaitCanvasRun) await canvasManager.awaitCanvasRun()
+				handleWindowResize()
+			}, 100)
+		})
+		observer.observe(canvasContainerRef.value)
+		// 使用window的resize事件代替ResizeObserver
+		// 只有当窗口大小变化时才更新画布尺寸
+		//   window.addEventListener("resize", handleWindowResize);
+		setInitZoom()
+	})
+
+	watchEffect(() => {
+		// 设置固定图层是否可擦除
+		if (canvasManagerLoaded.value) {
+			canvasManager?.setFixedLayerErasable({
+				type: "isFixed",
+				flag: !props.isFixedErasable // 设置操作类型为可擦除
+			})
+			// 设置背景图层是否可擦除
+			canvasManager?.setFixedLayerErasable({
+				type: "isBackground",
+				flag: !props.isBackgroundErasable // 设置操作类型为可擦除
+			})
+		}
+	})
+
+	onBeforeUnmount(async () => {
+		observer.unobserve(canvasContainerRef.value)
+		//   const extraInfo = await canvasManager.exportExtraInfo();
+		//   emit("before-unmount-export-extra-info", extraInfo);
+
+		console.log("onBeforeUnmount  组件卸载，清理资源...")
+		canvasManager?.dispose?.()
+		commandManager?.dispose?.()
+		layerManager?.dispose?.()
+		keyboardManager?.dispose?.()
+		toolManager?.dispose?.()
+		liquifyManager?.dispose?.()
+		selectionManager?.dispose?.()
+		partManager?.dispose?.()
+		redGreenModeManager?.dispose?.()
+		//   minimapManager?.dispose?.();
+		canvasManager = null
+		commandManager = null
+		layerManager = null
+		keyboardManager = null
+		toolManager = null
+		liquifyManager = null
+		selectionManager = null
+		partManager = null
+		redGreenModeManager = null
+		//   fabric.Object.prototype.controls.deleteControl = undefined;
+
+		// 移除window resize事件监听
+		//   window.removeEventListener("resize", handleWindowResize);
+	})
+
+	// 窗口大小变化处理函数
+	async function handleWindowResize() {
+		console.log("==========画布窗口大小变化==========")
+		loading.value = true
+		// 使用requestAnimationFrame来防止频繁更新
+		await new Promise(requestAnimationFrame)
+		if (!canvasManager) return
+		await updateCanvasSize()
+		// 确保显示的缩放信息是最新的
+		await setInitZoom()
+		await new Promise(requestAnimationFrame)
+		await layerManager?.updateLayersObjectsInteractivity?.()
+		loading.value = false
+	}
+
+	async function setInitZoom() {
+		if (props.config.initZoom && !props.enabledRedGreenMode) {
+			const width = canvasManager.width
+			const height = canvasManager.height
+			const cwidth = canvasWidth.value
+			const cheight = canvasHeight.value
+			let zoom = Math.min(1, width / cwidth, height / cheight)
+			if (zoom < 1) zoom -= 0.05
+			await setZoom(zoom) // 设置画布缩放
+		} else {
+			currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100)
+		}
+	}
+
+	function resetZoom() {
+		canvasManager.resetZoom()
+	}
+	async function setZoom(zoom) {
+		await new Promise(requestAnimationFrame)
+		if (!canvasManager) return
+		const newZoom = Math.max(zoom, 0.1)
+		// 使用画布中心作为缩放点
+		const centerPoint = {
+			x: canvasManager.canvas.width / 2,
+			y: canvasManager.canvas.height / 2
+		}
+		canvasManager.animateZoom(centerPoint, newZoom)
+	}
+
+	function zoomIn() {
+		if (!canvasManager) return
+
+		const currentZoom = canvasManager.canvas.getZoom()
+		const newZoom = Math.min(currentZoom * 1.2, 20) // 增加20%，最大20倍
+
+		// 使用画布中心作为缩放点
+		const centerPoint = {
+			x: canvasManager.canvas.width / 2,
+			y: canvasManager.canvas.height / 2
+		}
+
+		canvasManager.animateZoom(centerPoint, newZoom)
+	}
+
+	function zoomOut() {
+		if (!canvasManager) return
+
+		const currentZoom = canvasManager.canvas.getZoom()
+		const newZoom = Math.max(currentZoom / 1.2, 0.1) // 减少20%，最小0.1倍
+
+		// 使用画布中心作为缩放点
+		const centerPoint = {
+			x: canvasManager.canvas.width / 2,
+			y: canvasManager.canvas.height / 2
+		}
+		canvasManager.animateZoom(centerPoint, newZoom)
+	}
+
+	async function updateCanvasSize() {
+		if (canvasManager && canvasContainerRef.value) {
+			const containerWidth = canvasContainerRef.value.clientWidth
+			const containerHeight = canvasContainerRef.value.clientHeight
+
+			// 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
+			await canvasManager.setCanvasSize(containerWidth, containerHeight)
+
+			// // 如果启用了红绿图模式，使用 layerManager 的缩放方法
+			// if (props.enabledRedGreenMode && layerManager) {
+			//   layerManager.resizeCanvasWithScale(containerWidth, containerHeight, {
+			//     undoable: false, // 可撤销操作
+			//   });
+			// } else {
+			//   // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
+			//   canvasManager.setCanvasSize(containerWidth, containerHeight);
+			// }
+		}
+	}
+
+	function updateCanvasColor() {
+		canvasManager.setCanvasColor(canvasColor.value)
+	}
+	function createLayerName() {
+		const layer = t("Canvas.layer")
+		// 检查图层名称是否已存在
+		let layerIndex = 1
+		let layerName = `${layer + " " + layerIndex}`
+		while (layerManager.getLayerByName(layerName)) {
+			layerIndex++
+			layerName = `${layer} ${layerIndex}`
+		}
+		return layerName
+	}
+	async function addLayer() {
+		await layerManager.createLayer(createLayerName())
+	}
+	async function addTopLayer() {
+		await layerManager.createLayer(createLayerName(), LayerType.EMPTY, {
+			insertTop: true
+		})
+	}
+
+	function setActiveLayer(layerId) {
+		if (layerId !== activeLayerId.value) {
+			layerManager.setActiveLayer(layerId, {
+				undoable: true // 可撤销
+			})
+
+			const activeObject = canvasManager.canvas.getActiveObject()
+			if (activeObject) {
+				canvasManager.canvas.discardActiveObject()
+				canvasManager.canvas.renderAll()
+			}
+		}
+	}
+
+	function toggleLayerVisibility(layerId) {
+		layerManager.toggleLayerVisibility(layerId, activeElementId.value)
+	}
+
+	function moveLayerUp(layerId) {
+		// 使用命令管理器执行移动图层命令，传递正确的方向参数
+		layerManager.moveLayer(layerId, "up")
+	}
+
+	function moveLayerDown(layerId) {
+		// 使用命令管理器执行移动图层命令，传递正确的方向参数
+		layerManager.moveLayer(layerId, "down")
+	}
+
+	function addRemoveBtn(fun) {
+		//添加删除按钮
+		const deleteIcon = cuowuImg
+		// 创建删除图片元素
+		let deleteImg = document.createElement("img")
+		deleteImg.src = deleteIcon
+		function renderIcon(icon) {
+			return function (ctx, left, top, styleOverride, fabricObject) {
+				var size = this.cornerSize
+				ctx.save()
+				ctx.translate(left, top)
+				ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
+				ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5)
+				ctx.restore()
+			}
+		}
+		fabric.Object.prototype.controls.deleteControl = new fabric.Control({
+			x: 0.5,
+			y: -0.5,
+			offsetY: -16,
+			offsetX: 16,
+			cursorStyle: "pointer",
+			mouseUpHandler: deleteFun,
+			render: renderIcon(deleteImg),
+			cornerSize: 24
+		})
+	}
+
+	function deleteFun(e, control) {
+		const target = control.target
+		if (target.onDelete) {
+			target.onDelete(target)
+		} else if (target.id) {
+			removeLayer(layerManager?.activeLayerId?.value)
+		}
+	}
+
+	function removeLayer(layerId) {
+		if (layerId) layerManager.removeLayer(layerId)
+	}
+
+	function triggerImageUpload() {
+		imageUploadRef.value.click()
+	}
+
+	function handleImageUpload(event) {
+		const file = event.target.files[0]
+		if (!file) return
+
+		// 导入新的图片处理辅助函数
+		// 显示加载中状态
+		const loadingMessage = "正在处理图片..."
+		console.log(loadingMessage)
+
+		uploadImageAndCreateLayer({
+			file,
+			layerManager,
+			toolManager,
+			canvas: canvasManager.canvas
+		})
+			.then((layerId) => {
+				console.log(`图片上传成功，已创建图层: ${layerId}`)
+
+				// 清空文件输入，允许再次选择相同的文件
+				if (imageUploadRef.value) {
+					imageUploadRef.value.value = ""
+				}
+			})
+			.catch((error) => {
+				console.error("图片上传失败:", error)
+			})
+	}
+
+	const selectImages = ref(null)
+	const handleImageSelect = (data) => {
+		UrlToFile(data.url, data.name).then((file) => {
+			handleImageUpload({ target: { files: [file] } })
+		})
+	}
+	function triggerLibrary() {
+		// console.log('CanvasEditor', '打开收藏')
+		if (props.isGeneral || props.isEdit) {
+			selectImages.value.init()
+		} else {
+			emit("trigger-library")
+		}
+	}
+
+	function handleAddText(text) {
+		if (toolManager && canvasManager && canvasManager.canvas) {
+			// 在画布中央创建文本
+			const canvasCenter = canvasManager.canvas.getCenter()
+			toolManager.createText(canvasCenter.left, canvasCenter.top, text)
+		}
+	}
+
+	// 红绿图模式切换处理
+	function toggleRedGreenMode() {
+		if (!redGreenModeManager) return
+
+		isRedGreenMode.value = !isRedGreenMode.value
+
+		if (isRedGreenMode.value) {
+			redGreenModeManager.enterRedGreenMode()
+			// 切换到红色画笔工具
+			handleToolSelect("redBrush")
+		} else {
+			redGreenModeManager.exitRedGreenMode()
+			// 恢复到默认工具
+			handleToolSelect(CanvasConfig.defaultTool)
+		}
+	}
+
+	// 红绿图模式工具切换处理
+	function handleRedGreenToolSelect(tool) {
+		if (!isRedGreenMode.value) return
+
+		switch (tool) {
+			case "redBrush":
+			case "greenBrush":
+			case "eraser":
+				handleToolSelect(tool)
+				break
+			default:
+				// 在红绿图模式下，只允许特定工具
+				break
+		}
+	}
+
+	// 处理图层拖拽排序
+	function handleLayersReorder(reorderData) {
+		const { oldIndex, newIndex, layerId } = reorderData
+
+		if (layerManager && layerManager.reorderLayers) {
+			const success = layerManager.reorderLayers(oldIndex, newIndex, layerId)
+
+			if (success) {
+				console.log(`图层 ${layerId} 已从位置 ${oldIndex} 移动到位置 ${newIndex}`)
+
+				// 更新画布渲染顺序
+				if (canvasManager) {
+					canvasManager.canvas.renderAll()
+				}
+			} else {
+				console.warn("图层排序失败")
+			}
+		}
+	}
+
+	// 处理子图层拖拽排序
+	function handleChildLayersReorder(reorderData) {
+		const { parentId, oldIndex, newIndex, layerId } = reorderData
+
+		if (layerManager && layerManager.reorderChildLayers) {
+			const success = layerManager.reorderChildLayers(parentId, oldIndex, newIndex, layerId)
+
+			if (success) {
+				console.log(
+					`子图层 ${layerId} 在父图层 ${parentId} 中已从位置 ${oldIndex} 移动到位置 ${newIndex}`
+				)
+
+				// 更新画布渲染顺序
+				if (canvasManager) {
+					canvasManager.canvas.renderAll()
+				}
+			} else {
+				console.warn("子图层排序失败")
+			}
+		}
+	}
+
+	// 处理画布变更事件
+	const changeCanvas = async (command) => {
+		const commandData = {
+			isChange: command.canUndo || command.canRedo, // 是否有可撤销或可重做的操作
+			...command // 传递完整的命令数据
+		}
+		emit("changeCanvas", commandData)
+		canvasManager.changeCanvas()
+		if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
+			setTimeout(async () => {
+				try {
+					const imageData = await canvasManager.exportImage({
+						restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
+						isCropByBg: true
+					})
+					emit("trigger-red-green-mouseup", imageData)
+				} catch (error) {}
+			}, 100)
+		}
+	}
+
+	const cropImageRef = ref(null)
+	const cropImage = (url) => {
+		return cropImageRef.value.open(url)
+	}
+	provide("cropImage", cropImage) // 提供给子组件使用
+	// 颜色选择器组件
+	const palletPanelRef = ref(null)
+	const palletPanel = (url) => {
+		return palletPanelRef.value.open(url)
+	}
+	provide("palletPanel", palletPanel) // 提供给子组件使用
+
+	// 处理画布容器的拖放事件
+	const isDragOver = ref(false)
+	const canvasDragover = (e) => {
+		e.preventDefault()
+		if (isRedGreenMode.value) return
+		const types = e.dataTransfer.types
+		isDragOver.value = types.includes("Files")
+	}
+
+	// 处理画布容器的拖离事件
+	const canvasDragleave = (e) => {
+		e.preventDefault()
+		if (isRedGreenMode.value) return
+		isDragOver.value = false
+	}
+
+	// 处理画布容器的拖放事件
+	const canvasDragdrop = (e) => {
+		e.preventDefault()
+		if (isRedGreenMode.value) return
+		isDragOver.value = false
+		const files = e.dataTransfer.files
+		for (const file of files) {
+			if (file.type.startsWith("image/")) {
+				handleImageUpload({ target: { files: [file] } })
+			}
+		}
+	}
+
+	// 提供外部ref实例方法
+	defineExpose({
+		layers, // 图层数据
+		activeTool, // 当前选中的工具
+		getCanvasManager: () => canvasManager, // 获取画布管理器实例
+		// type : isBackground   isFixed    flag:  是否可擦除图层
+		setFixedLayerErasable: ({ type = "isFixed", flag = false }) => {
+			canvasManager?.setFixedLayerErasable({
+				type,
+				flag // 设置操作类型为可擦除
+			})
+		}, // 获取fabric画布实例
+		canvasManagerLoaded,
+		// 加载新数据到画布
+		loadJSON: (json, calllBack) => {
+			try {
+				if (json) canvasManager?.loadJSON?.(json, calllBack)
+				return true
+			} catch (error) {
+				console.error("加载画布JSON失败:", error)
+				return false
+			}
+		},
+		// 获取当前画布的JSON数据
+		getJSON: () => {
+			return canvasManager?.getJSON?.()
+		},
+		setLoading: (v) => (loading.value = v),
+		// (更换底图，不可撤销，不可操作)
+		changeFixedImage: (url, opts) => {
+			return canvasManager?.changeFixedImage?.(url, {
+				...(props?.clothingImageOpts || {}),
+				...opts
+			})
+		},
+		updateOtherLayers: async (otherData) => {
+			loading.value = true
+			await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve))
+			await canvasManager?.createOtherLayers?.(otherData)
+			layerManager.activeLayerId.value = ""
+			layerManager?.sortLayers()
+			await layerManager?.updateLayersObjectsInteractivity?.(true)
+			canvasManager?.canvas?.renderAll()
+			setTimeout(() => {
+				canvasManager?.updateAllThumbnails()
+			}, 500)
+			loading.value = false
+			return true
+		},
+		//图片url或者base64
+		addImageToLayer: async (
+			url,
+			{ layerId, undoable, ...optios } = { layerId: null, undoable: true } // 可选参数 layerId  指定图层  将内容添加到指定图层   undoable 是否可撤销  false不可撤销  默认可撤销
+		) => {
+			if (!url) return Promise.reject(new Error("图片URL不能为空"))
+			if (layerId) {
+				const fabricImage = await loadImage(url)
+				// 如果指定了图层ID，确保图层存在
+				return await canvasManager?.addImageToLayer?.({
+					targetLayerId: layerId,
+					fabricImage,
+					undoable, // 是否可撤销操作
+					...optios
+				})
+			}
+
+			// 未指定图层ID，默认添加到新的图层
+			return await loadImageUrlToLayer(
+				{
+					imageUrl: url,
+					layerManager,
+					canvas: canvasManager.canvas,
+					toolManager
+				},
+				{ undoable, ...optios }
+			)
+		},
+		// 导出图片
+		exportImage: async ({
+			isContainBg = false, // 是否包含背景图层
+			isContainFixed = false, // 是否包含固定图层
+			isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
+			isPrintTrimsNoRepeat = true, // 是否包含印花图层的不平铺
+			isPrintTrimsRepeat = true, // 是否包含印花图层的平铺
+			isContainNormalLayer = true, // 是否包含普通图层
+			isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小
+			layerId = "", // 导出具体图层ID
+			layerIdArray = [], // 导出多个图层ID数组
+			expPicType = "png", // 导出图片类型  JPG 或 PNG ,SVG
+			isEnhanceImg, // 是否是增强图片
+			width = 0, // 导出的图片宽度
+			height = 0 // 导出的图片高度
+		} = {}) => {
+			loading.value = true
+			canvasManager?.canvas?.discardActiveObject()
+			var base64 = await canvasManager.exportImage({
+				isContainBg,
+				isContainFixed,
+				isContainFixedOther,
+				isPrintTrimsNoRepeat,
+				isPrintTrimsRepeat,
+				isContainNormalLayer,
+				isCropByBg,
+				layerId,
+				layerIdArray,
+				expPicType,
+				isEnhanceImg
+			})
+			console.log("导出图片完成")
+			if (width > 0 && height > 0) {
+				base64 = await resizeImage(base64, width, height)
+			}
+			loading.value = false
+			return base64
+		},
+		// 导出颜色图层
+		exportColorLayer: () => {
+			return canvasManager.exportColorLayer()
+		},
+		/**
+		 * 移动图层位置
+		 * @param {string} layerId 图层ID
+		 * @param {string} direction 移动方向，'up'或'down'
+		 * @returns {boolean} 是否移动成功
+		 */
+		moveLayer(layerId, direction) {
+			if (!layerManager) return false
+			const result = layerManager.moveLayer(layerId, direction)
+
+			// 使用高级排序重建画布顺序
+			if (result) {
+				layerManager.forceRebuildCanvasOrder()
+			}
+
+			return result
+		},
+
+		/**
+		 * 导出所有信息
+		 * @returns {Object} 包含所有图层信息的对象
+		 */
+		exportExtraInfo: () => {
+			return canvasManager.exportExtraInfo()
+		},
+
+		/**
+		 * 拖拽排序图层
+		 * @param {number} oldIndex 原索引
+		 * @param {number} newIndex 新索引
+		 * @param {string} layerId 图层ID
+		 * @returns {boolean} 是否排序成功
+		 */
+		reorderLayers(oldIndex, newIndex, layerId) {
+			if (!layerManager) return false
+
+			// 优先使用高级排序功能
+			if (layerManager.layerSort) {
+				return layerManager.advancedReorderLayers(oldIndex, newIndex, layerId)
+			} else {
+				// 降级到基础排序
+				return layerManager.reorderLayers(oldIndex, newIndex, layerId)
+			}
+		},
+
+		/**
+		 * 智能排序图层
+		 * 根据对象类型和位置自动调整图层顺序
+		 * @param {Array<string>} targetLayerIds 要排序的图层ID数组，null表示排序所有普通图层
+		 * @returns {boolean} 是否排序成功
+		 */
+		smartSortLayers(targetLayerIds = null) {
+			if (!layerManager) return false
+			return layerManager.smartSortLayers(targetLayerIds)
+		},
+
+		/**
+		 * 优化图层结构
+		 * 清理空图层、重新排序等
+		 * @returns {Object} 优化结果统计
+		 */
+		optimizeLayerStructure() {
+			if (!layerManager) return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 }
+			return layerManager.optimizeLayerStructure()
+		},
+
+		/**
+		 * 强制重建画布对象顺序
+		 * 当图层顺序发生变化后调用此方法确保画布对象顺序正确
+		 */
+		forceRebuildCanvasOrder() {
+			if (!layerManager) return
+			layerManager.forceRebuildCanvasOrder()
+		},
+
+		/**
+		 * 验证画布对象顺序是否正确
+		 * @returns {boolean} 顺序是否正确
+		 */
+		validateObjectOrder() {
+			if (!layerManager) return true
+			return layerManager.validateObjectOrder()
+		},
+
+		/**
+		 * 批量重新排序多个图层
+		 * @param {Array} reorderOperations 排序操作数组 [{layerId, oldIndex, newIndex}]
+		 * @returns {boolean} 是否全部操作成功
+		 */
+		batchReorderLayers(reorderOperations) {
+			if (!layerManager) return false
+			return layerManager.batchReorderLayers(reorderOperations)
+		},
+		/**
+		 * 切换图层可见性
+		 * @param {string} layerId 图层ID
+		 * @returns {boolean} 更新后的可见性状态
+		 */
+		toggleLayerVisibility(layerId) {
+			if (!layerManager) return false
+			return layerManager.toggleLayerVisibility(layerId)
+		},
+		/**
+		 * 获取图层可见性状态
+		 * @param {string} layerId 图层ID
+		 * @returns {boolean} 图层是否可见
+		 */
+		getLayerVisibility(layerId) {
+			if (!layerManager) return false
+			return layerManager.getLayerVisibility(layerId)
+		}
+	})
 </script>
 
 <template>
-  <div
-	ref="appContainerRef"
-    class="app-container"
-	@dragover.stop="canvasDragover"
-	@dragleave.stop="canvasDragleave"
-	@drop.stop="canvasDragdrop"
-  >
-    <!-- 头部菜单组件 -->
-    <div class="header-menu">
-      <HeaderMenu
-		:title="props.title"
-        v-if="canvasManagerLoaded"
-        :activeTool="activeTool"
-        :canvasWidth="canvasWidth"
-        :canvasHeight="canvasHeight"
-        :canvasColor="canvasColor"
-        :brushSize="brushSize"
-        :enabledRedGreenMode="enabledRedGreenMode"
-        :showLayersPanel="showLayersPanel"
-        :isChangeCanvasSize="props.isChangeCanvasSize"
-        @update:canvasWidth="canvasWidth = $event"
-        @update:canvasHeight="canvasHeight = $event"
-        @update:canvasColor="canvasColor = $event"
-        @update:brushSize="brushSize = $event"
-        @canvas-size-change="updateCanvasSize"
-        @canvas-color-change="updateCanvasColor"
-      >
-        <!-- 菜单扩展插槽 -->
-        <template #existsImageList>
-          <slot name="existsImageList" />
-        </template>
-      </HeaderMenu>
-    </div>
+	<div
+		ref="appContainerRef"
+		class="app-container"
+		@dragover.stop="canvasDragover"
+		@dragleave.stop="canvasDragleave"
+		@drop.stop="canvasDragdrop"
+	>
+		<!-- 头部菜单组件 -->
+		<div class="header-menu">
+			<HeaderMenu
+				:title="props.title"
+				v-if="canvasManagerLoaded"
+				:activeTool="activeTool"
+				:canvasWidth="canvasWidth"
+				:canvasHeight="canvasHeight"
+				:canvasColor="canvasColor"
+				:brushSize="brushSize"
+				:enabledRedGreenMode="enabledRedGreenMode"
+				:showLayersPanel="showLayersPanel"
+				:isChangeCanvasSize="props.isChangeCanvasSize"
+				@update:canvasWidth="canvasWidth = $event"
+				@update:canvasHeight="canvasHeight = $event"
+				@update:canvasColor="canvasColor = $event"
+				@update:brushSize="brushSize = $event"
+				@canvas-size-change="updateCanvasSize"
+				@canvas-color-change="updateCanvasColor"
+			>
+				<!-- 菜单扩展插槽 -->
+				<template #existsImageList>
+					<slot name="existsImageList" />
+				</template>
+			</HeaderMenu>
+		</div>
 
-    <div class="main-content">
-      <!-- :minimapEnabled="minimapEnabled" -->
-      <!-- 工具栏组件 -->
-      <div style="min-width: 5.8rem">
-        <ToolsSidebar
-          v-if="canvasManagerLoaded"
-          :activeTool="activeTool"
-          :isRedGreenMode="isRedGreenMode"
-          :clothingMinIOPath="props.clothingMinIOPath"
-          @tool-selected="handleToolSelect"
-          @red-green-tool-selected="handleRedGreenToolSelect"
-          @toggle-red-green-mode="toggleRedGreenMode"
-          @trigger-image-upload="triggerImageUpload"
-          @add-text="handleAddText"
-          @zoom-in="zoomIn"
-          @zoom-out="zoomOut"
-          @undo-redo-status-changed="changeCanvas"
-          @trigger-library="triggerLibrary"
-        >
-          <template #customToolsTop="{ toolTopProps }">
-            <slot name="customToolsTop" :tool-button-props="toolTopProps" />
-          </template>
-          <!-- 扩展插槽 -->
-          <template #customToolsBottom="{ toolButtonProps }">
-            <slot
-              name="customToolsBottom"
-              :tool-button-props="toolButtonProps"
-            />
-          </template>
-        </ToolsSidebar>
-      </div>
+		<div class="main-content">
+			<!-- :minimapEnabled="minimapEnabled" -->
+			<!-- 工具栏组件 -->
+			<div style="min-width: 5.8rem">
+				<ToolsSidebar
+					v-if="canvasManagerLoaded"
+					:activeTool="activeTool"
+					:isRedGreenMode="isRedGreenMode"
+					:clothingMinIOPath="props.clothingMinIOPath"
+					@tool-selected="handleToolSelect"
+					@red-green-tool-selected="handleRedGreenToolSelect"
+					@toggle-red-green-mode="toggleRedGreenMode"
+					@trigger-image-upload="triggerImageUpload"
+					@add-text="handleAddText"
+					@zoom-in="zoomIn"
+					@zoom-out="zoomOut"
+					@undo-redo-status-changed="changeCanvas"
+					@trigger-library="triggerLibrary"
+				>
+					<template #customToolsTop="{ toolTopProps }">
+						<slot name="customToolsTop" :tool-button-props="toolTopProps" />
+					</template>
+					<!-- 扩展插槽 -->
+					<template #customToolsBottom="{ toolButtonProps }">
+						<slot name="customToolsBottom" :tool-button-props="toolButtonProps" />
+					</template>
+				</ToolsSidebar>
+			</div>
 
-      <div
-        class="canvas-container"
-        :class="{ 'background-grid': !enabledRedGreenMode }"
-        ref="canvasContainerRef"
-      >
-        <canvas ref="canvasRef"></canvas>
-        <!-- 小地图组件 -->
-        <!-- <MinimapPanel v-if="minimapEnabled" :minimapManager="minimapManager" /> -->
+			<div
+				class="canvas-container"
+				:class="{ 'background-grid': !enabledRedGreenMode }"
+				ref="canvasContainerRef"
+			>
+				<canvas ref="canvasRef"></canvas>
+				<!-- 小地图组件 -->
+				<!-- <MinimapPanel v-if="minimapEnabled" :minimapManager="minimapManager" /> -->
 
-        <!-- 笔刷控制面板 -->
-        <BrushControlPanel
-          v-if="canvasManagerLoaded"
-          :activeTool="activeTool"
-        />
+				<!-- 笔刷控制面板 -->
+				<BrushControlPanel v-if="canvasManagerLoaded" :activeTool="activeTool" />
 
-        <!-- 液化编辑面板 -->
-        <LiquifyPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-          :liquifyManager="liquifyManager"
-          :layerManager="layerManager"
-          :activeTool="activeTool"
-        />
+				<!-- 液化编辑面板 -->
+				<LiquifyPanel
+					v-if="canvasManagerLoaded && !enabledRedGreenMode"
+					:canvas="canvasManager && canvasManager.canvas"
+					:commandManager="commandManager"
+					:liquifyManager="liquifyManager"
+					:layerManager="layerManager"
+					:activeTool="activeTool"
+				/>
 
-        <!-- 选区面板 -->
-        <SelectionPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-          :selectionManager="selectionManager"
-          :layerManager="layerManager"
-          :toolManager="toolManager"
-          :activeTool="activeTool"
-        />
+				<!-- 选区面板 -->
+				<SelectionPanel
+					v-if="canvasManagerLoaded && !enabledRedGreenMode"
+					:canvas="canvasManager && canvasManager.canvas"
+					:commandManager="commandManager"
+					:selectionManager="selectionManager"
+					:layerManager="layerManager"
+					:toolManager="toolManager"
+					:activeTool="activeTool"
+				/>
 
-        <!-- 选择工具菜单组件 -->
-        <SelectMenuPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-          :selectionManager="selectionManager"
-          :layerManager="layerManager"
-          :canvasManager="canvasManager"
-          :toolManager="toolManager"
-          :activeTool="activeTool"
-        />
+				<!-- 选择工具菜单组件 -->
+				<SelectMenuPanel
+					v-if="canvasManagerLoaded && !enabledRedGreenMode"
+					:canvas="canvasManager && canvasManager.canvas"
+					:commandManager="commandManager"
+					:selectionManager="selectionManager"
+					:layerManager="layerManager"
+					:canvasManager="canvasManager"
+					:toolManager="toolManager"
+					:activeTool="activeTool"
+				/>
 
-        <!-- 部件选取面板 -->
-        <PartSelectorPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-          :selectionManager="selectionManager"
-          :partManager="partManager"
-          :layerManager="layerManager"
-          :canvasManager="canvasManager"
-          :toolManager="toolManager"
-          :activeTool="activeTool"
-        />
+				<!-- 部件选取面板 -->
+				<PartSelectorPanel
+					v-if="canvasManagerLoaded && !enabledRedGreenMode"
+					:canvas="canvasManager && canvasManager.canvas"
+					:commandManager="commandManager"
+					:selectionManager="selectionManager"
+					:partManager="partManager"
+					:layerManager="layerManager"
+					:canvasManager="canvasManager"
+					:toolManager="toolManager"
+					:activeTool="activeTool"
+				/>
 
-        <!-- 文本编辑面板 -->
-        <TextEditorPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-        />
+				<!-- 文本编辑面板 -->
+				<TextEditorPanel
+					v-if="canvasManagerLoaded && !enabledRedGreenMode"
+					:canvas="canvasManager && canvasManager.canvas"
+					:commandManager="commandManager"
+				/>
 
-        <div class="zoom-info">
-          {{ t("Canvas.Scale") }}: {{ currentZoom }}%
-          <button class="reset-zoom" @click="resetZoom">
-            {{ $t("Canvas.ResetLayer") }}
-          </button>
-          <button
-            class="help-btn"
-            @click="toggleShortcutHelp"
-            :title="$t('Canvas.Help')"
-          >
-            ?
-          </button>
-        </div>
+				<div class="zoom-info">
+					{{ t("Canvas.Scale") }}: {{ currentZoom }}%
+					<button class="reset-zoom" @click="resetZoom">
+						{{ $t("Canvas.ResetLayer") }}
+					</button>
+					<button class="help-btn" @click="toggleShortcutHelp" :title="$t('Canvas.Help')">
+						?
+					</button>
+				</div>
+			</div>
 
-      </div>
+			<!-- 图层面板组件 -->
+			<!-- v-if="canvasManagerLoaded && !enabledRedGreenMode" -->
 
-      <!-- 图层面板组件 -->
-      <!-- v-if="canvasManagerLoaded && !enabledRedGreenMode" -->
+			<transition name="fade">
+				<div
+					class="layers-panel"
+					v-if="isShowLayerPanel && !enabledRedGreenMode && showLayersPanel"
+				>
+					<LayersPanel
+						v-if="canvasManagerLoaded"
+						:activeLayerId="activeLayerId"
+						:activeElementId="activeElementId"
+						:thumbnailManager="canvasManager.thumbnailManager"
+						:showFixedLayer="showFixedLayer"
+						@add-layer="addLayer"
+						@add-top-layer="addTopLayer"
+						@set-active-layer="setActiveLayer"
+						@toggle-layer-visibility="toggleLayerVisibility"
+						@move-layer-up="moveLayerUp"
+						@move-layer-down="moveLayerDown"
+						@remove-layer="removeLayer"
+						@layers-reorder="handleLayersReorder"
+						@child-layers-reorder="handleChildLayersReorder"
+					/>
+				</div>
+			</transition>
+		</div>
+		<!-- 裁剪图片组件 -->
+		<CropImage ref="cropImageRef" />
+		<!-- 颜色选择器组件 -->
+		<PalletPanel ref="palletPanelRef" />
 
-      <transition name="fade">
-        <div
-          class="layers-panel"
-          v-if="isShowLayerPanel && !enabledRedGreenMode && showLayersPanel"
-        >
-          <LayersPanel
-            v-if="canvasManagerLoaded"
-            :activeLayerId="activeLayerId"
-            :activeElementId="activeElementId"
-            :thumbnailManager="canvasManager.thumbnailManager"
-            :showFixedLayer="showFixedLayer"
-            @add-layer="addLayer"
-            @add-top-layer="addTopLayer"
-            @set-active-layer="setActiveLayer"
-            @toggle-layer-visibility="toggleLayerVisibility"
-            @move-layer-up="moveLayerUp"
-            @move-layer-down="moveLayerDown"
-            @remove-layer="removeLayer"
-            @layers-reorder="handleLayersReorder"
-            @child-layers-reorder="handleChildLayersReorder"
-          />
-        </div>
-      </transition>
-
-    </div>
-	<!-- 裁剪图片组件 -->
-	<CropImage ref="cropImageRef" />
-	<!-- 颜色选择器组件 -->
-	<PalletPanel ref="palletPanelRef" />
-
-    <!-- <div class="footer-actions">
+		<!-- <div class="footer-actions">
       <button class="share-btn">Share</button>
       <button class="export-btn">Export</button>
     </div> -->
 
-    <!-- 快捷键帮助模态框 -->
-    <div
-      v-if="showShortcutHelp"
-      class="modal-overlay"
-      @click="showShortcutHelp = false"
-    >
-      <div class="modal-content" @click.stop>
-        <button class="close-modal" @click="showShortcutHelp = false">×</button>
-        <KeyboardShortcutHelp />
-      </div>
-    </div>
+		<!-- 快捷键帮助模态框 -->
+		<div v-if="showShortcutHelp" class="modal-overlay" @click="showShortcutHelp = false">
+			<div class="modal-content" @click.stop>
+				<button class="close-modal" @click="showShortcutHelp = false">×</button>
+				<KeyboardShortcutHelp />
+			</div>
+		</div>
 
-    <input
-      type="file"
-      ref="imageUploadRef"
-      accept="image/*"
-      style="display: none"
-      @change="handleImageUpload"
-    />
-    <SelectImages
-      ref="selectImages"
-      full-data
-      radio
-      @select="handleImageSelect"
-      :api="Https.httpUrls.queryLibraryPage"
-      isLibrary
-    />
-	<!-- 上传图片遮罩 -->
-	<div v-show="isDragOver" class="dragover-tip"></div>
-	<div class="loading" v-show="loading"><a-spin :delay="0.5" /></div>
-  </div>
+		<input
+			type="file"
+			ref="imageUploadRef"
+			accept="image/*"
+			style="display: none"
+			@change="handleImageUpload"
+		/>
+		<SelectImages
+			ref="selectImages"
+			full-data
+			radio
+			@select="handleImageSelect"
+			:api="Https.httpUrls.queryLibraryPage"
+			isLibrary
+		/>
+		<!-- 上传图片遮罩 -->
+		<div v-show="isDragOver" class="dragover-tip"></div>
+		<div class="loading" v-show="loading_"><a-spin :delay="0.5" /></div>
+	</div>
 </template>
 
 <style scoped lang="less">
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
 
-.app-container {
-  display: flex;
-  flex-direction: column;
-  /* height: 100vh; */
-  background-color: #ffffff;
-  font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 100;
-  & > .header-menu {
-    height: 5.2rem;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    padding: 0 2rem;
-    border-bottom: 1px solid #e0e0e0;
-    background-color: #ffffff;
-  }
-  >.dragover-tip{
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: #fff;
-	font-size: 1.6rem;
-	z-index: 9999;
-	pointer-events: none;
-  }
-}
+	.app-container {
+		display: flex;
+		flex-direction: column;
+		/* height: 100vh; */
+		background-color: #ffffff;
+		font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 100;
+		& > .header-menu {
+			height: 5.2rem;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+			padding: 0 2rem;
+			border-bottom: 1px solid #e0e0e0;
+			background-color: #ffffff;
+		}
+		> .dragover-tip {
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background-color: rgba(0, 0, 0, 0.5);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #fff;
+			font-size: 1.6rem;
+			z-index: 9999;
+			pointer-events: none;
+		}
+	}
 
-.main-content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
+	.main-content {
+		display: flex;
+		flex: 1;
+		overflow: hidden;
+		position: relative;
+	}
 
-.canvas-container {
-  flex: 1;
-  position: relative;
-  /* overflow: auto; */
-  /* background-color: #f8f8f8; */
-  :deep(.canvas-container) {
-    position: absolute !important;
-    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
-  }
-}
+	.canvas-container {
+		flex: 1;
+		position: relative;
+		/* overflow: auto; */
+		/* background-color: #f8f8f8; */
+		:deep(.canvas-container) {
+			position: absolute !important;
+			filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
+		}
+	}
 
-.canvas-container canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.app-container >.loading{
-	position: absolute;
-}
+	.canvas-container canvas {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+	.app-container > .loading {
+		position: absolute;
+		background-color: #fff;
+	}
 
-.canvas-container {
-  --offsetX: 50%;
-  --offsetY: 50%;
-  --size: 10px;
-  --color: rgba(229, 229,229,0.5);
-  background-image: -webkit-linear-gradient(
-     90deg,
-      var(--color) 1px,
-      transparent 0,
-    ),
-    -webkit-linear-gradient(
-      0,
-      var(--color) 1px,
-      transparent 0,
-	);
-  background-image:linear-gradient(
-      90deg,
-      var(--color) 1px,
-      transparent 0,
-    ),
-    linear-gradient(
-      0,
-      var(--color) 1px,
-      transparent 0,
-    );
-  background-color: #fafafa;
-  background-position: var(--offsetX) var(--offsetY),
-    calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
-  background-size: calc(var(--size) * 2) calc(var(--size) * 2);
-}
+	.canvas-container {
+		--offsetX: 50%;
+		--offsetY: 50%;
+		--size: 10px;
+		--color: rgba(229, 229, 229, 0.5);
+		background-image: -webkit-linear-gradient(90deg, var(--color) 1px, transparent 0),
+			-webkit-linear-gradient(0, var(--color) 1px, transparent 0);
+		background-image: linear-gradient(90deg, var(--color) 1px, transparent 0),
+			linear-gradient(0, var(--color) 1px, transparent 0);
+		background-color: #fafafa;
+		background-position: var(--offsetX) var(--offsetY),
+			calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
+		background-size: calc(var(--size) * 2) calc(var(--size) * 2);
+	}
 
-.zoom-info {
-  position: absolute;
-  bottom: 1rem;
-  right: 1rem;
-  background: rgba(255, 255, 255, 0.7);
-  padding: 0.5rem 1rem;
-  border-radius: 0.4rem;
-  font-size: 1.4rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  color: #666;
-  display: flex;
-}
+	.zoom-info {
+		position: absolute;
+		bottom: 1rem;
+		right: 1rem;
+		background: rgba(255, 255, 255, 0.7);
+		padding: 0.5rem 1rem;
+		border-radius: 0.4rem;
+		font-size: 1.4rem;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		color: #666;
+		display: flex;
+	}
 
-.zoom-hint {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  background: rgba(255, 255, 255, 0.8);
-  padding: 0.5rem 1rem;
-  border-radius: 0.4rem;
-  font-size: 1.2rem;
-  color: #666;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
+	.zoom-hint {
+		position: absolute;
+		top: 1rem;
+		left: 1rem;
+		background: rgba(255, 255, 255, 0.8);
+		padding: 0.5rem 1rem;
+		border-radius: 0.4rem;
+		font-size: 1.2rem;
+		color: #666;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	}
 
-.reset-zoom {
-  margin-left: 1rem;
-  cursor: pointer;
-  padding: 0.2rem 0.5rem;
-  font-size: 1.2rem;
-  border: 1px solid #ddd;
-  background: #f8f8f8;
-  border-radius: 0.3rem;
-}
+	.reset-zoom {
+		margin-left: 1rem;
+		cursor: pointer;
+		padding: 0.2rem 0.5rem;
+		font-size: 1.2rem;
+		border: 1px solid #ddd;
+		background: #f8f8f8;
+		border-radius: 0.3rem;
+	}
 
-.footer-actions {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  padding: 1.5rem;
-  border-top: 1px solid #e0e0e0;
-}
+	.footer-actions {
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+		padding: 1.5rem;
+		border-top: 1px solid #e0e0e0;
+	}
 
-.share-btn,
-.export-btn {
-  padding: 0.8rem 2rem;
-  border: none;
-  border-radius: 2rem;
-  background-color: #000;
-  color: #fff;
-  font-size: 1.4rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
+	.share-btn,
+	.export-btn {
+		padding: 0.8rem 2rem;
+		border: none;
+		border-radius: 2rem;
+		background-color: #000;
+		color: #fff;
+		font-size: 1.4rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
 
-.share-btn:hover,
-.export-btn:hover {
-  opacity: 0.9;
-}
+	.share-btn:hover,
+	.export-btn:hover {
+		opacity: 0.9;
+	}
 
-button {
-  font-size: 1.3rem;
-  transition: all 0.2s;
-}
+	button {
+		font-size: 1.3rem;
+		transition: all 0.2s;
+	}
 
-button:hover {
-  background: #e6e6e6;
-}
+	button:hover {
+		background: #e6e6e6;
+	}
 
-.help-btn {
-  margin-left: 1rem;
-  cursor: pointer;
-  width: 2.4rem;
-  height: 2.4rem;
-  border-radius: 50%;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+	.help-btn {
+		margin-left: 1rem;
+		cursor: pointer;
+		width: 2.4rem;
+		height: 2.4rem;
+		border-radius: 50%;
+		background-color: #f0f0f0;
+		border: 1px solid #ddd;
+		font-weight: bold;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.help-btn:hover {
-  background-color: #e0e0e0;
-}
+	.help-btn:hover {
+		background-color: #e0e0e0;
+	}
 
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+	}
 
-.modal-content {
-  position: relative;
-  width: 80%;
-  max-width: 60rem;
-  max-height: 90vh;
-  overflow-y: auto;
-  background-color: #fff;
-  border-radius: 0.8rem;
-  padding: 2rem;
-}
+	.modal-content {
+		position: relative;
+		width: 80%;
+		max-width: 60rem;
+		max-height: 90vh;
+		overflow-y: auto;
+		background-color: #fff;
+		border-radius: 0.8rem;
+		padding: 2rem;
+	}
 
-.close-modal {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  border: none;
-  background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  cursor: pointer;
-}
+	.close-modal {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 50%;
+		border: none;
+		background-color: #f0f0f0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2rem;
+		cursor: pointer;
+	}
 
-/* 网格控制面板样式 */
-.grid-controls {
-  position: absolute;
-  bottom: 11.5rem;
-  right: 1rem;
-  background: rgba(255, 255, 255, 0.9);
-  padding: 1rem;
-  border-radius: 0.4rem;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  z-index: 5;
-}
+	/* 网格控制面板样式 */
+	.grid-controls {
+		position: absolute;
+		bottom: 11.5rem;
+		right: 1rem;
+		background: rgba(255, 255, 255, 0.9);
+		padding: 1rem;
+		border-radius: 0.4rem;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+		display: flex;
+		flex-direction: column;
+		gap: 0.8rem;
+		z-index: 5;
+	}
 
-.layers-panel {
-  position: absolute;
-  right: 2rem;
-  top: 1rem;
-  transition: width 0.3s ease;
-  background: #fff;
-  width: 35rem;
-  max-height: 90%;
-  display: flex;
-  overflow: hidden;
-  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
-  backdrop-filter: blur(2px); /* 添加模糊效果 */
-  -webkit-backdrop-filter: blur(2px);
-  background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
-  z-index: 1000; /* 确保面板在最上层 */
-  border: 1px solid #e0e0e0;
-  /* 添加指向整个面板的倒三角 */
-  &::before {
-    content: "";
-    position: absolute;
-    top: -0.9rem;
-    right: 0.6rem;
-    width: 0;
-    height: 0;
-    border-left: 1rem solid transparent;
-    border-right: 1rem solid transparent;
-    border-bottom: 1rem solid rgba(255, 255, 255, 0.95); /* 与面板背景色一致 */
-    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
-    z-index: 1;
-  }
-}
-/* 添加触控设备的样式调整 */
-@media (pointer: coarse) {
-  .tool-btn {
-    width: 4.4rem;
-    height: 4.4rem;
-    font-size: 1.8rem;
-  }
+	.layers-panel {
+		position: absolute;
+		right: 2rem;
+		top: 1rem;
+		transition: width 0.3s ease;
+		background: #fff;
+		width: 35rem;
+		max-height: 90%;
+		display: flex;
+		overflow: hidden;
+		box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+		backdrop-filter: blur(2px); /* 添加模糊效果 */
+		-webkit-backdrop-filter: blur(2px);
+		background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
+		z-index: 1000; /* 确保面板在最上层 */
+		border: 1px solid #e0e0e0;
+		/* 添加指向整个面板的倒三角 */
+		&::before {
+			content: "";
+			position: absolute;
+			top: -0.9rem;
+			right: 0.6rem;
+			width: 0;
+			height: 0;
+			border-left: 1rem solid transparent;
+			border-right: 1rem solid transparent;
+			border-bottom: 1rem solid rgba(255, 255, 255, 0.95); /* 与面板背景色一致 */
+			filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
+			z-index: 1;
+		}
+	}
+	/* 添加触控设备的样式调整 */
+	@media (pointer: coarse) {
+		.tool-btn {
+			width: 4.4rem;
+			height: 4.4rem;
+			font-size: 1.8rem;
+		}
 
-  .layers-panel {
-    width: 28rem;
-  }
+		.layers-panel {
+			width: 28rem;
+		}
 
-  .layer-item,
-  .element-item {
-    padding: 1.2rem 0.8rem;
-  }
+		.layer-item,
+		.element-item {
+			padding: 1.2rem 0.8rem;
+		}
 
-  .element-action-btn,
-  .element-delete-btn {
-    width: 2.4rem;
-    height: 2.4rem;
-  }
+		.element-action-btn,
+		.element-delete-btn {
+			width: 2.4rem;
+			height: 2.4rem;
+		}
 
-  .help-btn {
-    width: 3.2rem;
-    height: 3.2rem;
-  }
+		.help-btn {
+			width: 3.2rem;
+			height: 3.2rem;
+		}
 
-  .modal-content {
-    width: 90%;
-    padding: 1.6rem;
-  }
+		.modal-content {
+			width: 90%;
+			padding: 1.6rem;
+		}
 
-  .close-modal {
-    width: 4rem;
-    height: 4rem;
-    font-size: 2.4rem;
-  }
-}
+		.close-modal {
+			width: 4rem;
+			height: 4rem;
+			font-size: 2.4rem;
+		}
+	}
 
-// 淡入淡出动画
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(1rem);
-}
+	// 淡入淡出动画
+	.fade-enter-active,
+	.fade-leave-active {
+		transition: opacity 0.3s, transform 0.3s;
+	}
+	.fade-enter-from,
+	.fade-leave-to {
+		opacity: 0;
+		transform: translateY(1rem);
+	}
 </style>
diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
index 3ef78c99..84fc497b 100644
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -1335,7 +1335,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
     }
   }
   loadJSON(json, calllBack) {
-
+	this.canvas.loading.value = true;
     // 确保传入的json是字符串格式
     if (typeof json === "object") {
       json = JSON.stringify(json);
@@ -1507,7 +1507,6 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
   */
   async createOtherLayers(otherData) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
-	this.canvas.loading.value = true;
 	let resolve = ()=>{};
 	this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v))
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
@@ -1555,7 +1554,6 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	console.log("==========创建其他图层成功");
 	resolve();
 	this.awaitCanvasRun = null;
-	this.canvas.loading.value = false;
   }
 
   // 设置画布对象的裁剪信息