feat: 修复画布部分bug

src/component/Canvas/CanvasEditor/index.vue

@@ -31,7 +31,10 @@ import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面
 import { OperationType } from "./utils/layerHelper.js";
 import { ToolManager } from "./managers/toolManager.js";
 import { fabric } from "fabric-with-all";
-import { uploadImageAndCreateLayer } from "./utils/imageHelper.js";
+import {
+  uploadImageAndCreateLayer,
+  loadImageUrlToLayer,
+} from "./utils/imageHelper.js";
 // import MinimapPanel from "./components/MinimapPanel.vue";
 const KeyboardShortcutHelp = defineAsyncComponent(() =>
   import("./components/KeyboardShortcutHelp.vue")
@@ -48,6 +51,10 @@ const props = defineProps({
     type: Object,
     default: () => CanvasConfig, // 默认配置
   },
+  showLayersPanel: {
+    type: Boolean,
+    default: true, // 是否显示图层面板
+  },
   enabledRedGreenMode: {
     type: Boolean,
     default: false, // 是否启用红绿图模式
@@ -78,10 +85,10 @@ const imageUploadRef = ref(null);
 const currentZoom = ref(100);
 
 // 画布设置
-const canvasWidth = ref(CanvasConfig.width);
-const canvasHeight = ref(CanvasConfig.height);
-const canvasColor = ref(CanvasConfig.backgroundColor);
-const layerWidth = ref(CanvasConfig.layerWidth);
+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); //  画布是否加载完成
 
@@ -315,29 +322,26 @@ onMounted(async () => {
       }
     }
 
-    // 如果初始化有默认底图，设置底图 - 红绿图模式不通过初始化重置底图了
-    if (!isRedGreenMode.value && props.clothingImageUrl) {
-      nextTick(() => {
-        setTimeout(() => {
-          try {
-            canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
-              undoable: false, // 不可撤销操作
-              ...(props?.clothingImageOpts || {}),
-            });
-          } catch (error) {
-            console.error("更换底图失败:", error);
-          }
-        }, 92); // 延迟 确保更新底图完成
-      });
-
-      this.canvasManager?.centerBackgroundLayer?.(
-        this.canvas.width,
-        this.canvas.height
-      );
-    }
-
     // 初始设置
     handleWindowResize(); // 设置画布大小
+  } else if (!isRedGreenMode.value && props.clothingImageUrl) {
+    nextTick(() => {
+      setTimeout(() => {
+        try {
+          canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
+            undoable: false, // 不可撤销操作
+            ...(props?.clothingImageOpts || {}),
+          });
+        } catch (error) {
+          console.error("更换底图失败:", error);
+        }
+      }, 92); // 延迟 确保更新底图完成
+    });
+
+    canvasManager?.centerBackgroundLayer?.(
+      canvasManager.canvas.width,
+      canvasManager.canvas.height
+    );
   }
 });
 
@@ -646,9 +650,15 @@ defineExpose({
   changeFixedImage: (url, opts) => {
     return canvasManager?.changeFixedImage?.(url, opts);
   },
-  //图片url或者base64   可选图层ID   不传默认新建图层
-  addImageToLayer: (url, layerId) => {
-    return canvasManager.addImageToLayer(url, layerId);
+  //图片url或者base64
+  addImageToLayer: async (url) => {
+    if (!url) return Promise.reject(new Error("图片URL不能为空"));
+    return await loadImageUrlToLayer({
+      imageUrl: url,
+      layerManager,
+      canvas: canvasManager.canvas,
+      toolManager,
+    });
   },
   //图片url或者base64数组   可选图层ID   不传默认新建图层
   addMultipleImagesToLayer: (urls, layerId) => {
@@ -771,6 +781,7 @@ defineExpose({
         :canvasColor="canvasColor"
         :brushSize="brushSize"
         :enabledRedGreenMode="enabledRedGreenMode"
+        :showLayersPanel="showLayersPanel"
         @update:canvasWidth="canvasWidth = $event"
         @update:canvasHeight="canvasHeight = $event"
         @update:canvasColor="canvasColor = $event"
@@ -858,7 +869,10 @@ defineExpose({
       <!-- v-if="canvasManagerLoaded && !enabledRedGreenMode" -->
 
       <transition name="fade">
-        <div class="layers-panel" v-if="isShowLayerPanel">
+        <div
+          class="layers-panel"
+          v-if="isShowLayerPanel && !enabledRedGreenMode && showLayersPanel"
+        >
           <LayersPanel
             v-if="canvasManagerLoaded"
             :activeLayerId="activeLayerId"
@@ -877,10 +891,10 @@ defineExpose({
       </transition>
     </div>
 
-    <div class="footer-actions">
+    <!-- <div class="footer-actions">
       <button class="share-btn">Share</button>
       <button class="export-btn">Export</button>
-    </div>
+    </div> -->
 
     <!-- 快捷键帮助模态框 -->
     <div
@@ -1002,6 +1016,7 @@ defineExpose({
   font-size: 14px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   color: #666;
+  display: flex;
 }
 
 .zoom-hint {