feat(CanvasManager): enhance image layer management and event handling

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

@@ -385,7 +385,7 @@ function findParentLayerId() {
         <SvgIcon
           v-if="!isHidenDragHandle"
           :name="isChild ? 'CSort' : 'CSort'"
-          :size="16"
+          :size="32"
         ></SvgIcon>
       </div>
 

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

@@ -166,7 +166,7 @@ const props = defineProps({
 
 // 响应式数据
 const visible = ref(false);
-const debug = ref(true); // 设为true可以显示调试信息
+const debug = ref(false); // 设为true可以显示调试信息
 const currImage = ref("");
 
 // 当前状态
@@ -229,11 +229,11 @@ const availableModes = ref([
   { id: "push", name: "推", iconText: "↔" },
   { id: "clockwise", name: "顺时针转动", iconText: "↻" },
   { id: "counterclockwise", name: "逆时针转动", iconText: "↺" },
-  { id: "pinch", name: "捏合", iconText: "⤢" },
-  { id: "expand", name: "展开", iconText: "⤡" },
-  { id: "crystal", name: "水晶", iconText: "✧" },
-  { id: "edge", name: "边缘", iconText: "◈" },
-  { id: "reconstruct", name: "重建", iconText: "↩" },
+  // { id: "pinch", name: "捏合", iconText: "⤢" },
+  // { id: "expand", name: "展开", iconText: "⤡" },
+  // { id: "crystal", name: "水晶", iconText: "✧" },
+  // { id: "edge", name: "边缘", iconText: "◈" },
+  // { id: "reconstruct", name: "重建", iconText: "↩" },
 ]);
 
 // 事件监听器引用
@@ -1535,6 +1535,7 @@ function stopPressTimer() {
   z-index: 1000;
   color: #333;
   border: 1px solid rgba(0, 0, 0, 0.05);
+  padding-bottom: 12px;
 }
 
 .fade-enter-active,
@@ -1712,7 +1713,7 @@ function stopPressTimer() {
 }
 
 .mode-name {
-  font-size: 9px;
+  font-size: 14px;
   color: #333;
   text-align: center;
   line-height: 1.1;
@@ -1774,8 +1775,9 @@ function stopPressTimer() {
 }
 
 .param-label {
-  font-size: 11px;
-  margin-bottom: 6px;
+  font-size: 12px;
+  margin-top: 12px;
+  margin-bottom: 12px;
   color: #666;
   font-weight: 500;
 }

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

@@ -47,9 +47,17 @@
         <!-- 底部选区操作工具栏 -->
         <div class="tool-actions">
           <div class="action-btn" @click="copySelectionToNewLayer">
-            <svg-icon name="CPaste" />
+            <svg-icon name="CPaste" size="20" />
             <span class="btn-text">{{ $t("拷贝并粘贴") }}</span>
           </div>
+          <div class="action-btn" @click="cutSelectionToNewLayer">
+            <svg-icon name="CCut" size="30" />
+            <span class="btn-text">{{ $t("剪切并粘贴") }}</span>
+          </div>
+          <div class="action-btn" @click="clearSelectionContent">
+            <svg-icon name="CClear" size="22" />
+            <span class="btn-text">{{ $t("清除选择内容") }}</span>
+          </div>
           <!-- <button
             class="action-btn"
             @click="addSelection"
@@ -399,6 +407,22 @@ function copySelectionToNewLayer() {
   checkSelectionStatus();
 }
 
+/**
+ * 剪切选区到新图层
+ */
+function cutSelectionToNewLayer() {
+  if (!hasSelection.value) return;
+  props.commandManager.execute(
+    new CopySelectionToNewLayerCommand({
+      canvas: props.canvas,
+      layerManager: props.layerManager,
+      selectionManager: props.selectionManager,
+      toolManager: props.toolManager,
+    })
+  );
+  checkSelectionStatus();
+}
+
 /**
  * 清除选区内容
  */
@@ -479,6 +503,7 @@ function confirmColorPicker() {
   z-index: 1000;
   color: #333;
   border: 1px solid rgba(0, 0, 0, 0.05);
+  user-select: none;
 }
 
 /* 平板和手机适配 */
@@ -597,7 +622,7 @@ function confirmColorPicker() {
 
 .tool-btn span {
   margin-top: 6px;
-  font-size: 11px;
+  font-size: 14px;
 }
 
 .tool-btn svg {
@@ -669,7 +694,7 @@ function confirmColorPicker() {
 }
 
 .btn-text {
-  font-size: 10px;
+  font-size: 14px;
   text-align: center;
 }