略略略略略略略略略略略略

2026-01-08 14:29:10 +08:00
parent 567ae02c48
commit 4e0faed88e
17 changed files with 229 additions and 152 deletions
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
@@ -287,7 +287,7 @@ const canDeleteComputed = computed(() => {
            :is-child="isChild"
            :is-active="layer.id === activeLayerId"
            :is-selected="isLayerSelected(layer.id)"
-            :is-multi-select-mode="isMultiSelectMode"
+            :is-multi-select-mode="isMultiSelectMode && !layer.specialType"
            :is-editing="editingLayerId === layer.id"
            :editing-name="editingLayerName"
            :can-delete="
@@ -296,7 +296,7 @@ const canDeleteComputed = computed(() => {
            :expanded-group-ids="expandedGroupIds"
            @click="(...args) => forwardEvent('layer-click', ...args)"
            @double-click="(...args) => forwardEvent('layer-double-click', ...args)"
-            @context-menu="(...args) => forwardEvent('context-menu', ...args)"
+            @context-menu="(...args) => !layer.specialType && forwardEvent('context-menu', ...args)"
            @checkbox-change="(...args) => forwardEvent('checkbox-change', ...args)"
            @toggle-visibility="(...args) => forwardEvent('toggle-visibility', ...args)"
            @toggle-lock="(...args) => forwardEvent('toggle-lock', ...args)"
@@ -337,7 +337,7 @@ const canDeleteComputed = computed(() => {
              :expanded-group-ids="expandedGroupIds"
              :isChild="true"
              :parentLayerId="layer.id"
-              :group-name="groupName"
+              :group-name="layer.specialType || groupName"
              @layer-click="(...args) => forwardEvent('layer-click', ...args)"
              @layer-double-click="(...args) => forwardEvent('layer-double-click', ...args)"
              @context-menu="(...args) => forwardEvent('context-menu', ...args)"
@@ -385,17 +385,10 @@ const canDeleteComputed = computed(() => {
 <style scoped lang="less">
 // 从父组件的样式文件中继承相关样式
 .layers-list {
-  flex: 1;
-  overflow-y: auto;
-
  .sortable-layers {
    min-height: 20px;
  }

-  //   .layer-group {
-  //     // margin-bottom: 1px;
-  //   }
-
  .child-layers {
    position: relative;
    padding-left: 20px;
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
@@ -1240,6 +1240,12 @@ async function handleCrossLevelMove(moveData) {
  }

  try {
+	const layer = findLayerRecursively(layers.value, layerId).layer;
+	const toLayer = findLayerRecursively(layers.value, toParentId).layer;
+	if(layer?.specialType || toLayer?.specialType) {
+		console.warn("当前图层不可移动到外部");
+		return;
+	}
    // 如果有命令管理器，使用命令模式
    if (commandManager) {
      console.log("📝 使用命令模式执行跨层级移动");
@@ -1593,46 +1599,48 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
      <small>{{ $t('Canvas.Hint') }}</small>
    </div>

+	<div class="layers-list-container">
    <!-- 图层列表组件 -->
-    <LayersList
-      :layers="layers"
-      :active-layer-id="activeLayerId"
-      :sortable-root-layers="sortableRootLayers"
-      :fixed-layers="fixedLayers"
-      :selected-layer-ids="selectedLayerIds"
-      :is-multi-select-mode="isMultiSelectMode"
-      :editing-layer-id="editingLayerId"
-      :editing-layer-name="editingLayerName"
-      :thumbnail-manager="thumbnailManager"
-      :expanded-group-ids="expandedGroupIds"
-      :isChild="false"
-      group-name="layers-root"
-      @layer-click="handleLayerClick"
-      @layer-double-click="handleLayerDoubleClick"
-      @context-menu="showContextMenu"
-      @checkbox-change="handleCheckboxClick"
-      @toggle-visibility="toggleLayerVisibility"
-      @toggle-lock="toggleSelectedLayersLockByLayer"
-      @delete="removeLayer"
-      @edit-confirm="confirmEdit"
-      @edit-cancel="cancelEdit"
-      @edit-keydown="handleEditKeydown"
-      @touch-start="handleTouchStart"
-      @touch-move="handleTouchMove"
-      @touch-end="handleTouchEnd"
-      @update:editing-name="editingLayerName = $event"
-      @root-layers-sort="handleRootLayersSort"
-      @child-layers-sort="handleChildLayersSort"
-      @cross-level-move="handleCrossLevelMove"
-      @select-child-layer="selectChildLayer"
-      @start-child-layer-edit="startChildLayerEdit"
-      @child-context-menu="showChildLayerContextMenu"
-      @toggle-group-expanded="toggleGroupExpanded"
-      @toggle-child-visibility="toggleChildLayerVisibility"
-      @toggle-child-lock="toggleChildLayerLock"
-      @delete-child="deleteChildLayer"
-      @rename-child="renameChildLayer"
-    />
+		<LayersList
+		:layers="layers"
+		:active-layer-id="activeLayerId"
+		:sortable-root-layers="sortableRootLayers"
+		:fixed-layers="fixedLayers"
+		:selected-layer-ids="selectedLayerIds"
+		:is-multi-select-mode="isMultiSelectMode"
+		:editing-layer-id="editingLayerId"
+		:editing-layer-name="editingLayerName"
+		:thumbnail-manager="thumbnailManager"
+		:expanded-group-ids="expandedGroupIds"
+		:isChild="false"
+		group-name="layers-root"
+		@layer-click="handleLayerClick"
+		@layer-double-click="handleLayerDoubleClick"
+		@context-menu="showContextMenu"
+		@checkbox-change="handleCheckboxClick"
+		@toggle-visibility="toggleLayerVisibility"
+		@toggle-lock="toggleSelectedLayersLockByLayer"
+		@delete="removeLayer"
+		@edit-confirm="confirmEdit"
+		@edit-cancel="cancelEdit"
+		@edit-keydown="handleEditKeydown"
+		@touch-start="handleTouchStart"
+		@touch-move="handleTouchMove"
+		@touch-end="handleTouchEnd"
+		@update:editing-name="editingLayerName = $event"
+		@root-layers-sort="handleRootLayersSort"
+		@child-layers-sort="handleChildLayersSort"
+		@cross-level-move="handleCrossLevelMove"
+		@select-child-layer="selectChildLayer"
+		@start-child-layer-edit="startChildLayerEdit"
+		@child-context-menu="showChildLayerContextMenu"
+		@toggle-group-expanded="toggleGroupExpanded"
+		@toggle-child-visibility="toggleChildLayerVisibility"
+		@toggle-child-lock="toggleChildLayerLock"
+		@delete-child="deleteChildLayer"
+		@rename-child="renameChildLayer"
+		/>
+	</div>
    <!-- 固定层（背景层和固定层） -->
    <div v-if="fixedLayers.length > 0" class="fixed-layers">
      <!-- 遍历固定层 -->
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
@@ -11,9 +11,9 @@
  flex-direction: column;
  user-select: none;
  z-index: 6;
-  overflow-y: auto;
  width: 100%;
  // max-height: 70vh;
+  overflow: hidden;
  -webkit-overflow-scrolling: touch;
 }

@@ -161,12 +161,12 @@
    font-size: 1.1rem;
  }
 }
-
+.layers-list-container{
+	overflow-y: auto;
+}
 // 图层列表
 .layers-list {
  position: relative;
-  flex: 1;
-  overflow-y: auto;
 }

 // 图层项样式