From dec750ab4821e5478e00fcb7f840ca7f935faa74 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Mon, 16 Mar 2026 11:38:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/details-panel/index.vue        | 12 ++++++--
 .../Canvas/DepthCanvas/depth-canvas.vue       |  3 +-
 .../DepthCanvas/manager/BrushIndicator.js     |  2 ++
 .../DepthCanvas/manager/CanvasManager.ts      | 29 +++++++++++++++++++
 .../manager/brushes/brushManager.js           |  3 +-
 5 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
index 5e61ee3..5e0320c 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -3,7 +3,7 @@
 		<div class="header" @click="show = !show">
 			<span class="icon"><svg-icon name="dc-details_edit" size="17" /></span>
 			<span class="title">Edit Details</span>
-			<span class="show">
+			<span class="arrow" :class="{ show }">
 				<svg-icon name="dc-down_arrow2" size="10" />
 			</span>
 		</div>
@@ -50,6 +50,7 @@
 			box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);
 		}
 		> .header {
+			flex-shrink: 0;
 			cursor: pointer;
 			width: 100%;
 			height: 5rem;
@@ -64,10 +65,17 @@
 				font-size: 1.6rem;
 				color: #000;
 			}
+			> .arrow {
+				transition: transform 0.2s;
+				transform: rotate(-90deg);
+				&.show {
+					transform: rotate(0);
+				}
+			}
 		}
 		> .content {
 			padding: 1.6rem;
-			
+			overflow-y: auto;
 		}
 	}
 </style>
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index 112f3db..dd3dd1a 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -15,9 +15,10 @@
 			<brush-control-panel :currentTool="toolManager.currentTool.value" />
 			<zoom
 				:zoom="canvasManager.currentZoom.value / 100"
-				:step="0.1"
 				is-home
 				@home="() => canvasManager.resetZoom()"
+				@add="() => canvasManager.zoomIn()"
+				@sub="() => canvasManager.zoomOut()"
 			/>
 		</template>
 	</div>
diff --git a/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js b/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js
index 01184f7..ae38561 100644
--- a/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js
+++ b/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js
@@ -426,6 +426,8 @@ export class BrushIndicator {
 		this.canvas.on("mouse:over", this._mouseEnterHandler);
 		this.canvas.on("mouse:out", this._mouseLeaveHandler);
 		this.canvas.on("mouse:move", this._mouseMoveHandler);
+		
+		this._observeCanvasChanges();
 	}
 
 	/**
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index 0b24676..72949b9 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -147,6 +147,35 @@ export class CanvasManager {
 	resetZoom() {
 		this.animationManager.resetZoom()
 	}
+	// 使用动画管理器的缩放方法
+	animateZoom(point, targetZoom, options = {}) {
+		console.log(point, targetZoom, options)
+		this.animationManager.animateZoom(point, targetZoom, options);
+	}
+	zoomIn() {
+		const currentZoom = this.canvas.getZoom()
+		const newZoom = Math.min(currentZoom + 0.1, 20) // 增加20%，最大20倍
+
+		// 使用画布中心作为缩放点
+		const centerPoint = {
+			x: this.canvas.width / 2,
+			y: this.canvas.height / 2
+		}
+
+		this.animateZoom(centerPoint, newZoom)
+	}
+
+	zoomOut() {
+		const currentZoom = this.canvas.getZoom()
+		const newZoom = Math.max(currentZoom - 0.1, 0.1) // 减少20%，最小0.1倍
+
+		// 使用画布中心作为缩放点
+		const centerPoint = {
+			x: this.canvas.width / 2,
+			y: this.canvas.height / 2
+		}
+		this.animateZoom(centerPoint, newZoom)
+	}
 	getObjects() {
 		return this.canvas.getObjects() || []
 	}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js b/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
index e6542c4..05bb571 100644
--- a/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
@@ -487,7 +487,8 @@ export class BrushManager {
 
 		// 更新活动笔刷
 		if (this.activeBrush) {
-			this.activeBrush.configure(this.canvas.freeDrawingBrush, { color });
+			const currentOpacity = this.brushStore.state.opacity;
+			this.activeBrush.configure(this.canvas.freeDrawingBrush, { color, opacity: currentOpacity });
 		}
 
 		// 更新笔刷指示器大小