深度画布调整

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>

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>

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();
 	}
 
 	/**

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() || []
 	}

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 });
 		}
 
 		// 更新笔刷指示器大小