浏览代码

feat(editor): 添加图层锁定功能

- 实现图层锁定/解锁切换逻辑
- 锁定图层时禁用选择、控制和事件处理
- 禁止删除已锁定的图层
- 点击锁定图层时阻止选中操作
- 在图层菜单中增加锁定/解锁选项
- 更新图层可见性切换逻辑以兼容锁定状态
panqiuyao 1 周之前
父节点
当前提交
6e7d4f157f

+ 20 - 0
frontend/src/views/components/PictureEditor/mixin/layer/index.js

@@ -140,6 +140,10 @@ export default  {
     },
     //删除图层
     delLayers(item){
+      if(item?.locked){
+        this.$message && this.$message.warning && this.$message.warning('图层已锁定,无法删除')
+        return
+      }
       this.islayerSelect = true;
       this.fcanvas.remove(item)
       this.undoAfterSelectLayers();
@@ -147,6 +151,7 @@ export default  {
     },
     //选中图层
     select(item){
+      if(item?.locked) return;
       if(this.showStraw) return;
      this.fcanvas.discardActiveObject()
      this.islayerSelect = true;
@@ -184,6 +189,21 @@ export default  {
       this.fcanvas.requestRenderAll()
       this.getLayers(false)
     },
+    // 锁定/解锁:锁定后不可选中、不可删除
+    toggleLock(item){
+      if(!item) return
+      const locked = !item.locked
+      item.set({
+        locked,
+        selectable: !locked,
+        evented: !locked,
+        hasControls: !locked,
+        hasBorders: !locked,
+      })
+      this.fcanvas.discardActiveObject()
+      this.fcanvas.requestRenderAll()
+      this.getLayers(false)
+    },
     toggleLayerMenu(item){
       if(!item) return
       this.openLayerMenuId = this.openLayerMenuId === item.id ? null : item.id

+ 3 - 0
frontend/src/views/components/marketingEdit/tpl/layer.js

@@ -32,6 +32,9 @@ export default function() {
                   v-if="openLayerMenuId === item.id"
                   class="layer-item__menu"
                 >
+                  <div class="menu-item" @click.stop="toggleLock(item); closeLayerMenu()">
+                    {{ item.locked ? '解锁' : '锁定' }}
+                  </div>
                   <div class="menu-item" @click.stop="move(item,'up'); closeLayerMenu()">上移一层</div>
                   <div class="menu-item" @click.stop="move(item,'down'); closeLayerMenu()">下移一层</div>
                   <div class="menu-item" @click.stop="move(item,'bringToFront'); closeLayerMenu()">置顶</div>