合并画布

src/component/Canvas/CanvasEditor/components/HeaderMenu.vue

@@ -11,8 +11,6 @@ import {
 import { OperationType } from "../utils/layerHelper";
 import BrushPanel from "./BrushPanel.vue";
 import { BrushStore } from "../store/BrushStore";
-import SvgIcon from "@/component/Canvas/SvgIcon/index.vue"
-
 // 提供brushStore给子组件
 provide("brushStore", BrushStore);
 
@@ -47,30 +45,34 @@ const brushPanelRef = ref(null);
 //   return props.activeTool === OperationType.DRAW;
 // });
 
-function updateCanvasSize() {
+function updateCanvasSize(
+  { width, height } = { width: props.width, height: props.height }
+) {
   if (!layerManager) {
     console.warn("LayerManager 未初始化，无法调整背景层尺寸");
     return;
   }
 
-  // 检查画布上是否有除了背景层的其他元素
-  const hasOtherElements = layerManager.layers.value.some((layer) => {
-    if (layer.isBackground) return false;
-    // 检查普通图层是否有对象
-    if (layer.fabricObjects && layer.fabricObjects.length > 0) return true;
-    // 检查固定图层是否有对象
-    if (layer.isFixed && layer.fabricObjects && layer.fabricObjects.length > 0)
-      return true;
-    return false;
-  });
+  layerManager.resizeCanvas(width, height);
 
-  if (hasOtherElements) {
-    // 有其他元素时使用等比缩放命令
-    layerManager.resizeCanvasWithScale(props.canvasWidth, props.canvasHeight);
-  } else {
-    // 只有背景层时使用普通调整命令
-    layerManager.resizeCanvas(props.canvasWidth, props.canvasHeight);
-  }
+  // // 检查画布上是否有除了背景层的其他元素
+  // const hasOtherElements = layerManager.layers.value.some((layer) => {
+  //   if (layer.isBackground) return false;
+  //   // 检查普通图层是否有对象
+  //   if (layer.fabricObjects && layer.fabricObjects.length > 0) return true;
+  //   // 检查固定图层是否有对象
+  //   if (layer.isFixed && layer.fabricObjects && layer.fabricObjects.length > 0)
+  //     return true;
+  //   return false;
+  // });
+
+  // if (hasOtherElements) {
+  //   // 有其他元素时使用等比缩放命令
+  //   layerManager.resizeCanvasWithScale(width, height);
+  // } else {
+  //   // 只有背景层时使用普通调整命令
+  //   layerManager.resizeCanvas(width, height);
+  // }
 
   emit("canvas-size-change");
 }
@@ -268,27 +270,39 @@ onMounted(() => {
       " -->
       <div class="canvas-settings" v-if="!props.enabledRedGreenMode">
         <div class="setting-group">
-          <span class="setting-label">Width</span>
-          <input
-            type="text"
+          <span class="setting-label">{{ $t("宽度") }}</span>
+          <a-input-number
             :value="canvasWidth"
             class="setting-input"
-            @input="$emit('update:canvasWidth', Number($event.target.value))"
-            @change="updateCanvasSize"
+            :min="1"
+            :max="9999"
+            :step="1"
+            @change="
+              (value) => {
+                $emit('update:canvasWidth', value);
+                updateCanvasSize({ width: value, height: canvasHeight });
+              }
+            "
           />
         </div>
         <div class="setting-group">
-          <span class="setting-label">Height</span>
-          <input
-            type="text"
+          <span class="setting-label">{{ $t("高度") }}</span>
+          <a-input-number
             :value="canvasHeight"
             class="setting-input"
-            @input="$emit('update:canvasHeight', Number($event.target.value))"
-            @change="updateCanvasSize"
+            :min="1"
+            :max="9999"
+            :step="1"
+            @change="
+              (value) => {
+                $emit('update:canvasHeight', value);
+                updateCanvasSize({ width: canvasWidth, height: value });
+              }
+            "
           />
         </div>
         <div class="setting-group">
-          <span class="setting-label">Color</span>
+          <span class="setting-label">{{ $t("颜色") }}</span>
           <div class="color-picker-wrapper">
             <input
               type="color"
@@ -323,11 +337,12 @@ onMounted(() => {
     </div> -->
 
     <!-- 绘图工具设置 -->
-    <div class="canvas-settings gap-20" v-if="!props.enabledRedGreenMode">
+    <div class="canvas-settings gap-20">
       <div
         class="btn"
         :class="{ active: showBrushPanel }"
         @click="toggleBrushPanel"
+        v-if="!props.enabledRedGreenMode"
       >
         <!-- <span class="setting-label">笔刷:</span>/ -->
         <div class="brush-selector">
@@ -439,10 +454,11 @@ onMounted(() => {
 }
 
 .setting-input {
-  width: 60px;
+  width: 80px;
+}
+
+.setting-input :deep(.ant-input-number-input) {
   padding: 4px 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
   font-size: 14px;
 }
 
@@ -494,15 +510,7 @@ onMounted(() => {
 }
 
 .brush-selector {
-  // display: flex;
-  // align-items: center;
-  // border: 1px solid #ddd;
-  // border-radius: 4px;
-  // padding: 5px;
-  // cursor: pointer;
-  // background-color: white;
-  // width: 80px;
-  // justify-content: space-between;
+  display: block;
 }
 
 .brush-preview {