fix

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

@@ -327,22 +327,24 @@ const handleToolClick = (tool) => {
       @change="fillColorChange"
       style="width: 0; height: 0; opacity: 0"
     />
-
-    <slot name="customToolsTop" :tool-button-props="{ activeTool, canUndo, canRedo }" />
+	<div class="tools-list">
+		<slot name="customToolsTop" :tool-button-props="{ activeTool, canUndo, canRedo }" />
 
 
-    <ToolButton
-      v-for="tool in toolsList"
-      :key="tool.id"
-      :tool="tool"
-      :active-tool="activeTool"
-      :can-undo="canUndo"
-      :can-redo="canRedo"
-      @click="handleToolClick"
-    />
+		<ToolButton
+		v-for="tool in toolsList"
+		:key="tool.id"
+		:tool="tool"
+		:active-tool="activeTool"
+		:can-undo="canUndo"
+		:can-redo="canRedo"
+		@click="handleToolClick"
+		/>
 
-    <!-- 自定义工具栏按钮插槽 -->
-    <slot name="customToolsBottom" :tool-button-props="{ activeTool, canUndo, canRedo }" />
+		<!-- 自定义工具栏按钮插槽 -->
+		<slot name="customToolsBottom" :tool-button-props="{ activeTool, canUndo, canRedo }" />
+	</div>
+    
   </div>
 </template>
 
@@ -350,17 +352,22 @@ const handleToolClick = (tool) => {
 .tools-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 1.0rem;
   padding: 1.5rem 1.0rem;
   border-right: .1rem solid #e0e0e0;
   background-color: #ffffff;
   user-select: none;
   min-width: 5.8rem;
   height: 100%;
+  padding-top: .5rem;
   /* overflow-y: auto; */
   /* overflow-x: hidden; */
 }
-
+.tools-list{
+	display: flex;
+	flex-direction: column;
+	gap: 1.0rem;
+	flex: 1;
+}
 .red-green-mode {
   background-color: #fff4f4;
 }

src/component/Canvas/CanvasEditor/index.vue

@@ -806,6 +806,7 @@ const changeCanvas = async (command) => {
 	setTimeout(async ()=>{
 		const imageData = await canvasManager.exportImage({
 			restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
+			isCropByBg:true,
 		});
 		emit("trigger-red-green-mouseup", imageData);
 	},100)