合并画布

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

@@ -43,10 +43,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  thumbnailUrl: {
-    type: String,
-    default: null,
-  },
+  // thumbnailUrl: {
+  //   type: String,
+  //   default: null,
+  // },
   isHidenDragHandle: {
     type: Boolean,
     default: false,
@@ -404,14 +404,11 @@ function findParentLayerId() {
         <!-- 图层预览图标 -->
         <div class="layer-review">
           <img
-            v-if="thumbnailUrl"
-            :src="thumbnailUrl"
+            v-if="layer.thumbnailUrl"
+            :src="layer.thumbnailUrl"
             class="layer-thumbnail"
             :alt="$t('图层预览')"
           />
-          <span v-else class="layer-type-icon">{{
-            getLayerTypeIcon(layer)
-          }}</span>
         </div>
 
         <!-- 图层名称 -->

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

@@ -119,6 +119,8 @@ const canDeleteComputed = computed(() => {
       <template v-for="(layer, index) in sortableRootLayers" :key="layer.id">
         <div class="layer-group">
           <!-- 使用 LayerItem 子组件 -->
+          <!-- :thumbnail-url="getLayerThumbnail(layer.id)" -->
+
           <LayerItem
             :layer="layer"
             :is-child="isChild"
@@ -133,7 +135,6 @@ const canDeleteComputed = computed(() => {
               !layer.isFixed &&
               !layer.locked
             "
-            :thumbnail-url="getLayerThumbnail(layer.id)"
             :expanded-group-ids="expandedGroupIds"
             @click="(...args) => forwardEvent('layer-click', ...args)"
             @double-click="

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, nextTick, inject } from "vue";
-import { isGroupLayer } from "../../utils/layerHelper";
+import { findLayerRecursively, isGroupLayer } from "../../utils/layerHelper";
 import SvgIcon from "../../../SvgIcon/index.vue";
 import ContextMenu from "./ContextMenu.vue";
 import LayerItem from "./LayerItem.vue";
@@ -691,15 +691,15 @@ function buildContextMenuItems(layer) {
             hideContextMenu();
           },
         },
-        {
-          label: "合并组",
-          icon: "CMergeGroup",
-          disabled: !isGroupLayer || isMultiple,
-          action: () => {
-            mergeGroupLayer(layer.id);
-            hideContextMenu();
-          },
-        },
+        // {
+        //   label: "合并组",  // 不需要了  同栅格化功能一样了
+        //   icon: "CMergeGroup",
+        //   disabled: !isGroupLayer || isMultiple,
+        //   action: () => {
+        //     mergeGroupLayer(layer.id);
+        //     hideContextMenu();
+        //   },
+        // },
       ],
     },
     // 图层操作 - 带子菜单
@@ -1099,8 +1099,7 @@ async function rasterizeLayer(layerId) {
   try {
     const success = await layerManager.rasterizeLayer(layerId);
     if (success) {
-      const layer = layers.value.find((l) => l.id === layerId);
-      console.log(`✅ 成功栅格化图层: ${layer?.name || layerId}`);
+      console.log(`✅ 成功栅格化图层: ${layerId}`);
     } else {
       console.warn("栅格化图层失败");
     }
@@ -1164,6 +1163,11 @@ function moveLayerToBottom(layerId) {
     console.warn("置底图层失败");
   }
 }
+
+// 事件转发方法
+const forwardEvent = (eventName, ...args) => {
+  emit(eventName, ...args);
+};
 </script>
 
 <template>
@@ -1281,6 +1285,8 @@ function moveLayerToBottom(layerId) {
     <!-- 固定层（背景层和固定层） -->
     <div v-if="fixedLayers.length > 0" class="fixed-layers">
       <!-- 遍历固定层 -->
+      <!-- :thumbnail-url="getLayerThumbnail(layer.id)" -->
+
       <LayerItem
         v-for="layer in fixedLayers"
         :key="layer.id"
@@ -1292,10 +1298,9 @@ function moveLayerToBottom(layerId) {
         :is-editing="editingLayerId === layer.id"
         :editing-name="editingLayerName"
         :can-delete="false"
-        :thumbnail-url="getLayerThumbnail(layer.id)"
         :isHidenDragHandle="true"
         @toggle-visibility="
-          (...args) => forwardEvent('toggle-visibility', ...args)
+          (...args) => forwardEvent('toggle-layer-visibility', ...args)
         "
         @edit-confirm="(...args) => forwardEvent('edit-confirm', ...args)"
         @edit-cancel="(...args) => forwardEvent('edit-cancel', ...args)"

src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less

@@ -185,6 +185,7 @@
   border-bottom: 1px solid #f5f2f2;
   padding-left: 30px;
   padding-right: 10px;  
+  color: #333;
 
   &.group-layer {
     background-color: rgba(240, 248, 255, 0.3);
@@ -677,6 +678,7 @@
   border-radius: 2px;
   transition: all 0.2s ease;
   margin-right: 4px;
+  color: #333;
 
   // &:hover {
   //   background-color: rgba(0, 0, 0, 0.1);