diff --git a/src/assets/icons/threeLogo.svg b/src/assets/icons/threeLogo.svg new file mode 100644 index 0000000..8e3c6b2 --- /dev/null +++ b/src/assets/icons/threeLogo.svg @@ -0,0 +1,11 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/images/threeLoading.png b/src/assets/images/threeLoading.png new file mode 100644 index 0000000..512121d Binary files /dev/null and b/src/assets/images/threeLoading.png differ 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 @@
Edit Details - +
@@ -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; } } 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 @@ 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 }); } // 更新笔刷指示器大小 diff --git a/src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue b/src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue index cbf4fb6..6334d86 100644 --- a/src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue +++ b/src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue @@ -166,9 +166,15 @@ defineExpose({open})
+
+ +
-
Load...
+
+ + {{ $t('threeModel.loading') }} +
@@ -190,30 +196,49 @@ defineExpose({open}) border: 1px solid #D9D9D9; overflow: hidden; } + > .icon{ + position: absolute; + bottom: 2.4rem; + right: 2.4rem; + } > .load{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; - background: rgba(0, 0, 0, .2); + background: #e6e6e6; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; + > .text{ + font-weight: 500; + font-size: 1.8rem; + line-height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #747474; + > img{ + margin-right: 1rem; + } + } > i{ font-size: 3rem; } > .loadBox{ - width: 15rem; + width: 26rem; height: 1rem; - border-radius: 1rem; + border-radius: 3.3rem; background: #fff; overflow: hidden; + margin-top: 1.2rem; > .schedule{ height: 100%; - background: greenyellow; + border-radius: 3.3rem; + background: #848484; } } } diff --git a/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue b/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue index 27a6907..740e719 100644 --- a/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue +++ b/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue @@ -80,7 +80,7 @@ text-align: center; line-height: 18px; background-color: #fff; - font-size: 6px; + font-size: 9px; color: #000; border: 1px solid #d9d9d9; cursor: pointer; diff --git a/src/lang/en.ts b/src/lang/en.ts index c6a61b2..1750c74 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -187,5 +187,9 @@ export default { }, assistant: { inputPlaceholder: 'Ask anything', + }, + //3d面板 + threeModel: { + loading: 'Loading', } } diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index b98be7b..db123b9 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -182,5 +182,9 @@ export default { }, assistant: { inputPlaceholder: '请输入' + }, + //3d面板 + threeModel: { + loading: '加载中', } }