画布开发合并：选择状态消失，填充背景实时更新，图层层级关系，新增画布名字递增

src/component/Canvas/CanvasEditor/commands/LayerCommands.js

@@ -2058,7 +2058,7 @@ export class LayerObjectsToGroupCommand extends Command {
     }
 
     try {
-      await optimizeCanvasRendering(this.canvas, () => {
+      await optimizeCanvasRendering(this.canvas, async () => {
         if (existingGroup) {
           // 向现有组添加对象
           this._addObjectsToExistingGroup(existingGroup, newObjectsToAdd);
@@ -2069,8 +2069,8 @@ export class LayerObjectsToGroupCommand extends Command {
           this._createNewGroupWithAllObjects(newObjectsToAdd);
           this.groupObjectId = this.newGroupId;
           this.wasGroupCreated = true;
+		  await this.layerManager?.layerSort?.rearrangeObjects();
         }
-
         // 更新交互性
         this.layerManager?.updateLayersObjectsInteractivity?.(false).then(()=>{
           // 更新缩略图

src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js

@@ -1,5 +1,7 @@
 import { Command, FunctionCommand } from "./Command";
 import { getLiquifyReferenceManager } from "../managers/LiquifyReferenceManager";
+import { optimizeCanvasRendering } from "../utils/helper";
+import { fabric } from "fabric-with-all";
 
 /**
  * 液化命令基类
@@ -59,9 +61,7 @@ export class LiquifyCommand extends Command {
 
     // 更新画布上的对象
     await this._updateObjectWithResult();
-
+    // 注意：_updateObjectWithResult 内部已使用 optimizeCanvasRendering，会自动渲染
-    // 刷新Canvas
-    this.canvas.renderAll();
 
     return this.resultData;
   }
@@ -130,6 +130,7 @@ export class LiquifyCommand extends Command {
 
   /**
    * 使用变形结果更新对象
+   * 优化：直接使用 setElement 更新现有对象，避免创建新对象和替换操作
    * @private
    */
   async _updateObjectWithResult() {
@@ -142,48 +143,103 @@ export class LiquifyCommand extends Command {
     const tempCtx = tempCanvas.getContext("2d");
     tempCtx.putImageData(this.resultData, 0, 0);
     console.log("临时Canvas创建成功  _updateObjectWithResult", this.resultData);
-    // 更新Fabric图像
+    
-    await new Promise((resolve) => {
+    // 使用优化渲染工具，避免图层闪烁
-      fabric.Image.fromURL(tempCanvas.toDataURL(), (img) => {
+    await optimizeCanvasRendering(this.canvas, async () => {
-        // 保留原对象的属性
+      // 预加载图像元素，确保完全加载后再更新
-        img.set({
+      await this._updateObjectElementDirectly(tempCanvas.toDataURL());
-          left: this.targetObject.left,
-          top: this.targetObject.top,
-          scaleX: this.targetObject.scaleX,
-          scaleY: this.targetObject.scaleY,
-          angle: this.targetObject.angle,
-          flipX: this.targetObject.flipX,
-          flipY: this.targetObject.flipY,
-          opacity: this.targetObject.opacity,
-        });
-
-        // 替换Canvas上的对象
-        const index = this.canvas.getObjects().indexOf(this.targetObject);
-        if (index !== -1) {
-          this.canvas.remove(this.targetObject);
-          this.canvas.insertAt(img, index);
-          this.targetObject = img;
-        }
-
-        // 确保图层引用更新
-        const layer = this.layerManager.getLayerById(this.targetLayerId);
-        if (layer) {
-          if (layer.type === "background" && layer.fabricObject === this.targetObject) {
-            layer.fabricObject = img;
-          } else if (layer.fabricObjects) {
-            const objIndex = layer.fabricObjects.indexOf(this.targetObject);
-            if (objIndex !== -1) {
-              layer.fabricObjects[objIndex] = img;
-            }
-          }
-        }
-
-        resolve();
-      });
     });
 
     return true;
   }
+
+  /**
+   * 直接更新对象的图像元素，避免对象替换造成的图层闪烁
+   * @param {String} imageDataURL 图像数据的 DataURL
+   * @private
+   */
+  async _updateObjectElementDirectly(imageDataURL) {
+    return new Promise((resolve, reject) => {
+      // 创建 HTMLImageElement 并预加载
+      const imgElement = new Image();
+      
+      imgElement.onload = () => {
+        try {
+          // 保存当前对象状态（非图像属性）
+          const currentState = {
+            left: this.targetObject.left,
+            top: this.targetObject.top,
+            scaleX: this.targetObject.scaleX,
+            scaleY: this.targetObject.scaleY,
+            angle: this.targetObject.angle,
+            flipX: this.targetObject.flipX,
+            flipY: this.targetObject.flipY,
+            opacity: this.targetObject.opacity,
+          };
+
+          // 直接更新现有对象的图像元素，保持对象引用不变
+          if (this.targetObject.setElement) {
+            this.targetObject.setElement(imgElement);
+          } else if (this.targetObject._element) {
+            this.targetObject._element = imgElement;
+            this.targetObject._originalElement = imgElement;
+          }
+
+          // 恢复对象属性（setElement 可能会重置一些属性）
+          this.targetObject.set(currentState);
+          
+          // 标记对象需要重新渲染
+          this.targetObject.dirty = true;
+          this.targetObject.setCoords();
+          
+          resolve();
+        } catch (error) {
+          console.error("更新对象元素失败:", error);
+          reject(error);
+        }
+      };
+
+      imgElement.onerror = () => {
+        reject(new Error("图像加载失败"));
+      };
+
+      // 开始加载图像
+      imgElement.src = imageDataURL;
+    });
+  }
+
+  /**
+   * 安全地替换对象，避免图层闪烁（保留作为备用方法）
+   * @param {Object} newImg 新的fabric图像对象
+   * @private
+   */
+  _replaceObjectSafely(newImg) {
+    // 保存旧对象引用，用于更新图层引用
+    const oldObject = this.targetObject;
+    
+    // 替换Canvas上的对象
+    const index = this.canvas.getObjects().indexOf(oldObject);
+    if (index !== -1) {
+      // 在禁用自动渲染的情况下，先插入新对象，再移除旧对象
+      // 这样可以避免中间出现空白（因为renderOnAddRemove已被禁用）
+      this.canvas.insertAt(newImg, index);
+      this.canvas.remove(oldObject);
+      this.targetObject = newImg;
+    }
+
+    // 确保图层引用更新
+    const layer = this.layerManager.getLayerById(this.targetLayerId);
+    if (layer) {
+      if (layer.type === "background" && layer.fabricObject === oldObject) {
+        layer.fabricObject = newImg;
+      } else if (layer.fabricObjects) {
+        const objIndex = layer.fabricObjects.indexOf(oldObject);
+        if (objIndex !== -1) {
+          layer.fabricObjects[objIndex] = newImg;
+        }
+      }
+    }
+  }
 }
 
 /**
@@ -271,8 +327,8 @@ export class LiquifyDeformCommand extends LiquifyCommand {
 
     // 应用变形结果
     await this._updateObjectWithImageData(this.afterData);
+    // 注意：_updateObjectWithImageData 内部已使用 optimizeCanvasRendering，会自动渲染
 
-    this.canvas.renderAll();
     return this.afterData;
   }
 
@@ -283,70 +339,70 @@ export class LiquifyDeformCommand extends LiquifyCommand {
 
     // 恢复到变形前的状态
     await this._updateObjectWithImageData(this.beforeData);
+    // 注意：_updateObjectWithImageData 内部已使用 optimizeCanvasRendering，会自动渲染
 
-    this.canvas.renderAll();
     return true;
   }
 
   /**
    * 使用图像数据更新对象
+   * 优化：直接使用 setElement 更新现有对象，避免创建新对象和替换操作
    * @param {ImageData} imageData 图像数据
    * @private
    */
   async _updateObjectWithImageData(imageData) {
-    return new Promise((resolve) => {
+    // 创建临时canvas
-      // 创建临时canvas
+    const tempCanvas = document.createElement("canvas");
-      const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = imageData.width;
-      tempCanvas.width = imageData.width;
+    tempCanvas.height = imageData.height;
-      tempCanvas.height = imageData.height;
+    const tempCtx = tempCanvas.getContext("2d");
-      const tempCtx = tempCanvas.getContext("2d");
+    tempCtx.putImageData(imageData, 0, 0);
-      tempCtx.putImageData(imageData, 0, 0);
 
-      // 从canvas创建新的fabric图像
+    // 使用优化渲染工具，避免图层闪烁
-      fabric.Image.fromURL(tempCanvas.toDataURL(), (img) => {
+    await optimizeCanvasRendering(this.canvas, async () => {
-        // 保留原对象的变换属性
+      // 直接更新对象元素，避免对象替换
-        img.set({
+      await this._updateObjectElementDirectly(tempCanvas.toDataURL());
-          left: this.targetObject.left,
-          top: this.targetObject.top,
-          scaleX: this.targetObject.scaleX,
-          scaleY: this.targetObject.scaleY,
-          angle: this.targetObject.angle,
-          flipX: this.targetObject.flipX,
-          flipY: this.targetObject.flipY,
-          opacity: this.targetObject.opacity,
-        });
-
-        // 替换canvas上的对象
-        const index = this.canvas.getObjects().indexOf(this.targetObject);
-        if (index !== -1) {
-          this.canvas.remove(this.targetObject);
-          this.canvas.insertAt(img, index);
-          this.targetObject = img;
-
-          // 更新图层引用
-          const layer = this.layerManager.getLayerById(this.targetLayerId);
-          if (layer) {
-            if (
-              layer.type === "background" &&
-              (layer.fabricObject === this.savedState?.originalObject ||
-                layer.fabricObject === this.targetObject)
-            ) {
-              layer.fabricObject = img;
-            } else if (layer.fabricObjects) {
-              const objIndex = layer.fabricObjects.findIndex(
-                (obj) => obj === this.savedState?.originalObject || obj === this.targetObject
-              );
-              if (objIndex !== -1) {
-                layer.fabricObjects[objIndex] = img;
-              }
-            }
-          }
-        }
-
-        resolve();
-      });
     });
   }
+
+  /**
+   * 安全地替换变形对象，避免图层闪烁（保留作为备用方法）
+   * @param {Object} newImg 新的fabric图像对象
+   * @private
+   */
+  _replaceDeformObjectSafely(newImg) {
+    // 保存旧对象引用，用于更新图层引用
+    const oldObject = this.targetObject;
+    
+    // 替换Canvas上的对象
+    const index = this.canvas.getObjects().indexOf(oldObject);
+    if (index !== -1) {
+      // 在禁用自动渲染的情况下，先插入新对象，再移除旧对象
+      // 这样可以避免中间出现空白
+      this.canvas.insertAt(newImg, index);
+      this.canvas.remove(oldObject);
+      this.targetObject = newImg;
+    }
+
+    // 更新图层引用
+    const layer = this.layerManager.getLayerById(this.targetLayerId);
+    if (layer) {
+      if (
+        layer.type === "background" &&
+        (layer.fabricObject === this.savedState?.originalObject ||
+          layer.fabricObject === oldObject)
+      ) {
+        layer.fabricObject = newImg;
+      } else if (layer.fabricObjects) {
+        const objIndex = layer.fabricObjects.findIndex(
+          (obj) => obj === this.savedState?.originalObject || obj === oldObject
+        );
+        if (objIndex !== -1) {
+          layer.fabricObjects[objIndex] = newImg;
+        }
+      }
+    }
+  }
 }
 
 /**

src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js

@@ -255,6 +255,8 @@ export class AddObjectToLayerCommand extends Command {
       );
       // 标记为非首次执行
       this.isFirstExecution = false;
+      // 重新排序图层对象
+      await this.layerManager?.layerSort?.rearrangeObjects();
       console.log(
         `✅ 对象已添加到图层 "${layer.name}"，位置: (${this.fabricObject.left}, ${this.fabricObject.top})`
       );

src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js

@@ -359,7 +359,8 @@ export class RasterizeLayerCommand extends Command {
 
     // 设置为活动图层
     this.activeLayerId.value = this.rasterizedLayerId;
-
+	// 重新排序图层对象
+	await this.layerManager?.layerSort?.rearrangeObjects();
     await this.layerManager?.updateLayersObjectsInteractivity(false);
 
     console.log(`🎨 组合图层 ${this.rasterizedLayer.name} 创建完成`);

src/component/Canvas/CanvasEditor/commands/TextCommands.js

@@ -409,6 +409,9 @@ export class CreateTextCommand extends Command {
         // 现在可以安全地设置为活动图层
         this.layerManager.setActiveLayer(this.layerId);
 
+		// 重新排序图层对象
+		await this.layerManager?.layerSort?.rearrangeObjects();
+
         // 更新对象交互性
         await this.layerManager?.updateLayersObjectsInteractivity?.(false);
 

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

@@ -589,11 +589,11 @@ function handleLayerClick(layer, event) {
         layerManager?.setAllActiveGroupLayerCanvasObject?.(layer);
         setActiveLayer(layer.children[0].id, { parentId: layer.id });
       } else {
+        // 选中画布中的图层对象
+        layerManager?.selectLayerObjects(layer.id);
         // 否则直接设置当前图层为活动图层
         setActiveLayer(layer.id);
         layerManager?.updateLayersObjectsInteractivity();
-        // 选中画布中的图层对象
-        layerManager?.selectLayerObjects(layer.id);
       }
     }
     lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id);

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

@@ -0,0 +1,609 @@
+<template>
+	<transition name="fade">
+		<div
+			class="select-menu-panel"
+			v-if="visible"
+			:class="{ active: !closePanel }"
+		>
+			<div class="btn" @click="setClosePanel">
+				<i class="fi fi-br-angle-left"></i>
+			</div>
+			<!-- 变换工具顶部 -->
+			<div class="panel-select">
+				<!-- <div class="panel-header">
+					<div class="header-title">变换工具</div>
+				</div> -->
+				<!-- 分割线 -->
+				<!-- <div class="panel-divider"></div> -->
+				<!-- 变换工具内容 -->
+				<div class="tool-content">
+					<div
+						class="object-item"
+						v-for="v in activeObjects"
+						:key="v.id"
+					>
+						<div class="title">图层1</div>
+						<div class="list">
+							<div>
+								<span class="label">W</span>
+								<input
+									type="number"
+									:value="v.width"
+									disabled
+								/>
+							</div>
+							<div>
+								<span class="label">H</span>
+								<input
+									type="number"
+									:value="v.height"
+									disabled
+								/>
+							</div>
+							<!-- <div>
+								<span class="label">X</span>
+								<input type="number" :value="v.left" disabled />
+							</div>
+							<div>
+								<span class="label">Y</span>
+								<input type="number" :value="v.top" disabled />
+							</div> -->
+							<div>
+								<span class="label iconfont icon-angle"></span>
+								<input
+									type="number"
+									:value="v.angle"
+									disabled
+								/>
+							</div>
+							<div class="btn" @click="clickflipHorizontal">
+								<i class="iconfont icon-flip-horizontal"></i>
+								<p class="tip">水平翻转</p>
+							</div>
+							<div class="btn" @click="clickflipVertical">
+								<i class="iconfont icon-flip-vertical"></i>
+								<p class="tip">垂直翻转</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script setup>
+	import { ref, onMounted, watch, onUnmounted } from "vue";
+	import { useI18n } from "vue-i18n";
+	import { ToolCommand } from "../commands/ToolCommands";
+	import { OperationType } from "../utils/layerHelper";
+	const props = defineProps({
+		canvas: {
+			type: Object,
+			required: true,
+		},
+		commandManager: {
+			type: Object,
+			required: true,
+		},
+		selectManager: {
+			type: Object,
+			required: true,
+		},
+		layerManager: {
+			type: Object,
+			required: true,
+		},
+		toolManager: {
+			type: Object,
+			required: true,
+		},
+		activeTool: {
+			type: String,
+			required: false,
+			default: null,
+		},
+	});
+
+	// 响应式数据
+	const visible = ref(false);
+	//打开隐藏操作面板
+	const closePanel = ref(false);
+	const setClosePanel = () => {
+		closePanel.value = !closePanel.value;
+	};
+
+	// 国际化
+	const { t } = useI18n();
+
+	onMounted(() => {
+		setupCanvasListeners();
+	});
+	onUnmounted(() => {
+		removeCanvasListeners();
+	});
+
+	// 监听 activeTool 变化
+	watch(
+		() => props.activeTool,
+		(newTool) => {
+			if (newTool === OperationType.SELECT) {
+				show();
+			} else {
+				close();
+			}
+		},
+		{ immediate: true }
+	);
+
+	/**
+	 * 显示面板
+	 */
+	function show() {
+		if(activeObjects.value.length === 0) return;
+		visible.value = true;
+		closePanel.value = true;
+	}
+
+	/**
+	 * 关闭面板
+	 */
+	function close() {
+		visible.value = false;
+	}
+	// 获取当前选中的对象
+	const activeObjects = ref([]);
+	const getActiveObject = (e) => {
+		console.log("==========切换激活对象", e);
+		activeObjects.value = e.selected.map((v) => v.toObject());
+		if (activeObjects.value.length === 0) {
+			close();
+		} else {
+			show(false);
+		}
+	};
+	const clickflipHorizontal = () => {
+		console.log("水平翻转");
+	};
+	const clickflipVertical = () => {
+		console.log("垂直翻转");
+	};
+
+
+	/**
+	 * 设置画布事件监听
+	 */
+	function setupCanvasListeners() {
+		if (!props.canvas) return;
+		// 鼠标事件
+		props.canvas.on("selection:created", getActiveObject);
+		props.canvas.on("selection:updated", getActiveObject);
+		// props.canvas.on("selection:cleared", () => console.log("selection:cleared"));
+		props.canvas.on("selection:cleared", close);
+	}
+
+	/**
+	 * 移除画布事件监听
+	 */
+	function removeCanvasListeners() {
+		if (!props.canvas) return;
+
+		// 移除鼠标事件
+		props.canvas.off("selection:created", getActiveObject);
+		props.canvas.off("selection:updated", getActiveObject);
+		// props.canvas.off("selection:cleared");
+	}
+</script>
+
+<style scoped lang="less">
+	.select-menu-panel {
+		position: absolute;
+		bottom: 22px;
+		left: 20px;
+		right: 20px;
+		max-width: min(90vw, 640px);
+		margin: 0 auto;
+		background-color: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(15px);
+		border-radius: 8px;
+		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+		z-index: 1000;
+		color: #333;
+		border: 1px solid rgba(0, 0, 0, 0.05);
+		user-select: none;
+		&.active {
+			transform: translateY(100%);
+			> .btn {
+				> i {
+					transform: rotate(90deg);
+				}
+			}
+		}
+		> .btn {
+			width: 100%;
+			height: 22px;
+			text-align: center;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			> i {
+				font-size: 1.4rem;
+				transform: rotate(270deg);
+			}
+		}
+	}
+
+	/* 平板和手机适配 */
+	@media screen and (max-width: 768px) {
+		.select-menu-panel {
+			bottom: 15px;
+			left: 15px;
+			right: 15px;
+			max-width: calc(100vw - 30px);
+			border-radius: 6px;
+		}
+	}
+
+	@media screen and (max-width: 480px) {
+		.select-menu-panel {
+			bottom: 10px;
+			left: 10px;
+			right: 10px;
+			max-width: calc(100vw - 20px);
+		}
+	}
+
+	.select-menu-panel.is-active {
+		transform: translateY(0);
+	}
+
+	.panel-header {
+		padding: 8px 15px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+		background-color: rgba(255, 255, 255, 0.8);
+		border-radius: 8px 8px 0 0;
+	}
+
+	.header-title {
+		font-size: 13px;
+		font-weight: 500;
+		color: #333;
+		text-align: left;
+	}
+
+	.panel-select {
+		// padding: 0 0 10px;
+	}
+
+	/* 平板适配 */
+	@media screen and (max-width: 768px) {
+		.panel-header {
+			padding: 6px 12px;
+			border-radius: 6px 6px 0 0;
+		}
+	}
+
+	/* 手机适配 */
+	@media screen and (max-width: 480px) {
+		.panel-header {
+			padding: 5px 10px;
+		}
+
+		.header-title {
+			font-size: 12px;
+		}
+	}
+
+	.tool-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(0, 0, 0, 0.05);
+		border: none;
+		border-radius: 6px;
+		padding: 6px;
+		color: #333;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.tool-btn span {
+		margin-top: 0;
+		font-size: 12px;
+	}
+
+	.tool-btn svg {
+		width: 24px;
+		height: 24px;
+	}
+
+	.tool-btn:hover {
+		background-color: rgba(0, 0, 0, 0.08);
+	}
+
+	.tool-btn.active {
+		background-color: #007aff;
+		color: white;
+	}
+
+	.panel-divider {
+		height: 1px;
+		background-color: rgba(0, 0, 0, 0.05);
+		margin: 0 10px 5px 10px;
+	}
+
+	.tool-content {
+		overflow-y: auto;
+		max-height: 220px;
+		margin-top: 10px;
+		padding: 0 10px;
+		> .object-item {
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+			padding: 10px 0;
+			&:last-child {
+				border-bottom: none;
+			}
+			> .title {
+				text-align: left;
+				margin-bottom: 5px;
+			}
+			> .list {
+				display: flex;
+				> div {
+					margin-right: 15px;
+					font-size: 14px;
+					color: #474747;
+					> .label {
+						margin-right: 5px;
+					}
+					> input {
+						width: 65px;
+					}
+					.iconfont {
+						font-size: 14px;
+					}
+				}
+				> div.btn {
+					position: relative;
+					min-width: 24px;
+					cursor: pointer;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 2px;
+					transition: background-color 0.2s;
+					background-color: rgba(0, 0, 0, 0);
+					> .tip {
+						position: absolute;
+						top: -5px;
+						left: 50%;
+						transform: translate(-50%, -100%);
+						background-color: rgba(0, 0, 0, 0.7);
+						color: white;
+						padding: 0.4rem 0.8rem;
+						border-radius: 0.4rem;
+						margin-left: 0.8rem;
+						font-size: 1.2rem;
+						white-space: nowrap;
+						pointer-events: none;
+						display: none;
+						&::after {
+							content: "";
+							position: absolute;
+							top: 97%;
+							left: 50%;
+							transform: translateX(-50%);
+							width: 0;
+							height: 0;
+							border-left: 5px solid transparent;
+							border-right: 5px solid transparent;
+							border-top: 5px solid rgba(0, 0, 0, 0.8);
+						}
+					}
+					&:hover {
+						background-color: rgba(0, 0, 0, 0.08);
+						> .tip {
+							display: block;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/* 平板适配 - 每行4个按钮 */
+	@media screen and (max-width: 768px) {
+		.tool-content {
+			grid-template-columns: repeat(3, 1fr);
+			gap: 8px 6px;
+			padding: 0 8px;
+		}
+	}
+
+	/* 手机适配 - 每行3个按钮 */
+	@media screen and (max-width: 480px) {
+		.tool-content {
+			grid-template-columns: repeat(3, 1fr);
+			gap: 6px 4px;
+			padding: 0 6px;
+		}
+
+		.header-btn {
+			font-size: 11px;
+			padding: 2px 4px;
+			min-width: 28px;
+		}
+	}
+
+	.action-btn {
+		display: flex;
+		// flex-direction: column;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		border: none;
+		color: #333;
+		cursor: pointer;
+		padding: 0;
+		gap: 4px;
+		.c-svg {
+			width: auto;
+		}
+	}
+
+	.action-btn svg {
+		width: 22px;
+		height: 22px;
+		margin-bottom: 8px;
+	}
+
+	.btn-text {
+		display: block;
+		font-size: 12px;
+		text-align: center;
+	}
+
+	.action-btn:hover {
+		color: #007aff;
+	}
+
+	.action-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* 对话框样式 */
+	.dialog-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 2000;
+	}
+
+	.dialog-container {
+		background-color: #ffffff;
+		border-radius: 12px;
+		width: 280px;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		border: 1px solid rgba(0, 0, 0, 0.05);
+	}
+
+	.dialog-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 15px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+	}
+
+	.dialog-header h3 {
+		margin: 0;
+		font-size: 15px;
+		color: #333;
+		font-weight: 500;
+	}
+
+	.close-dialog-btn {
+		background: none;
+		border: none;
+		color: #666;
+		font-size: 18px;
+		cursor: pointer;
+		padding: 0;
+		line-height: 1;
+	}
+
+	.dialog-content {
+		padding: 15px;
+	}
+
+	.feather-control {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20px;
+	}
+
+	.slider-control {
+		flex: 1;
+		height: 4px;
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: 2px;
+		-webkit-appearance: none;
+		appearance: none;
+		margin-right: 10px;
+	}
+
+	.slider-control::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: #007aff;
+		cursor: pointer;
+	}
+
+	.feather-value {
+		font-size: 14px;
+		color: #333;
+		min-width: 40px;
+		text-align: right;
+	}
+
+	.dialog-buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 10px;
+		margin-top: 15px;
+	}
+
+	.cancel-btn,
+	.confirm-btn {
+		padding: 8px 16px;
+		border-radius: 6px;
+		font-size: 14px;
+		cursor: pointer;
+		border: none;
+	}
+
+	.cancel-btn {
+		background-color: rgba(0, 0, 0, 0.05);
+		color: #333;
+	}
+
+	.confirm-btn {
+		background-color: #007aff;
+		color: white;
+	}
+
+	.color-picker {
+		width: 100%;
+		height: 40px;
+		border: none;
+		border-radius: 6px;
+		cursor: pointer;
+	}
+
+	.fade-enter-active,
+	.fade-leave-active {
+		transition: opacity 0.3s, transform 0.3s;
+	}
+	.fade-enter-from,
+	.fade-leave-to {
+		opacity: 0;
+		transform: translateY(30px);
+	}
+</style>

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

@@ -327,11 +327,14 @@ function handleKeyDown(event) {
   }
 }
 
+const fillInputTimeout = ref(null);
 // 填充颜色选择器
 function fillColorChange() {
-  layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
+	clearTimeout(fillInputTimeout.value);
+	fillInputTimeout.value = setTimeout(() => {
+		layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
+	}, 100);
 }
-
 onMounted(() => {
   // 添加键盘事件监听
   window.addEventListener("keydown", handleKeyDown);
@@ -355,7 +358,7 @@ const handleToolClick = (tool) => {
       v-model="fillColor"
       ref="fillColorRef"
       type="color"
-      @change="fillColorChange"
+	  @input="fillColorChange"
       style="width: 0; height: 0; opacity: 0"
     />
 	<div class="tools-list">

src/component/Canvas/CanvasEditor/fabric-canvas-events.text

@@ -0,0 +1,23 @@
+1. 初始化事件
+object:added：当新对象被添加到画布上时触发。
+object:removed：当对象从画布上移除时触发。
+selection:created：当选择对象时触发。
+selection:updated：当选择的对象被更新时触发。
+selection:cleared：当所有对象都被取消选择时触发。
+
+2. 鼠标事件
+mouse:down：鼠标按下时触发。
+mouse:move：鼠标移动时触发。
+mouse:up：鼠标释放时触发。
+mouse:over：鼠标移到画布上时触发。
+mouse:out：鼠标移出画布时触发。
+mouse:wheel：鼠标滚轮滚动时触发。
+
+3. 触摸事件（在触摸屏设备上）
+touch:start：触摸开始时触发。
+touch:move：触摸移动时触发。
+touch:end：触摸结束时触发。
+
+4. 键盘事件
+key:down：键盘按键按下时触发。
+key:up：键盘按键释放时触发。

src/component/Canvas/CanvasEditor/index.vue

@@ -34,6 +34,7 @@ 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 SelectMenuPanel from "./components/SelectMenuPanel.vue"; // 引入选择工具菜单组件
 import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
 import { LayerType, OperationType } from "./utils/layerHelper.js";
 import { ToolManager } from "./managers/ToolManager.js";
@@ -619,12 +620,22 @@ function updateCanvasSize() {
 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(t("Canvas.EmptyLayer"));
+  await layerManager.createLayer(createLayerName());
 }
 async function addTopLayer() {
-  await layerManager.createLayer(t("Canvas.EmptyLayer"), LayerType.EMPTY, {
+  await layerManager.createLayer(createLayerName(), LayerType.EMPTY, {
     insertTop: true,
   });
 }
@@ -1173,6 +1184,17 @@ defineExpose({
           :activeTool="activeTool"
         />
 
+        <!-- 选择工具菜单组件 -->
+        <!-- <SelectMenuPanel
+          v-if="canvasManagerLoaded && !enabledRedGreenMode"
+          :canvas="canvasManager && canvasManager.canvas"
+          :commandManager="commandManager"
+          :selectionManager="selectionManager"
+          :layerManager="layerManager"
+          :toolManager="toolManager"
+          :activeTool="activeTool"
+        /> -->
+
         <div class="zoom-info">
           {{ t("Canvas.Scale") }}: {{ currentZoom }}%
           <button class="reset-zoom" @click="resetZoom">

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -822,8 +822,8 @@ export class CanvasManager {
 
     try {
       // 如果当前有选中对象，先清除选中状态 否则导出有问题
-      this.canvas.discardActiveObject(); // 清除选中状态
+      // this.canvas.discardActiveObject(); // 清除选中状态
-      this.canvas.renderAll(); // 重新渲染画布
+      // this.canvas.renderAll(); // 重新渲染画布
       // 自动设置红绿图模式相关参数
       const enhancedOptions = {
         ...options,

src/component/Canvas/CanvasEditor/managers/LayerManager.js

@@ -910,6 +910,17 @@ export class LayerManager {
     return layer;
   }
 
+  /**
+   * 根据name获取图层
+   * @param {string} layerName 图层名称
+   * @returns {Object|null} 图层对象或null
+   */
+  getLayerByName(layerName) {
+    const layer = this.layers.value.find((layer) => layer.name === layerName);
+    return layer || null;
+  }
+
+
   /**
    * 获取当前图层对象的列表
    * @param {string} layerId 可选，指定图层ID，默认使用当前活动图层
@@ -946,6 +957,14 @@ export class LayerManager {
       return false;
     }
 
+    // 检查是否是唯一的普通图层
+    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
+	console.log("普通图层:", normalLayers)
+    if (normalLayers.length === 1) {
+      console.warn("不能删除唯一的普通图层");
+      message.warning("不能删除唯一的普通图层");
+      return false;
+    }
     // // 如果图层有子图层，提示确认
     // if (layer && layer.children && layer.children.length > 0) {
     //   console.warn("该图层包含子图层，删除将同时删除所有子图层");

src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js

@@ -181,10 +181,15 @@ export class CanvasEventManager {
   setupMouseEvents() {
     // 鼠标按下事件
     this.canvas.on("mouse:down", (opt) => {
+		// console.log("==========鼠标按下",opt)
       // 平滑停止任何正在进行的惯性动画
       this.stopInertiaAnimation(true);
 
-      if (
+    //   if (opt.e.which === 3 && this.editorMode === OperationType.SELECT) {
+	// 	console.log("==========选择模式鼠标右击画布对象")
+
+	//   } else 
+	  if (
         opt.e.altKey ||
         opt.e.which === 2 ||
         this.editorMode === OperationType.PAN