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

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;
 }