From 0f99ea809d243aa62f0b1513bbc229ab86bff3ea Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Wed, 18 Mar 2026 13:56:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83=E9=94=81?=
 =?UTF-8?q?=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/dc/lock_0.svg                |  1 +
 src/assets/icons/dc/lock_1.svg                |  1 +
 .../components/layer-panel/layer-item.vue     |  8 ++++
 .../DepthCanvas/manager/CanvasManager.ts      | 24 +++++++---
 .../DepthCanvas/manager/LayerManager.ts       | 44 +++++++++++++++----
 .../Canvas/DepthCanvas/manager/ToolManager.ts |  5 ++-
 6 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/dc/lock_0.svg
 create mode 100644 src/assets/icons/dc/lock_1.svg

diff --git a/src/assets/icons/dc/lock_0.svg b/src/assets/icons/dc/lock_0.svg
new file mode 100644
index 0000000..bbc4130
--- /dev/null
+++ b/src/assets/icons/dc/lock_0.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747121366655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56887" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800 448H704V320c0-106.4-85.6-192-192-192S320 213.6 320 320h64c0-70.4 57.6-128 128-128s128 57.6 128 128v128H224c-17.6 0-32 14.4-32 32v384c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V480c0-17.6-14.4-32-32-32zM512 736c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z" p-id="56888"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dc/lock_1.svg b/src/assets/icons/dc/lock_1.svg
new file mode 100644
index 0000000..94cc397
--- /dev/null
+++ b/src/assets/icons/dc/lock_1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747121371122" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57034" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800 448H704V320c0-106.4-85.6-192-192-192S320 213.6 320 320v128H224c-17.6 0-32 14.4-32 32v384c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V480c0-17.6-14.4-32-32-32zM512 736c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z m128-288H384V320c0-70.4 57.6-128 128-128s128 57.6 128 128v128z" p-id="57035"></path></svg>
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
index d1a72bb..fddf1d4 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
@@ -18,6 +18,10 @@
 			/>
 		</div>
 		<div class="icons">
+			<span @click.stop="onClickLock">
+				<svg-icon v-show="!layer.info.lock" name="dc-lock_0" size="15" />
+				<svg-icon v-show="layer.info.lock" name="dc-lock_1" size="15" color="#1890ff" />
+			</span>
 			<span @click.stop="onClickShowHide"
 				><svg-icon :name="layer.visible ? 'dc-show' : 'dc-hide'" size="15"
 			/></span>
@@ -64,6 +68,10 @@
 	const onClickLayer = () => {
 		layerManager.setActiveID(props.layer.info.id)
 	}
+	const onClickLock = () => {
+		const info = props.layer.info
+		layerManager.setLayerLockById(info.id, !info.lock)
+	}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index e129fcd..38fa764 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -20,7 +20,13 @@ fabric.Object.prototype.toObject = function () {
 			arr.push(...v)
 		}
 	})
-	return this.toObject_(arr)
+	const object = this.toObject_(arr)
+	if (object.info) {
+		let lock = !!object.info.lock
+		object.evented = !lock
+		object.selectable = !lock
+	}
+	return object
 }
 
 interface CanvasInitOptions {
@@ -71,9 +77,12 @@ export class CanvasManager {
 						top: 0,
 						scaleX: 1,
 						scaleY: 1,
+						evented: false,
+						selectable: false,
 						info: {
 							id: createId("image"),
 							name: "图片图层",
+							lock: true,
 						}
 					})
 					image = img
@@ -171,7 +180,7 @@ export class CanvasManager {
 	/** 设置激活对象 */
 	setActiveObjectById(id: string) {
 		const obj = this.getObjectById(id)
-		if (obj) this.canvas.setActiveObject(obj)
+		if (obj && obj.evented) this.canvas.setActiveObject(obj)
 		this.renderAll()
 	}
 	resetZoom(animated = true, adaptive = true) {
@@ -208,13 +217,13 @@ export class CanvasManager {
 	getObjectById(id: string) {
 		return this.getObjects().find((item: any) => item?.info?.id === id)
 	}
-	getActiveObject() {
-		return this.getObjectById(this.layerManager.activeID.value)
+	/** 获取选中对象 */
+	getSelectedObject() {
+		return this.canvas.getActiveObject()
 	}
 	renderAll() {
 		this.canvas.renderAll()
 	}
-
 	deleteObjectById(id: string) {
 		const object = this.getObjectById(id)
 		if (object) {
@@ -223,6 +232,11 @@ export class CanvasManager {
 			this.renderAll()
 		}
 	}
+	/** 取消选中对象 */
+	discardActiveObject() {
+		this.canvas.discardActiveObject()
+		this.renderAll()
+	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
 		this.canvas.moveTo(this.getObjectById(id), newIndex)
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index b193e07..57500ea 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -41,19 +41,45 @@ export class LayerManager {
 			this.canvasManager.renderAll()
 		}
 	}
+
+	/** 设置图层显示状态 */
 	setLayerVisibleById(id, visible: boolean) {
 		const layer = this.getLayerById(id)
-		if (layer) {
-			layer.visible = visible
-		}
 		const object = this.canvasManager.getObjectById(id)
-		if (object) {
-			object.set({
-				visible: visible
-			})
-			this.canvasManager.renderAll()
-		}
+		if (!layer || !object) return
+		layer.visible = visible
+		object.set({
+			visible: visible
+		})
+		this.canvasManager.renderAll()
+		this.stateManager.recordState()
 	}
+	/** 设置图层锁定状态 */
+	setLayerLockById(id, lock: boolean) {
+		const layer = this.getLayerById(id)
+		const object = this.canvasManager.getObjectById(id)
+		if (!layer || !object) return
+		layer.info.lock = !!lock
+		layer.evented = !lock
+		object.info.lock = !!lock
+		object.set({
+			evented: !lock,
+			selectable: !lock,
+		})
+		if (lock) {
+			// 取消选中对象
+			const e = this.canvasManager.getSelectedObject()
+			if (e) {
+				const objects = [...(e._objects || [e])]
+				if (objects.some(v => v.info?.id === object.info.id)) {
+					this.canvasManager.discardActiveObject()
+				}
+			}
+		}
+		this.canvasManager.renderAll()
+		this.stateManager.recordState()
+	}
+
 	/** 删除指定图层 */
 	deleteLayerById(id, isActive = true) {
 		this.canvasManager.deleteObjectById(id)
diff --git a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
index cd640d8..6a73660 100644
--- a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
@@ -117,7 +117,10 @@ export class ToolManager {
 	// 切换工具时，设置画布事件
 	setCanvasEvented(value: boolean) {
 		this.canvasManager.canvas.selection = value
-		this.canvasManager.canvas.getObjects().forEach((v) => v.evented = value)
+		this.canvasManager.canvas.getObjects().forEach((v) => {
+			if (v.info?.lock) return
+			v.evented = value
+		})
 	}
 	/** 选择工具 */
 	setupSelectTool() {