From 164ac3789f7765824f60357289e66842e3c2d002 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 26 Mar 2026 10:53:01 +0800
Subject: [PATCH 01/21] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ai-selectbox-panel.vue         |   4 +
 .../components/details-panel/basic-info.vue   | 171 +++++++++++++-----
 .../components/details-panel/fill-repeat.vue  |   3 +-
 .../components/details-panel/index.vue        |  14 +-
 .../details-panel/shape-setting.vue           | 123 +++----------
 .../manager/AISelectboxToolManager.ts         |   4 +
 .../DepthCanvas/manager/LayerManager.ts       |  40 ++--
 .../DepthCanvas/manager/ShapeToolManager.ts   |  57 ++++--
 .../DepthCanvas/manager/StateManager.ts       |   1 -
 .../Canvas/DepthCanvas/tools/canvasMethod.js  |  19 +-
 10 files changed, 259 insertions(+), 177 deletions(-)

diff --git a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
index 58f33bf..a2653b4 100644
--- a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
+++ b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
@@ -11,6 +11,7 @@
 				<span class="label">{{ item.label }}</span>
 			</div>
 			<button @click="onCreate">创建</button>
+			<button @click="onReset">重置</button>
 		</div>
 	</transition>
 	<brush-control-panel v-if="show" :currentTool="currentTool2" style="top: 14rem" />
@@ -61,6 +62,9 @@
 	const onCreate = () => {
 		stateManager.aiSelectboxToolManager.createSelectbox()
 	}
+	const onReset = () => {
+		stateManager.aiSelectboxToolManager.resetDemoObject()
+	}
 </script>
 <style lang="less" scoped>
 	// 淡入淡出动画
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
index da5b100..d56fff6 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
@@ -1,64 +1,153 @@
 <template>
-	<div class="basic-info">
+	<div class="basic-info h">
 		<div>
-			<span class="label">X:</span>
-			<span class="value">{{ object.left }}</span>
+			<div class="title">Position</div>
+			<div class="content">
+				<div>
+					<depth-input
+						before="X"
+						type="number"
+						v-model="data.left"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
+				<div>
+					<depth-input
+						before="Y"
+						type="number"
+						v-model="data.top"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
+			</div>
+			<div class="content">
+				<div>
+					<depth-input
+						before="W"
+						type="number"
+						v-model="data.width"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
+				<div>
+					<depth-input
+						before="H"
+						type="number"
+						v-model="data.height"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
+			</div>
 		</div>
 		<div>
-			<span class="label">Y:</span>
-			<span class="value">{{ object.top }}</span>
-		</div>
-		<div>
-			<span class="label">Width:</span>
-			<span class="value">{{ object.width }}</span>
-		</div>
-		<div>
-			<span class="label">Height:</span>
-			<span class="value">{{ object.height }}</span>
-		</div>
-		<div>
-			<span class="label">缩放X:</span>
-			<span class="value">{{ object.scaleX }}</span>
-		</div>
-		<div>
-			<span class="label">缩放Y:</span>
-			<span class="value">{{ object.scaleY }}</span>
-		</div>
-		<div>
-			<span class="label">Angle:</span>
-			<span class="value">{{ object.angle }}</span>
+			<div class="title">Scale</div>
+			<div class="content">
+				<div>
+					<depth-input
+						type="number"
+						before="X"
+						after="%"
+						v-model="data.scaleX"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
+				<div>
+					<depth-input
+						type="number"
+						before="Y"
+						after="%"
+						v-model="data.scaleY"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, inject, computed, watch, onMounted } from 'vue'
+	import { ref, inject, computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue'
+	import DepthInput from '../tools/depth-input.vue'
+	const objectManager = inject('objectManager') as any
+	const stateManager = inject('stateManager') as any
 	const props = defineProps({
 		object: {
 			type: Object,
 			default: () => ({})
 		}
 	})
-	onMounted(() => {})
+	const id = computed(() => props.object.info.id)
+
+	const data = reactive({
+		top: 0,
+		left: 0,
+		width: 0,
+		height: 0,
+		scaleX: 1,
+		scaleY: 1
+	})
+	const updateData = async () => {
+		await nextTick()
+		data.top = Math.round(props.object.top)
+		data.left = Math.round(props.object.left)
+		data.width = Math.round(props.object.width)
+		data.height = Math.round(props.object.height)
+		data.scaleX = Math.round(props.object.scaleX * 100)
+		data.scaleY = Math.round(props.object.scaleY * 100)
+	}
+	updateData()
+	watch(() => props.object, updateData)
+
+	const onInpot = () => setPriority(false)
+	const onChange = () => setPriority(true)
+	const setPriority = (isRecord: boolean) => {
+		const options = {
+			...data,
+			scaleX: data.scaleX / 100,
+			scaleY: data.scaleY / 100
+		}
+		objectManager.updateProperty(id.value, options, isRecord)
+	}
+
+	stateManager.event.add('canvas:undo', updateData)
+	stateManager.event.add('canvas:redo', updateData)
+	onBeforeUnmount(() => {
+		stateManager.event.remove('canvas:undo', updateData)
+		stateManager.event.remove('canvas:redo', updateData)
+	})
 </script>
 
 <style lang="less" scoped>
 	.basic-info {
+		--details-item-margin-bottom: 1.6rem;
 		> div {
-			padding: 0.8rem 0;
-			display: flex;
-			align-items: center;
-			> .label {
-				font-size: 1.6rem;
-				color: #000;
-				font-weight: bold;
-				min-width: 7rem;
-				text-align: right;
-				margin-right: 0.8rem;
-			}
-			> .value {
-				font-size: 1.6rem;
-				color: #333;
+			> .content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> div {
+					flex: 1;
+					margin-right: 3rem;
+					display: flex;
+					flex-direction: column;
+					--depth-input-height: 2.4rem;
+					--depth-input-bg-color: rgba(249, 249, 250, 1);
+					--depth-input-border-color: rgba(230, 230, 231, 1);
+					--depth-input-decorate-color: rgba(69, 71, 84, 0.1);
+					&:last-child {
+						margin-right: 0;
+					}
+					> .label {
+						font-size: 1.2rem;
+						margin-bottom: 0.5rem;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue b/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
index 24b73ad..1e6fa7d 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, inject, computed, nextTick, onBeforeUnmount } from 'vue'
+	import { ref, inject, computed, nextTick, onBeforeUnmount, watch } from 'vue'
 	import DepthOffsetTool from '../tools/depth-offset-tool.vue'
 	import DepthSlider from '../tools/depth-slider.vue'
 	import DepthInput from '../tools/depth-input.vue'
@@ -134,6 +134,7 @@
 		opacity.value = Math.round(props.object.opacity * 100)
 	}
 	updateData()
+	watch(() => props.object, updateData)
 
 	const inputFillTransform = () => setFillTransform(false)
 	const changeFillTransform = () => setFillTransform(true)
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
index 7b596d0..b8d6506 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -8,7 +8,7 @@
 			</span>
 		</div>
 		<div class="content" v-if="isShow" v-show="show">
-			<!-- <basic-info :object="activeObject" /> -->
+			<basic-info :object="activeObject" />
 			<fill-repeat :object="activeObject" v-if="isRepeat" />
 			<shape-setting :object="activeObject" v-if="isShape && !isRepeat" />
 		</div>
@@ -17,6 +17,7 @@
 
 <script setup lang="ts">
 	import { ref, inject, computed, watch, onMounted } from 'vue'
+	import BasicInfo from './basic-info.vue'
 	import FillRepeat from './fill-repeat.vue'
 	import ShapeSetting from './shape-setting.vue'
 	const props = defineProps({})
@@ -27,10 +28,11 @@
 	const layers = computed(() => layerManager.layers.value)
 	const activeObject = ref(null)
 
-	const shapes = ['rect', 'line', 'path', 'triangle', 'polygon', 'ellipse']
+	const shapes = ['rect', 'path', 'triangle', 'polygon', 'ellipse']
+	const isImage = computed(() => activeObject.value?.type === 'image')
 	const isShape = computed(() => shapes.includes(activeObject.value?.type))
 	const isRepeat = computed(() => activeObject.value?.fill?.repeat === 'repeat')
-	const isShow = computed(() => isRepeat.value || isShape.value)
+	const isShow = computed(() => isImage.value || isRepeat.value || isShape.value)
 
 	const updateActiveObject = () => {
 		const layer = layerManager.getActiveLayer()
@@ -87,6 +89,12 @@
 			padding: 1.6rem;
 			overflow: hidden;
 			overflow-y: auto;
+			> * {
+				margin-bottom: 1.6rem;
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
 			&:deep(> div) {
 				> div {
 					margin-bottom: var(--details-item-margin-bottom, 1.6rem);
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue b/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
index 2e3768c..292be86 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
@@ -1,74 +1,5 @@
 <template>
 	<div class="shape-setting h">
-		<div>
-			<div class="title">Position</div>
-			<div class="content">
-				<div>
-					<depth-input
-						before="X"
-						type="number"
-						v-model="data.left"
-						@input="onInpot"
-						@change="onChange"
-					/>
-				</div>
-				<div>
-					<depth-input
-						before="Y"
-						type="number"
-						v-model="data.top"
-						@input="onInpot"
-						@change="onChange"
-					/>
-				</div>
-			</div>
-			<div class="content">
-				<div>
-					<depth-input
-						before="W"
-						type="number"
-						v-model="data.width"
-						@input="onInpot"
-						@change="onChange"
-					/>
-				</div>
-				<div>
-					<depth-input
-						before="H"
-						type="number"
-						v-model="data.height"
-						@input="onInpot"
-						@change="onChange"
-					/>
-				</div>
-			</div>
-		</div>
-		<div>
-			<div class="title">Scale</div>
-			<div class="content">
-				<div>
-					<depth-input
-						type="number"
-						before="X"
-						after="%"
-						v-model="data.scaleX"
-						@input="onInpot"
-						@change="onChange"
-					/>
-				</div>
-				<div>
-					<depth-input
-						type="number"
-						before="Y"
-						after="%"
-						v-model="data.scaleY"
-						@input="onInpot"
-						@change="onChange"
-					/>
-				</div>
-			</div>
-		</div>
-
 		<div>
 			<div class="title">Appearance</div>
 			<div class="content">
@@ -96,12 +27,32 @@
 						@change="onChange"
 					/>
 				</div>
+				<div v-else-if="object.type === 'path'">
+					<span class="label">Stroke Width</span>
+					<depth-input
+						type="number"
+						v-model="data.strokeWidth"
+						min="0"
+						step="1"
+						@input="onInpot"
+						@change="onChange"
+					/>
+				</div>
 				<div v-else></div>
 			</div>
 			<div class="content">
 				<div>
 					<span class="label">Color</span>
 					<depth-input
+						v-if="object.type === 'path'"
+						type="color"
+						v-model="data.stroke"
+						after="%"
+						@input="onInpot"
+						@change="onChange"
+					/>
+					<depth-input
+						v-else
 						type="color"
 						v-model="data.fill"
 						after="%"
@@ -116,10 +67,6 @@
 
 <script setup lang="ts">
 	import { ref, inject, computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue'
-	import { ElColorPicker } from 'element-plus'
-	import { getTransformScaleAngle } from '../../manager/ObjectManager'
-	import DepthOffsetTool from '../tools/depth-offset-tool.vue'
-	import DepthSlider from '../tools/depth-slider.vue'
 	import DepthInput from '../tools/depth-input.vue'
 	const objectManager = inject('objectManager') as any
 	const stateManager = inject('stateManager') as any
@@ -132,32 +79,20 @@
 	const id = computed(() => props.object.info.id)
 
 	const data = reactive({
-		top: 0,
-		left: 0,
-		width: 0,
-		height: 0,
-		scaleX: 1,
-		scaleY: 1,
 		opacity: 100,
 		radius: 0,
 
-		fill: ''
-		// stroke: '',
-		// strokeWidth: 0
+		fill: '',
+		stroke: '',
+		strokeWidth: 0
 	})
 	const updateData = async () => {
 		await nextTick()
-		data.top = Math.round(props.object.top)
-		data.left = Math.round(props.object.left)
-		data.width = Math.round(props.object.width)
-		data.height = Math.round(props.object.height)
-		data.scaleX = Math.round(props.object.scaleX * 100)
-		data.scaleY = Math.round(props.object.scaleY * 100)
 		data.opacity = Math.round(props.object.opacity * 100)
 		data.radius = Math.round(props.object.rx)
 		data.fill = props.object.fill
-		// data.stroke = props.object.stroke
-		// data.strokeWidth = props.object.strokeWidth
+		data.stroke = props.object.stroke
+		data.strokeWidth = props.object.strokeWidth
 	}
 	updateData()
 	watch(() => props.object, updateData)
@@ -167,14 +102,16 @@
 	const setPriority = (isRecord: boolean) => {
 		const options = {
 			...data,
-			opacity: data.opacity / 100,
-			scaleX: data.scaleX / 100,
-			scaleY: data.scaleY / 100
+			opacity: data.opacity / 100
 		}
 		if (props.object.type === 'rect') {
 			options['rx'] = data.radius
 			options['ry'] = data.radius
 		}
+		if (props.object.type !== 'path') {
+			delete options.stroke
+			delete options.strokeWidth
+		}
 		delete options.radius
 		objectManager.updateProperty(id.value, options, isRecord)
 	}
diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
index 5fce2d0..e2dd5d4 100644
--- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
@@ -101,6 +101,10 @@ export class AISelectboxToolManager {
 		this.canvasManager.canvas.remove(this.indicatorObject)
 		this.indicatorObject = null
 	}
+	resetDemoObject() {
+		this.clearDemoObject()
+		this.createDemoObject()
+	}
 	// 创建临时画布对象
 	async createStaticCanvas(object: fabric.Object) {
 		if (!this.demoObject) this.createDemoObject()
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index 98c07d9..b77f3c1 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -3,7 +3,7 @@ import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType, BlendMode } from '../tools/layerHelper'
-import { getArrowPath, cloneObjects, getStarArr } from '../tools/canvasMethod'
+import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
 
 export class LayerManager {
 	stateManager: any
@@ -274,25 +274,27 @@ export class LayerManager {
 	}
 	/** 创建直线图层 */
 	async createLineLayer(options?: any, isRecord = true, isActive = true) {
-		const line = [options?.x1 || 0, options?.y1 || 0, options?.x2 || 100, options?.y2 || 0]
-		delete options.x1
-		delete options.y1
-		delete options.x2
-		delete options.y2
-		const lineObject = new fabric.Line(line, {
-			stroke: 'black',     // 线条颜色
-			strokeWidth: 2,       // 线条粗细
+		const width = options?.width || 100
+		const height = options?.height || 2
+		delete options.width
+		delete options.height
+		const arrowObject = new fabric.Path(getLinePath(width, height), {
+			stroke: '#000',    // 只设置边框颜色
+			strokeWidth: 2,  // 边框宽度
+			fill: 'transparent',  // 不填充
+			strokeLineCap: 'round',
+			strokeLineJoin: 'round',
 			...(options || {}),
 			info: {
 				id: createId("line"),
 				name: '直线图层',
 				...(options?.info || {}),
 			}
-		})
-		this.setLayerPosition(lineObject, options)
-		await this.canvasManager.add(lineObject, isRecord)
-		if (isActive) this.setActiveID(lineObject.info.id)
-		return lineObject
+		});
+		this.setLayerPosition(arrowObject, options)
+		await this.canvasManager.add(arrowObject, isRecord)
+		if (isActive) this.setActiveID(arrowObject.info.id)
+		return arrowObject
 	}
 	/** 创建椭圆图层 */
 	async createEllipseLayer(options?: any, isRecord = true, isActive = true) {
@@ -353,18 +355,18 @@ export class LayerManager {
 	/** 创建箭头图层 */
 	async createArrowLayer(options?: any, isRecord = true, isActive = true) {
 		const width = options?.width || 100
-		const height = options?.height || 10
+		const strokeWidth = options?.strokeWidth || 4
 		delete options.width
-		delete options.height
-		const arrowObject = new fabric.Path(getArrowPath(width, height), {
+		delete options.strokeWidth
+		const arrowObject = new fabric.Path(getArrowPath(width, strokeWidth), {
 			stroke: '#000',        // 只设置边框颜色
-			strokeWidth: 3,       // 边框宽度
+			strokeWidth,       // 边框宽度
 			fill: 'transparent',  // 不填充
 			strokeLineCap: 'round',
 			strokeLineJoin: 'round',
 			...(options || {}),
 			info: {
-				id: createId("star"),
+				id: createId("arrow"),
 				name: '箭头图层',
 				...(options?.info || {}),
 			}
diff --git a/src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts b/src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts
index c6056cd..76378e5 100644
--- a/src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts
@@ -1,5 +1,5 @@
 import { OperationType, OperationTypes } from "../tools/layerHelper";
-import { getStarArr, getArrowPath, distance, angleBetweenPointsDegrees } from "../tools/canvasMethod";
+import { getStarArr, getArrowPath, getLinePath, distance, angleBetweenPointsDegrees } from "../tools/canvasMethod";
 import { fabric } from 'fabric-with-all'
 /** 形状管理器 */
 export class ShapeToolManager {
@@ -136,22 +136,47 @@ export class ShapeToolManager {
 
 	/** 绘制直线 */
 	downLine() {
-		const line = new fabric.Line([this.startX, this.startY, this.startX, this.startY], {
-			stroke: 'black',     // 线条颜色
-			strokeWidth: 2       // 线条粗细
-		})
-		return line
+		// const line = new fabric.Line([this.startX, this.startY, this.startX, this.startY], {
+		// 	stroke: 'black',     // 线条颜色
+		// 	strokeWidth: 2       // 线条粗细
+		// })
+		// return line
+		return new fabric.Path();
 	}
 	moveLine({ x, y }) {
-		this.demoObject.set({
-			x1: this.startX,
-			y1: this.startY,
-			x2: x,
-			y2: y,
-		})
+		// this.demoObject.set({
+		// 	x1: this.startX,
+		// 	y1: this.startY,
+		// 	x2: x,
+		// 	y2: y,
+		// })
+		const width = distance(this.startX, this.startY, x, y)
+		const angle = angleBetweenPointsDegrees(this.startX, this.startY, x, y)
+		this.canvasManager.canvas.remove(this.demoObject)
+		const arrow = new fabric.Path(getLinePath(width, 2), {
+			left: this.startX,
+			top: this.startY,
+			stroke: '#000',        // 只设置边框颜色
+			strokeWidth: 2,       // 边框宽度
+			fill: 'transparent',  // 不填充
+			strokeLineCap: 'round',
+			strokeLineJoin: 'round',
+			originY: 'center',
+			angle: angle,
+		});
+		this.canvasManager.canvas.add(arrow)
+		this.demoObject = arrow
 	}
 	upLine(object) {
-		this.layerManager.createLineLayer(object)
+		if (object.originY !== "center") {
+			this.layerManager.createLineLayer({
+				left: this.startX,
+				top: this.startY,
+			})
+		} else {
+			this.layerManager.createLineLayer(object)
+		}
+		// this.layerManager.createLineLayer(object)
 	}
 
 	/** 绘制椭圆 */
@@ -228,11 +253,11 @@ export class ShapeToolManager {
 		const width = distance(this.startX, this.startY, x, y)
 		const angle = angleBetweenPointsDegrees(this.startX, this.startY, x, y)
 		this.canvasManager.canvas.remove(this.demoObject)
-		const arrow = new fabric.Path(getArrowPath(width, 10), {
+		const arrow = new fabric.Path(getArrowPath(width, 4), {
 			left: this.startX,
 			top: this.startY,
 			stroke: '#000',        // 只设置边框颜色
-			strokeWidth: 3,       // 边框宽度
+			strokeWidth: 4,       // 边框宽度
 			fill: 'transparent',  // 不填充
 			strokeLineCap: 'round',
 			strokeLineJoin: 'round',
@@ -247,7 +272,7 @@ export class ShapeToolManager {
 			this.layerManager.createArrowLayer({
 				left: this.startX,
 				top: this.startY,
-			}, true)
+			})
 		} else {
 			this.layerManager.createArrowLayer(object)
 		}
diff --git a/src/components/Canvas/DepthCanvas/manager/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index 9b0e59a..6e7651b 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -73,7 +73,6 @@ export class StateManager {
 	/** 记录状态 */
 	recordState() {
 		if (this.running.value) return
-		console.log("recordState")
 		this.running.value = true
 		if (this.historyIndex.value < this.historyList.value.length - 1) {
 			this.historyList.value.splice(this.historyIndex.value + 1)
diff --git a/src/components/Canvas/DepthCanvas/tools/canvasMethod.js b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
index 3792222..4e37678 100644
--- a/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
+++ b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
@@ -61,13 +61,26 @@ export function getStarArr(width = 0, height = 0) {
 	}))
 }
 /** 获取箭头路径 */
-export function getArrowPath(width = 0, height = 0) {
+export function getArrowPath(width = 0, strokeWidth = 4) {
+	const height = strokeWidth * 4
 	const arr = [
 		["M", 0, height / 2],
 		["L", width, height / 2],
-		["M", width - 8, 0],
+		["M", width - height, 0],
+		["L", width, height / 2],
+		["L", width - height, height],
+	]
+	var path = ""
+	arr.forEach(item => {
+		path += item.join(" ") + " "
+	})
+	return path
+}
+/** 获取直线路径 */
+export function getLinePath(width = 0, height = 0) {
+	const arr = [
+		["M", 0, height / 2],
 		["L", width, height / 2],
-		["L", width - 8, height],
 	]
 	var path = ""
 	arr.forEach(item => {

From dd22e97985469c3dd29e818d554a7d50657df08d Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 26 Mar 2026 11:50:17 +0800
Subject: [PATCH 02/21] =?UTF-8?q?=E9=95=BF=E5=A4=A7=E4=BA=86=E4=BD=A0?=
 =?UTF-8?q?=E8=A6=81=E5=BD=93=E5=A4=AA=E7=A9=BA=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.css                      |  7 ++++
 src/assets/css/style.less                     | 12 ++++++
 .../components/details-panel/index.vue        |  4 +-
 .../components/layer-panel/index.vue          |  2 +-
 .../components/layer-panel/layer-list.vue     |  9 +----
 .../components/tools/depth-input.vue          | 40 +++++++++----------
 .../components/tools/depth-offset-tool.vue    | 40 +++++++++----------
 .../components/tools/depth-select.vue         | 18 ++++-----
 .../components/tools/depth-slider.vue         | 10 ++---
 .../manager/AISelectboxToolManager.ts         |  1 +
 src/views/home/left-nav.vue                   |  5 ++-
 11 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index ac0dcd0..a697b4c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -96,3 +96,10 @@ body,
   --el-color-primary-dark-2: #565656;
   /* 深灰色（加深20%） */
 }
+.mini-scrollbar::-webkit-scrollbar {
+  width: 0.4rem;
+}
+.mini-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 0.4rem;
+  background: rgba(0, 0, 0, 0.2);
+}
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index fd26490..cece99a 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -105,3 +105,15 @@ body,
 	--el-color-primary-light-9: #e3e3e3;            /* 极浅的灰色（混合60%白） */
 	--el-color-primary-dark-2: #565656;             /* 深灰色（加深20%） */
 }
+
+
+// 迷你滚动条
+.mini-scrollbar {
+	&::-webkit-scrollbar {
+		width: 0.4rem;
+	}
+	&::-webkit-scrollbar-thumb {
+		border-radius: 0.4rem;
+		background: rgba(0, 0, 0, 0.2);
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
index b8d6506..d7b189b 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -7,7 +7,7 @@
 				<svg-icon name="dc-down_arrow2" size="10" />
 			</span>
 		</div>
-		<div class="content" v-if="isShow" v-show="show">
+		<div class="content mini-scrollbar" v-if="isShow" v-show="show">
 			<basic-info :object="activeObject" />
 			<fill-repeat :object="activeObject" v-if="isRepeat" />
 			<shape-setting :object="activeObject" v-if="isShape && !isRepeat" />
@@ -51,7 +51,7 @@
 		top: 2.2rem;
 		right: 3rem;
 		width: 28.8rem;
-		max-height: 80%;
+		max-height: 90%;
 		display: flex;
 		flex-direction: column;
 		gap: 1.6rem;
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/index.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/index.vue
index 01e0b4c..20c8423 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/index.vue
@@ -20,7 +20,7 @@
 		width: 0;
 		top: 2.2rem;
 		left: 3rem;
-		max-height: 80%;
+		max-height: 90%;
 		display: flex;
 		flex-direction: column;
 		gap: 1.6rem;
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
index e0339fd..fa94ce1 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
@@ -9,7 +9,7 @@
 				<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
 			</div>
 		</div>
-		<div class="content">
+		<div class="content mini-scrollbar">
 			<VueDraggable
 				:model-value="list"
 				@start="(e) => handleDragStart(e)"
@@ -173,13 +173,6 @@
 			flex: 1;
 			overflow-y: auto;
 			min-height: 20rem;
-			&::-webkit-scrollbar {
-				width: 4px;
-			}
-			&::-webkit-scrollbar-thumb {
-				border-radius: 4px;
-				background: rgba(0, 0, 0, 0.2);
-			}
 		}
 	}
 	.sortable-layers-child {
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
index 512fab4..53cc57f 100644
--- a/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
@@ -2,7 +2,7 @@
 	<div class="depth-input" :class="{ color: isColor }">
 		<span class="decorate"></span>
 		<span v-show="icon" class="icon">
-			<svg-icon :name="icon" :size="iconSize" size-unit="px" />
+			<svg-icon :name="icon" :size="iconSize" />
 		</span>
 		<span v-show="before" class="before">{{ before }}</span>
 		<input
@@ -220,45 +220,45 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
-		border: 1px solid var(--depth-input-border-color, rgba(230, 230, 231, 1));
-		border-radius: 2px;
-		height: var(--depth-input-height, 20px);
+		border: 0.1rem solid var(--depth-input-border-color, rgba(230, 230, 231, 1));
+		border-radius: 0.2rem;
+		height: var(--depth-input-height, 2rem);
 		background-color: var(--depth-input-bg-color, #fff);
-		padding: 0 4px 0 2px;
+		padding: 0 0.4rem 0 0.2rem;
 		&.color {
-			--depth-input-decorate-margin-right: 10px;
-			--depth-input-input-margin-right: 10px;
+			--depth-input-decorate-margin-right: 1rem;
+			--depth-input-input-margin-right: 1rem;
 			--depth-input-input-font-align: left;
 			--depth-input-after-color: rgba(181, 181, 181, 1);
 		}
 		> .decorate {
-			width: 2px;
+			width: 0.2rem;
 			background-color: var(--depth-input-decorate-color, rgba(230, 230, 231, 1));
-			border-radius: 2px;
+			border-radius: 0.2rem;
 			height: 75%;
-			margin-right: var(--depth-input-decorate-margin-right, 4px);
+			margin-right: var(--depth-input-decorate-margin-right, 0.4rem);
 		}
 		> .iconfont {
-			font-size: 12px;
+			font-size: 1.2rem;
 			color: #000;
-			margin-right: 4px;
+			margin-right: 0.4rem;
 		}
 		> .before {
-			font-size: 12px;
+			font-size: 1.2rem;
 			color: #000;
-			margin-right: 4px;
+			margin-right: 0.4rem;
 		}
 		> .after {
-			font-size: 12px;
+			font-size: 1.2rem;
 			color: var(--depth-input-after-color, #000);
-			margin-left: 2px;
+			margin-left: 0.2rem;
 		}
 		> input {
-			font-size: 12px;
+			font-size: 1.2rem;
 			width: 0;
 			height: 100%;
 			flex: 1;
-			margin-right: var(--depth-input-input-margin-right, 0);
+			margin-right: var(--depth-input-input-margin-right, 0rem);
 			text-align: var(--depth-input-input-font-align, right);
 			outline: none;
 			border: none;
@@ -277,9 +277,9 @@
 			}
 			&[type='color'] {
 				flex: 0.5;
-				border-radius: 2px;
+				border-radius: 0.2rem;
 				height: 70%;
-				border: 1px solid rgb(42, 42, 42);
+				border: 0.1rem solid rgb(42, 42, 42);
 				display: block;
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
index dd0a210..f8a6108 100644
--- a/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
@@ -152,52 +152,52 @@
 			justify-content: center;
 			> * {
 				flex: 1;
-				margin-right: 10px;
+				margin-right: 1rem;
 				&:last-child {
 					margin-right: 0;
 				}
 			}
 		}
 		> .dish {
-			width: 115px;
-			height: 115px;
-			border: 1px solid #eaeaea;
-			border-radius: 3.4px;
+			width: 11.5rem;
+			height: 11.5rem;
+			border: 0.1rem solid #eaeaea;
+			border-radius: 0.4rem;
 			cursor: pointer;
 			position: relative;
 			background-color: #f6f6f6;
-			margin-top: 20px;
+			margin-top: 2rem;
 			> * {
 				position: absolute;
 				pointer-events: none;
 				user-select: none;
 			}
 			> img {
-				width: 12px;
-				height: 12px;
-				bottom: 3.5px;
-				right: 3.5px;
+				width: 1.2rem;
+				height: 1.2rem;
+				bottom: 0.35rem;
+				right: 0.35rem;
 			}
 			> .ball {
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%, -50%);
-				width: 8.5px;
-				height: 8.5px;
-				border: 1px solid #fff;
+				width: 0.85rem;
+				height: 0.85rem;
+				border: 0.1rem solid #fff;
 				background-color: #333;
 				border-radius: 50%;
-				box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26);
+				box-shadow: 9 0.07rem 0.02rem 0 rgba(0, 0, 0, 0.26);
 			}
 			> .tip {
-				font-size: 8.5px;
+				font-size: 0.85rem;
 				color: #000;
-				line-height: 24px;
+				line-height: 2.4rem;
 				&.x {
 					top: 50%;
 					right: 0%;
 					transform: translate(100%, -50%);
-					padding-left: 6px;
+					padding-left: 0.6rem;
 				}
 				&.y {
 					top: 0%;
@@ -216,15 +216,15 @@
 				transform: translate(-50%, -50%);
 				&.x {
 					width: 100%;
-					border-top-width: 1px;
+					border-top-width: 0.1rem;
 				}
 				&.y {
 					height: 100%;
-					border-left-width: 1px;
+					border-left-width: 0.1rem;
 				}
 				&.z {
 					width: 50%;
-					border-top-width: 1px;
+					border-top-width: 0.1rem;
 					border-color: #454754;
 					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
 					transform-origin: left center;
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
index 43804df..4dcf236 100644
--- a/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
@@ -22,12 +22,12 @@
 <style scoped lang="less">
 	.depth-select {
 		&:deep(.el-select) {
-			--el-select-input-font-size: 12px;
+			--el-select-input-font-size: 1.2rem;
 			.el-select__wrapper {
-				font-size: 12px;
+				font-size: 1.2rem;
 				min-height: 0;
-				height: 28px;
-				padding: 0 8px;
+				height: 2.8rem;
+				padding: 0 0.8rem;
 			}
 			.el-select__selected-item,
 			.el-select__input-wrapper,
@@ -35,17 +35,17 @@
 				line-height: normal;
 			}
 			.el-select__input {
-				height: 24px;
+				height: 2.4rem;
 			}
 		}
 	}
 	.el-popper {
 		.el-select-dropdown {
 			li {
-				padding-left: 8px;
-				height: 30px;
-				line-height: 30px;
-				font-size: 12px;
+				padding-left: 0.8rem;
+				height: 3rem;
+				line-height: 3rem;
+				font-size: 1.2rem;
 			}
 		}
 	}
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
index a14b319..f64b8cc 100644
--- a/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
@@ -86,7 +86,7 @@
 		position: relative;
 		display: flex;
 		align-items: center;
-		--input-thumb-size: 1.4rem;
+		--input-thumb-size: 1.2rem;
 		--backcolor1: var(--depth-slider-thumb-color1, #000);
 		--backcolor2: var(--depth-slider-thumb-color2, #d3d3d3);
 		&:hover {
@@ -121,7 +121,7 @@
 					background: var(--backcolor1); /* 蓝色滑块 */
 					cursor: pointer;
 					transition: all 0.2s;
-					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+					box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
 				}
 				&::-webkit-slider-thumb:hover {
 					transform: scale(1.1);
@@ -153,9 +153,9 @@
 					transform: translateX(-50%);
 					width: 0;
 					height: 0;
-					border-left: 5px solid transparent;
-					border-right: 5px solid transparent;
-					border-top: 5px solid rgba(0, 0, 0, 0.8);
+					border-left: 0.5rem solid transparent;
+					border-right: 0.5rem solid transparent;
+					border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
 				}
 			}
 		}
diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
index e2dd5d4..7ac7371 100644
--- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
@@ -37,6 +37,7 @@ export class AISelectboxToolManager {
 		if (!oldIsAAA && newIsAAA) {
 			// 普通工具切换到智能框选工具
 			this.init()
+			this.canvasManager.discardActiveObject()
 		} else if (oldIsAAA && !newIsAAA) {
 			// 智能框选工具切换到普通工具
 			this.clear()
diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
index 9f47937..aa39ced 100644
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -22,7 +22,7 @@
 				><svg-icon name="arrow-right" size="14" />
 			</span>
 		</div>
-		<div class="history-list" v-show="!isCollapse && showHistory">
+		<div class="history-list mini-scrollbar" v-show="!isCollapse && showHistory">
 			<div v-for="item in list" :key="item.name" class="history-item">
 				<div v-if="item.title" class="title">{{ item.name }}</div>
 				<div
@@ -307,7 +307,8 @@
 		> .history-list {
 			flex: 1;
 			overflow-y: auto;
-			width: 23.2rem;
+			width: 26.4rem;
+			padding: 0 1.5rem;
 			margin: 1rem auto 0;
 			> .history-item {
 				width: 100%;

From 2b34e45b2d914f72a367acc0be63e38fffe752b3 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 26 Mar 2026 13:34:52 +0800
Subject: [PATCH 03/21] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ai-selectbox-panel.vue         | 10 +++--
 .../components/depth-header-tools.vue         | 18 ++++----
 .../components/details-panel/basic-info.vue   |  4 +-
 .../components/details-panel/fill-repeat.vue  | 16 +++----
 .../components/details-panel/index.vue        |  2 +-
 .../details-panel/shape-setting.vue           | 10 ++---
 .../components/layer-panel/layer-list.vue     |  2 +-
 .../DepthCanvas/manager/LayerManager.ts       | 24 +++++-----
 src/lang/en.ts                                | 42 ++++++++++++++++++
 src/lang/zh-cn.ts                             | 44 ++++++++++++++++++-
 10 files changed, 131 insertions(+), 41 deletions(-)

diff --git a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
index a2653b4..eb8d3e9 100644
--- a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
+++ b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
@@ -22,6 +22,8 @@
 	import depthSlider from './tools/depth-slider.vue'
 	import { OperationType } from '../tools/layerHelper'
 	import brushControlPanel from './brush-control-panel.vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 
 	const props = defineProps({
 		currentTool: { required: true, type: [String, null] }
@@ -38,22 +40,22 @@
 		{
 			type: OperationType.AISELECT_ADD,
 			name: 'dc-add_sb',
-			label: 'Add'
+			label: t('DepthCanvas.add')
 		},
 		{
 			type: OperationType.AISELECT_REMOVE,
 			name: 'dc-remove_sb',
-			label: 'Remove'
+			label: t('DepthCanvas.remove')
 		},
 		{
 			type: OperationType.AISELECT_DRAW,
 			name: 'dc-brush_sb',
-			label: 'Brush'
+			label: t('DepthCanvas.brush')
 		},
 		{
 			type: OperationType.AISELECT_ERASER,
 			name: 'dc-erase_sb',
-			label: 'Erase'
+			label: t('DepthCanvas.erase')
 		}
 	])
 	const onClickItem = (type: string) => {
diff --git a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
index 1a52eb3..a9622f7 100644
--- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
+++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
@@ -30,7 +30,7 @@
 		</template>
 		<button class="export" @click="emit('export')">
 			<span class="icon"><svg-icon name="export" size="12" /></span>
-			<span class="text">Export</span>
+			<span class="text">{{ $t('DepthCanvas.export') }}</span>
 		</button>
 		<!-- <button class="export" @click="emit('export-local')">
 			<span class="text">保存本地</span>
@@ -40,7 +40,7 @@
 		</button> -->
 		<button class="workbench" @click="onWorkbench">
 			<span class="icon"><svg-icon name="dc-workbench" size="20" /></span>
-			<span class="text">Workbench</span>
+			<span class="text">{{ $t('DepthCanvas.save') }}</span>
 		</button>
 	</div>
 </template>
@@ -49,6 +49,8 @@
 	import { ref, inject, computed } from 'vue'
 	import { exportCanvasToImage } from '../tools/exportMethod'
 	import { OperationType, BlendMode } from '../tools/layerHelper'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const props = defineProps({
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
@@ -86,37 +88,37 @@
 			child: [
 				{
 					name: OperationType.RECTANGLE,
-					label: 'Rectangle',
+					label: t('DepthCanvas.rectangle'),
 					icon: 'dc-rectangle',
 					iconSize: 13
 				},
 				{
 					name: OperationType.LINE,
-					label: 'Line',
+					label: t('DepthCanvas.line'),
 					icon: 'dc-line',
 					iconSize: 10
 				},
 				{
 					name: OperationType.ARROW,
-					label: 'Arrow',
+					label: t('DepthCanvas.arrow'),
 					icon: 'dc-arrow',
 					iconSize: 11
 				},
 				{
 					name: OperationType.ELLIPSE,
-					label: 'Ellipse',
+					label: t('DepthCanvas.ellipse'),
 					icon: 'dc-ellipse',
 					iconSize: 15
 				},
 				{
 					name: OperationType.TRIANGLE,
-					label: 'Polygon',
+					label: t('DepthCanvas.triangle'),
 					icon: 'dc-triangle',
 					iconSize: 14
 				},
 				{
 					name: OperationType.STAR,
-					label: 'Star',
+					label: t('DepthCanvas.star'),
 					icon: 'dc-star',
 					iconSize: 15
 				}
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
index d56fff6..c0e7f53 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="basic-info h">
 		<div>
-			<div class="title">Position</div>
+			<div class="title">{{ $t('DepthCanvas.position') }}</div>
 			<div class="content">
 				<div>
 					<depth-input
@@ -44,7 +44,7 @@
 			</div>
 		</div>
 		<div>
-			<div class="title">Scale</div>
+			<div class="title">{{ $t('DepthCanvas.scale') }}</div>
 			<div class="content">
 				<div>
 					<depth-input
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue b/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
index 1e6fa7d..22f50f7 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
@@ -1,16 +1,16 @@
 <template>
 	<div class="fill-repeat h">
 		<div>
-			<div class="title">Image</div>
+			<div class="title">{{ $t('DepthCanvas.image') }}</div>
 			<div class="content">
 				<img :src="object.info.fill.source" alt="" />
 			</div>
 		</div>
 		<div>
-			<div class="title">Sttings</div>
+			<div class="title">{{ $t('DepthCanvas.settings') }}</div>
 			<div class="content">
 				<div>
-					<div class="label">Rotation</div>
+					<div class="label">{{ $t('DepthCanvas.rotation') }}</div>
 					<div class="value">
 						<depth-input
 							icon="dc-angle"
@@ -23,7 +23,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Scale</div>
+					<div class="label">{{ $t('DepthCanvas.scale') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="scale"
@@ -36,7 +36,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Opacity</div>
+					<div class="label">{{ $t('DepthCanvas.opacity') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="opacity"
@@ -49,7 +49,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Gap X</div>
+					<div class="label">{{ $t('DepthCanvas.gapX') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="gapX"
@@ -62,7 +62,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Gap Y</div>
+					<div class="label">{{ $t('DepthCanvas.gapY') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="gapY"
@@ -75,7 +75,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Offset</div>
+					<div class="label">{{ $t('DepthCanvas.offset') }}</div>
 					<div class="value">
 						<depth-offset-tool
 							v-model="offset"
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
index d7b189b..4c2dd95 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -2,7 +2,7 @@
 	<div class="details-panel">
 		<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="title">{{ $t('DepthCanvas.editDetails') }}</span>
 			<span class="arrow" :class="{ show }">
 				<svg-icon name="dc-down_arrow2" size="10" />
 			</span>
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue b/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
index 292be86..a0049cf 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="shape-setting h">
 		<div>
-			<div class="title">Appearance</div>
+			<div class="title">{{ $t('DepthCanvas.appearance') }}</div>
 			<div class="content">
 				<div>
-					<span class="label">Opacity</span>
+					<span class="label">{{ $t('DepthCanvas.opacity') }}</span>
 					<depth-input
 						type="number"
 						after="%"
@@ -17,7 +17,7 @@
 					/>
 				</div>
 				<div v-if="object.type === 'rect'">
-					<span class="label">Corner Radius</span>
+					<span class="label">{{ $t('DepthCanvas.cornerRadius') }}</span>
 					<depth-input
 						type="number"
 						v-model="data.radius"
@@ -28,7 +28,7 @@
 					/>
 				</div>
 				<div v-else-if="object.type === 'path'">
-					<span class="label">Stroke Width</span>
+					<span class="label">{{ $t('DepthCanvas.strokeWidth') }}</span>
 					<depth-input
 						type="number"
 						v-model="data.strokeWidth"
@@ -42,7 +42,7 @@
 			</div>
 			<div class="content">
 				<div>
-					<span class="label">Color</span>
+					<span class="label">{{ $t('DepthCanvas.color') }}</span>
 					<depth-input
 						v-if="object.type === 'path'"
 						type="color"
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
index fa94ce1..b1b3e50 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
@@ -3,7 +3,7 @@
 		<div class="header">
 			<div class="left">
 				<span class="icon"><svg-icon name="dc-layer" size="16" /></span>
-				<span class="title">Layer</span>
+				<span class="title">{{ $t('DepthCanvas.layer') }}</span>
 			</div>
 			<div class="right">
 				<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index b77f3c1..2955341 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -4,6 +4,8 @@ import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType, BlendMode } from '../tools/layerHelper'
 import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
+import i18n from '@/lang/index'
+const t = i18n.global.t
 
 export class LayerManager {
 	stateManager: any
@@ -206,7 +208,7 @@ export class LayerManager {
 			fill: 'transparent',
 			info: {
 				id: createId("image"),
-				name: '空图层',
+				name: t('DepthCanvas.emptyLayer'),
 			}
 		})
 		this.setLayerPosition(emptyObject)
@@ -226,7 +228,7 @@ export class LayerManager {
 			evented: false,
 			info: {
 				id: createId("group"),
-				name: '智能选区组',
+				name: t('DepthCanvas.aiGroupLayer'),
 				showChildren: true,
 				...(options?.info || {}),
 			}
@@ -245,7 +247,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("text"),
-				name: '文本图层',
+				name: t('DepthCanvas.textLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -263,7 +265,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("rect"),
-				name: '矩形图层',
+				name: t('DepthCanvas.rectLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -287,7 +289,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("line"),
-				name: '直线图层',
+				name: t('DepthCanvas.lineLayer'),
 				...(options?.info || {}),
 			}
 		});
@@ -304,7 +306,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("ellipse"),
-				name: '椭圆图层',
+				name: t('DepthCanvas.ellipseLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -323,7 +325,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("triangle"),
-				name: '三角形图层',
+				name: t('DepthCanvas.triangleLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -343,7 +345,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("star"),
-				name: '五角星图层',
+				name: t('DepthCanvas.starLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -367,7 +369,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("arrow"),
-				name: '箭头图层',
+				name: t('DepthCanvas.arrowLayer'),
 				...(options?.info || {}),
 			}
 		});
@@ -397,7 +399,7 @@ export class LayerManager {
 					...(options || {}),
 					info: {
 						id: createId("image"),
-						name: "图片图层",
+						name: t('DepthCanvas.imageLayer'),
 						...(options?.info || {}),
 					}
 				})
@@ -421,7 +423,7 @@ export class LayerManager {
 					info: {
 						...(targetLayer?.info || {}),
 						id: createId("image"),
-						name: targetLayer?.info?.name || "合并图层",
+						name: targetLayer?.info?.name || t('DepthCanvas.mergeLayer'),
 					}
 				})
 				resolve(img)
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 31f6a52..7c397cd 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -200,5 +200,47 @@ export default {
 	threeModel: {
 		loading: 'Loading',
 		download: 'Download'
+	},
+	DepthCanvas: {
+		layer: "Layer",
+		editDetails: "Edit Details",
+		export: "Export",
+		save: "Save",
+		workbench: "Workbench",
+		position: "Position",
+		size: "Size",
+		appearance: "Appearance",
+		opacity: "Opacity",
+		cornerRadius: "Cor Radius",
+		strokeWidth: "Stroke Width",
+		color: "Color",
+		image: "Image",
+		settings: "Settings",
+		rotation: "Rotation",
+		scale: "Scale",
+		gapX: "Gap X",
+		gapY: "Gap Y",
+		offset: "Offset",
+		emptyLayer: "Empty Layer",
+		aiGroupLayer: "AI Group Layer",
+		textLayer: "Text Layer",
+		rectLayer: "Rect Layer",
+		lineLayer: "Line Layer",
+		ellipseLayer: "Ellipse Layer",
+		triangleLayer: "Triangle Layer",
+		starLayer: "Star Layer",
+		arrowLayer: "Arrow Layer",
+		imageLayer: "Image Layer",
+		mergeLayer: "Merge Layer",
+		rectangle: "Rectangle",
+		line: "Line",
+		arrow: "Arrow",
+		ellipse: "Ellipse",
+		triangle: "Triangle",
+		star: "Star",
+		add: "Add",
+		remove: "Remove",
+		brush: "Brush",
+		erase: "Erase",
 	}
 }
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index e7e33e4..b06177f 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -153,7 +153,7 @@ export default {
 		quote: '引用',
 		delete: '删除',
 		edit: '编辑',
-		generatingReport:'正在为您生成报告,可能需要几分钟时间,生成期间你可以继续进行其他任务'
+		generatingReport: '正在为您生成报告,可能需要几分钟时间,生成期间你可以继续进行其他任务'
 	},
 
 	// Version Tree
@@ -197,5 +197,47 @@ export default {
 	threeModel: {
 		loading: '加载中',
 		download: '下载'
+	},
+	DepthCanvas: {
+		layer: "图层",
+		editDetails: "编辑详情",
+		export: "导出",
+		save: "保存",
+		workbench: "工作台",
+		position: "位置",
+		size: "大小",
+		appearance: "外观",
+		opacity: "透明度",
+		cornerRadius: "圆角半径",
+		strokeWidth: "边框宽度",
+		color: "颜色",
+		image: "图片",
+		settings: "设置",
+		rotation: "旋转角度",
+		scale: "缩放",
+		gapX: "水平间距",
+		gapY: "垂直间距",
+		offset: "偏移量",
+		emptyLayer: "空图层",
+		aiGroupLayer: "智能选区组",
+		textLayer: "文本图层",
+		rectLayer: "矩形图层",
+		lineLayer: "直线图层",
+		ellipseLayer: "椭圆图层",
+		triangleLayer: "三角形图层",
+		starLayer: "五角星图层",
+		arrowLayer: "箭头图层",
+		imageLayer: "图片图层",
+		mergeLayer: "合并图层",
+		rectangle: "矩形",
+		line: "直线",
+		arrow: "箭头",
+		ellipse: "椭圆",
+		triangle: "三角形",
+		star: "五角星",
+		add: "添加",
+		remove: "删除",
+		brush: "画笔",
+		erase: "擦除",
 	}
 }

From 83eb5d1d0d33d2dc6297bdc37149fd3c44fa6f13 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 26 Mar 2026 16:11:09 +0800
Subject: [PATCH 04/21] =?UTF-8?q?bugfix:=20=E5=AE=9E=E6=97=B6=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E5=81=9C=E6=AD=A2=E7=94=9F=E6=88=90=E6=AF=8F=E6=9D=A1?=
 =?UTF-8?q?=E9=83=BD=E6=9C=89=E5=8D=A1=E7=89=87&=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=87=8C=E7=9A=84web=20sources=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/components/Agent.vue | 14 ++++++++++++++
 src/views/home/agent/components/Item.vue  |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index 789c708..5023bf3 100644
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -495,6 +495,7 @@
 				let combinedContent = item.content || ''
 				let combinedThinkingText = item.reasoning || ''
 				let combinedImageUrl = item.image_url || null
+				let webAddress = item.webAddress || null
 				// 继续往后找连续的 assistant 消息
 				let j = i + 1
 				while (j < dialogue.length && dialogue[j].role === 'assistant') {
@@ -504,6 +505,12 @@
 					if (dialogue[j].image_url) {
 						combinedImageUrl = dialogue[j].image_url
 					}
+					if (dialogue[j].webAddress) {
+						combinedContent += `<slot slot-name="url"></slot>`
+						webAddress = dialogue[j].webAddress
+						// console.log('webAddress22222222222222', dialogue[j].webAddress)
+						// debugger
+					}
 					j++
 				}
 
@@ -518,6 +525,7 @@
 					thinkingText: combinedThinkingText,
 					text: combinedContent,
 					image_url: combinedImageUrl,
+					webAddress: !!webAddress ? JSON.parse(webAddress) : null,
 					isUser: false,
 					id: result.length + 1,
 					sessionId: sessionId
@@ -601,6 +609,11 @@
 			return
 		}
 		const { ancestors, current } = data
+		current.dialogue.forEach((item) => {
+			if (item.webAddress) {
+				console.log(item)
+			}
+		})
 
 		const imgList = []
 		const ancestorsList = []
@@ -622,6 +635,7 @@
 			messageList.value = [...ancestorsList]
 			params.versionID = current?.id
 			sketchList.value = imgList
+			console.log('------------', messageList.value)
 		})
 	}
 
diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index ee5a4ee..53b3472 100644
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -73,7 +73,7 @@
 						<span>{{ content.webAddress?.length }} web pages have been retrieved.</span>
 					</div>
 				</div>
-				<Pause v-show="showStop && isLast" />
+				<Pause v-show="showStop" />
 				<div
 					v-show="!content.streaming"
 					class="operate flex"

From 0118040e27d462c59ae054f7788dcb474906b60b Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 26 Mar 2026 16:45:35 +0800
Subject: [PATCH 05/21] =?UTF-8?q?bugfix:=20=E5=BC=95=E7=94=A8=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/en.ts                                | 84 ++++++++++---------
 src/lang/zh-cn.ts                             | 83 +++++++++---------
 src/views/home/agent/components/Agent.vue     |  1 -
 .../home/agent/components/ReportCard.vue      |  8 +-
 src/views/home/components/Input.vue           | 19 +++--
 5 files changed, 104 insertions(+), 91 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 7c397cd..05ffb1e 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -135,7 +135,9 @@ export default {
 		confirm: 'Confirm',
 		styleTitle: 'Settings',
 		createProject: 'Create Project',
-		trendingReport: 'Trending report'
+		trendingReport: 'Trending report',
+		reportPlaceholder:
+			'Generate a furniture trending report for 2026, including popular styles and design directions.'
 	},
 	area: {
 		unitedStates: 'United States',
@@ -202,45 +204,45 @@ export default {
 		download: 'Download'
 	},
 	DepthCanvas: {
-		layer: "Layer",
-		editDetails: "Edit Details",
-		export: "Export",
-		save: "Save",
-		workbench: "Workbench",
-		position: "Position",
-		size: "Size",
-		appearance: "Appearance",
-		opacity: "Opacity",
-		cornerRadius: "Cor Radius",
-		strokeWidth: "Stroke Width",
-		color: "Color",
-		image: "Image",
-		settings: "Settings",
-		rotation: "Rotation",
-		scale: "Scale",
-		gapX: "Gap X",
-		gapY: "Gap Y",
-		offset: "Offset",
-		emptyLayer: "Empty Layer",
-		aiGroupLayer: "AI Group Layer",
-		textLayer: "Text Layer",
-		rectLayer: "Rect Layer",
-		lineLayer: "Line Layer",
-		ellipseLayer: "Ellipse Layer",
-		triangleLayer: "Triangle Layer",
-		starLayer: "Star Layer",
-		arrowLayer: "Arrow Layer",
-		imageLayer: "Image Layer",
-		mergeLayer: "Merge Layer",
-		rectangle: "Rectangle",
-		line: "Line",
-		arrow: "Arrow",
-		ellipse: "Ellipse",
-		triangle: "Triangle",
-		star: "Star",
-		add: "Add",
-		remove: "Remove",
-		brush: "Brush",
-		erase: "Erase",
+		layer: 'Layer',
+		editDetails: 'Edit Details',
+		export: 'Export',
+		save: 'Save',
+		workbench: 'Workbench',
+		position: 'Position',
+		size: 'Size',
+		appearance: 'Appearance',
+		opacity: 'Opacity',
+		cornerRadius: 'Cor Radius',
+		strokeWidth: 'Stroke Width',
+		color: 'Color',
+		image: 'Image',
+		settings: 'Settings',
+		rotation: 'Rotation',
+		scale: 'Scale',
+		gapX: 'Gap X',
+		gapY: 'Gap Y',
+		offset: 'Offset',
+		emptyLayer: 'Empty Layer',
+		aiGroupLayer: 'AI Group Layer',
+		textLayer: 'Text Layer',
+		rectLayer: 'Rect Layer',
+		lineLayer: 'Line Layer',
+		ellipseLayer: 'Ellipse Layer',
+		triangleLayer: 'Triangle Layer',
+		starLayer: 'Star Layer',
+		arrowLayer: 'Arrow Layer',
+		imageLayer: 'Image Layer',
+		mergeLayer: 'Merge Layer',
+		rectangle: 'Rectangle',
+		line: 'Line',
+		arrow: 'Arrow',
+		ellipse: 'Ellipse',
+		triangle: 'Triangle',
+		star: 'Star',
+		add: 'Add',
+		remove: 'Remove',
+		brush: 'Brush',
+		erase: 'Erase'
 	}
 }
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index b06177f..9d5ba0d 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -128,7 +128,8 @@ export default {
 		confirm: '确认',
 		styleTitle: '设置',
 		createProject: '创建项目',
-		trendingReport: '趋势报告'
+		trendingReport: '趋势报告',
+		reportPlaceholder: '生成一份2026年家具流行趋势报告，内容包括流行风格和设计方向。'
 	},
 	area: {
 		unitedStates: '美国',
@@ -199,45 +200,45 @@ export default {
 		download: '下载'
 	},
 	DepthCanvas: {
-		layer: "图层",
-		editDetails: "编辑详情",
-		export: "导出",
-		save: "保存",
-		workbench: "工作台",
-		position: "位置",
-		size: "大小",
-		appearance: "外观",
-		opacity: "透明度",
-		cornerRadius: "圆角半径",
-		strokeWidth: "边框宽度",
-		color: "颜色",
-		image: "图片",
-		settings: "设置",
-		rotation: "旋转角度",
-		scale: "缩放",
-		gapX: "水平间距",
-		gapY: "垂直间距",
-		offset: "偏移量",
-		emptyLayer: "空图层",
-		aiGroupLayer: "智能选区组",
-		textLayer: "文本图层",
-		rectLayer: "矩形图层",
-		lineLayer: "直线图层",
-		ellipseLayer: "椭圆图层",
-		triangleLayer: "三角形图层",
-		starLayer: "五角星图层",
-		arrowLayer: "箭头图层",
-		imageLayer: "图片图层",
-		mergeLayer: "合并图层",
-		rectangle: "矩形",
-		line: "直线",
-		arrow: "箭头",
-		ellipse: "椭圆",
-		triangle: "三角形",
-		star: "五角星",
-		add: "添加",
-		remove: "删除",
-		brush: "画笔",
-		erase: "擦除",
+		layer: '图层',
+		editDetails: '编辑详情',
+		export: '导出',
+		save: '保存',
+		workbench: '工作台',
+		position: '位置',
+		size: '大小',
+		appearance: '外观',
+		opacity: '透明度',
+		cornerRadius: '圆角半径',
+		strokeWidth: '边框宽度',
+		color: '颜色',
+		image: '图片',
+		settings: '设置',
+		rotation: '旋转角度',
+		scale: '缩放',
+		gapX: '水平间距',
+		gapY: '垂直间距',
+		offset: '偏移量',
+		emptyLayer: '空图层',
+		aiGroupLayer: '智能选区组',
+		textLayer: '文本图层',
+		rectLayer: '矩形图层',
+		lineLayer: '直线图层',
+		ellipseLayer: '椭圆图层',
+		triangleLayer: '三角形图层',
+		starLayer: '五角星图层',
+		arrowLayer: '箭头图层',
+		imageLayer: '图片图层',
+		mergeLayer: '合并图层',
+		rectangle: '矩形',
+		line: '直线',
+		arrow: '箭头',
+		ellipse: '椭圆',
+		triangle: '三角形',
+		star: '五角星',
+		add: '添加',
+		remove: '删除',
+		brush: '画笔',
+		erase: '擦除'
 	}
 }
diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index 5023bf3..116c54f 100644
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -635,7 +635,6 @@
 			messageList.value = [...ancestorsList]
 			params.versionID = current?.id
 			sketchList.value = imgList
-			console.log('------------', messageList.value)
 		})
 	}
 
diff --git a/src/views/home/agent/components/ReportCard.vue b/src/views/home/agent/components/ReportCard.vue
index 6f17ef1..272992f 100644
--- a/src/views/home/agent/components/ReportCard.vue
+++ b/src/views/home/agent/components/ReportCard.vue
@@ -35,16 +35,18 @@
 	.report-card {
 		cursor: pointer;
 		width: 100%;
-		margin: 2.4rem 0;
+		margin: 1.2rem 0 0;
 		min-height: 11.2rem;
 		background: url('@/assets/images/report-card.png') no-repeat;
 		background-size: 100% 100%;
 		padding: 2.9rem;
 		overflow: hidden;
 		position: relative;
+		margin-bottom: 0;
 		&.is-url {
 			background: url('@/assets/images/link-card.png') no-repeat;
 			background-size: 100% 100%;
+			margin: 2.4rem 0;
 		}
 		&.is-sketch {
 			background: url('@/assets/images/sketch-card.png') no-repeat;
@@ -61,7 +63,7 @@
 
 		&-header {
 			font-family: 'Medium';
-			font-size: 1.6rem;
+			font-size: 1.2rem;
 			margin-bottom: 1.3rem;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -80,7 +82,7 @@
 		&-content {
 			font-family: 'Regular';
 			font-weight: 300;
-			font-size: 1.6rem;
+			font-size: 1.2rem;
 			color: #7c7c7c;
 		}
 	}
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index e16d797..9acb96c 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -16,7 +16,7 @@
 							class="preview-image"
 							@click="previewImage(image.url)"
 						/>
-						<div class="image-remove-btn" @click="removeImage(index)">
+						<div class="image-remove-btn" @click="removeImage(index, image)">
 							<SvgIcon name="delete" size="16" />
 						</div>
 					</div>
@@ -305,8 +305,16 @@
 	}
 
 	// 移除图片
-	const removeImage = (index: number) => {
-		uploadedImages.value.splice(index, 1)
+	const removeImage = (index: number, item: any) => {
+		if (quoteList.value.includes(item)) {
+			const quoteIndex = quoteList.value.indexOf(item)
+			if (quoteIndex > -1) {
+				quoteList.value.splice(quoteIndex, 1)
+			}
+			return
+		} else {
+			uploadedImages.value.splice(index, 1)
+		}
 	}
 
 	const styleKeys: string[] = [
@@ -472,8 +480,7 @@
 		customPlaceholder.value = placeholderSpan
 
 		// 打字机效果显示placeholder文本
-		const placeholderText =
-			'Generate a furniture trending report for 2026, including popular styles and design directions.'
+		const placeholderText = t('Input.reportPlaceholder')
 		typeWriterEffect(placeholderSpan, placeholderText)
 
 		const removePlaceholderOnInput = () => {
@@ -815,6 +822,8 @@
 	}
 
 	const handleQuote = (url: string) => {
+		const hasQuoted = quoteList.value.includes(url)
+		if (hasQuoted) return
 		quoteList.value.push(url)
 	}
 	onUnmounted(() => {

From 382d3ef9af48d124a37927ebe0ba41e101471186 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 26 Mar 2026 16:50:50 +0800
Subject: [PATCH 06/21] =?UTF-8?q?style:=20=20=E6=96=87=E5=AD=97=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/components/Item.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index 53b3472..89a817c 100644
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -324,6 +324,7 @@
 				line-height: 2rem;
 				font-size: 1.4rem;
 				width: 82%;
+				word-break: break-word;
 			}
 			&.is-user .message-context {
 				width: fit-content;

From d1e799ff6d2e7282366793d5dac0f3adbb6c3982 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 26 Mar 2026 16:54:38 +0800
Subject: [PATCH 07/21] =?UTF-8?q?style:=20=E5=A4=B4=E5=83=8F=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/components/Item.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index 89a817c..e408713 100644
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -318,6 +318,7 @@
 					width: 100%;
 					height: 100%;
 					border-radius: 50%;
+					object-fit: cover;
 				}
 			}
 			.message-context {

From 0a5c6167088e7f0f2d6e9d31c802077ad273cd6b Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 26 Mar 2026 17:07:10 +0800
Subject: [PATCH 08/21] =?UTF-8?q?style:=20=E5=8D=A1=E7=89=87=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8&=E5=81=9C=E6=AD=A2=E7=94=9F=E6=88=90=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/components/Pause.vue     | 31 +++++++++----------
 .../home/agent/components/ReportCard.vue      |  5 +--
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/views/home/agent/components/Pause.vue b/src/views/home/agent/components/Pause.vue
index 452052e..eccfa75 100644
--- a/src/views/home/agent/components/Pause.vue
+++ b/src/views/home/agent/components/Pause.vue
@@ -13,11 +13,12 @@
 		width: 100%;
 		height: 3.6rem;
 		line-height: 3.6rem;
-    column-gap: 0.6rem;
-    padding: 0 1.2rem;
+		column-gap: 0.6rem;
+		padding: 0 1.2rem;
 		background-color: #fffcf4;
-    border-radius: 0.4rem;
-    margin-top: 1rem;
+		border-radius: 0.4rem;
+		margin-top: 1rem;
+		color: #ff7a51;
 
 		&::before {
 			content: '';
@@ -30,22 +31,18 @@
 				rgba(233, 121, 60, 0.3) 1.61%,
 				rgba(255, 207, 144, 0.3) 101.01%
 			);
-			-webkit-mask:
-				linear-gradient(#fff 0 0) content-box,
-				linear-gradient(#fff 0 0);
-			mask:
-				linear-gradient(#fff 0 0) content-box,
-				linear-gradient(#fff 0 0);
+			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+			mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 			-webkit-mask-composite: xor;
 			mask-composite: exclude;
 		}
 
-    .c-svg{
-      width: initial;
-      .svg-icon{
-        width: 1.2rem;
-        height: 1.2rem;
-      }
-    }
+		.c-svg {
+			width: initial;
+			.svg-icon {
+				width: 1.2rem;
+				height: 1.2rem;
+			}
+		}
 	}
 </style>
diff --git a/src/views/home/agent/components/ReportCard.vue b/src/views/home/agent/components/ReportCard.vue
index 272992f..f73cac9 100644
--- a/src/views/home/agent/components/ReportCard.vue
+++ b/src/views/home/agent/components/ReportCard.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
 		<div class="report-card-header">
-			<span v-if="!isUrl && !isSketch">{{ title || '' }}</span>
-			<div v-else class="web-sources flex align-center">
+			<!-- <span v-if="!isUrl && !isSketch">{{ title || '' }}</span> -->
+			<div  class="web-sources flex align-center">
 				<span>{{ title || '' }}</span>
 				<img src="@/assets/images/link.png" class="link-icon" />
 			</div>
@@ -35,6 +35,7 @@
 	.report-card {
 		cursor: pointer;
 		width: 100%;
+		height: 11.2rem;
 		margin: 1.2rem 0 0;
 		min-height: 11.2rem;
 		background: url('@/assets/images/report-card.png') no-repeat;

From cbd1796192356a08da6ce5f0a119745a1b23235f Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 26 Mar 2026 17:21:43 +0800
Subject: [PATCH 09/21] =?UTF-8?q?bugfix:=20=E5=81=9C=E6=AD=A2=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E5=8D=A1=E7=89=87=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/history.svg             |  2 +-
 src/views/home/agent/components/Item.vue | 10 +++++++++-
 src/views/home/left-nav.vue              |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/assets/icons/history.svg b/src/assets/icons/history.svg
index 0c4a0d5..a6b935f 100644
--- a/src/assets/icons/history.svg
+++ b/src/assets/icons/history.svg
@@ -1,3 +1,3 @@
 <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.66667 3.33275V2.08333C1.66667 1.6231 1.29357 1.25 0.833333 1.25C0.373096 1.25 0 1.6231 0 2.08333V5.83333C0 6.29357 0.373096 6.66667 0.833333 6.66667H4.16667C4.6269 6.66667 5 6.29357 5 5.83333C5 5.3731 4.6269 5 4.16667 5H2.55837C3.712 3.00589 5.86695 1.66667 8.33333 1.66667C12.0152 1.66667 15 4.65143 15 8.33333C15 12.0152 12.0152 15 8.33333 15C5.16166 15 2.5055 12.7843 1.83185 9.81559C1.73001 9.36677 1.2836 9.08548 0.834775 9.18733C0.385947 9.28917 0.104662 9.73558 0.206506 10.1844C1.04863 13.8956 4.36638 16.6667 8.33333 16.6667C12.9357 16.6667 16.6667 12.9357 16.6667 8.33333C16.6667 3.73096 12.9357 0 8.33333 0C5.60633 0 3.18634 1.30996 1.66667 3.33275ZM8.33333 3.33333C8.79357 3.33333 9.16667 3.70643 9.16667 4.16667V8.33333C9.16667 8.55435 9.07887 8.76631 8.92259 8.92259L6.83926 11.0059C6.51382 11.3314 5.98618 11.3314 5.66074 11.0059C5.33531 10.6805 5.33531 10.1528 5.66074 9.82741L7.5 7.98816V4.16667C7.5 3.70643 7.8731 3.33333 8.33333 3.33333Z" fill="black" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.66667 3.33275V2.08333C1.66667 1.6231 1.29357 1.25 0.833333 1.25C0.373096 1.25 0 1.6231 0 2.08333V5.83333C0 6.29357 0.373096 6.66667 0.833333 6.66667H4.16667C4.6269 6.66667 5 6.29357 5 5.83333C5 5.3731 4.6269 5 4.16667 5H2.55837C3.712 3.00589 5.86695 1.66667 8.33333 1.66667C12.0152 1.66667 15 4.65143 15 8.33333C15 12.0152 12.0152 15 8.33333 15C5.16166 15 2.5055 12.7843 1.83185 9.81559C1.73001 9.36677 1.2836 9.08548 0.834775 9.18733C0.385947 9.28917 0.104662 9.73558 0.206506 10.1844C1.04863 13.8956 4.36638 16.6667 8.33333 16.6667C12.9357 16.6667 16.6667 12.9357 16.6667 8.33333C16.6667 3.73096 12.9357 0 8.33333 0C5.60633 0 3.18634 1.30996 1.66667 3.33275ZM8.33333 3.33333C8.79357 3.33333 9.16667 3.70643 9.16667 4.16667V8.33333C9.16667 8.55435 9.07887 8.76631 8.92259 8.92259L6.83926 11.0059C6.51382 11.3314 5.98618 11.3314 5.66074 11.0059C5.33531 10.6805 5.33531 10.1528 5.66074 9.82741L7.5 7.98816V4.16667C7.5 3.70643 7.8731 3.33333 8.33333 3.33333Z" fill="#0D0D0D"/>
 </svg>
diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index e408713..161edc3 100644
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -73,7 +73,7 @@
 						<span>{{ content.webAddress?.length }} web pages have been retrieved.</span>
 					</div>
 				</div>
-				<Pause v-show="showStop" />
+				<Pause v-show="showStop" :key="props.content.createTime" />
 				<div
 					v-show="!content.streaming"
 					class="operate flex"
@@ -133,6 +133,14 @@
 		isLast: Boolean
 	}>()
 
+	// watch(
+	// 	() => props.content,
+	// 	(newVal) => {
+	// 		console.log('props', newVal)
+	// 	},
+	// 	{ deep: true,immediate: true }
+	// )
+
 	const emit = defineEmits(['regenerate'])
 
 	const userAvatar = computed(() => {
diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
index aa39ced..fced71d 100644
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -16,7 +16,7 @@
 			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
 		</div> -->
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
-			<span class="icon"><svg-icon name="history" size="24" /></span>
+			<span class="icon"><svg-icon name="history" size="16" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
 			<span class="icon jiantou" v-show="!isCollapse"
 				><svg-icon name="arrow-right" size="14" />

From c4df014c0334935592cfac96d70dcc515c0d8cc4 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Fri, 27 Mar 2026 09:29:29 +0800
Subject: [PATCH 10/21] =?UTF-8?q?12345=E4=B8=8A=E5=B1=B1=E6=89=93=E8=80=81?=
 =?UTF-8?q?=E8=99=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/dc/create.svg                |  3 +++
 src/assets/icons/dc/reset.svg                 |  3 +++
 .../components/ai-selectbox-panel.vue         | 27 +++++++++++++++++--
 .../components/tools/depth-input.vue          | 23 +++++++++-------
 .../DepthCanvas/manager/LayerManager.ts       |  3 ++-
 src/lang/en.ts                                |  2 ++
 src/lang/zh-cn.ts                             |  2 ++
 7 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/icons/dc/create.svg
 create mode 100644 src/assets/icons/dc/reset.svg

diff --git a/src/assets/icons/dc/create.svg b/src/assets/icons/dc/create.svg
new file mode 100644
index 0000000..a3aa896
--- /dev/null
+++ b/src/assets/icons/dc/create.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 0C5.41421 0 5.75 0.335786 5.75 0.75V4.25H9.25C9.66421 4.25 10 4.58579 10 5C10 5.41421 9.66421 5.75 9.25 5.75H5.75V9.25C5.75 9.66421 5.41421 10 5 10C4.58579 10 4.25 9.66421 4.25 9.25V5.75H0.75C0.335786 5.75 0 5.41421 0 5C0 4.58579 0.335786 4.25 0.75 4.25H4.25V0.75C4.25 0.335786 4.58579 0 5 0Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/dc/reset.svg b/src/assets/icons/dc/reset.svg
new file mode 100644
index 0000000..eae205a
--- /dev/null
+++ b/src/assets/icons/dc/reset.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.02518 0C1.31675 0 1.55311 0.23564 1.55311 0.526316V1.35367C2.44992 0.514522 3.65683 0 4.98466 0C7.75456 0 10 2.23858 10 5C10 7.76142 7.75456 10 4.98466 10C2.41401 10 0.295731 8.07235 0.00363895 5.58758C-0.0302986 5.29888 0.176946 5.03741 0.466532 5.00358C0.756118 4.96974 1.01839 5.17635 1.05232 5.46505C1.28281 7.42573 2.95587 8.94737 4.98466 8.94737C7.17142 8.94737 8.94414 7.18007 8.94414 5C8.94414 2.81993 7.17142 1.05263 4.98466 1.05263C3.81245 1.05263 2.7587 1.56036 2.03329 2.36842H3.41571C3.70728 2.36842 3.94364 2.60406 3.94364 2.89474C3.94364 3.18541 3.70728 3.42105 3.41571 3.42105H1.02518C0.740438 3.42105 0.508345 3.19631 0.497639 2.91505C0.497164 2.90406 0.497034 2.89304 0.497254 2.882V0.526316C0.497254 0.23564 0.733616 0 1.02518 0Z" fill="white"/>
+</svg>
diff --git a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
index eb8d3e9..879e978 100644
--- a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
+++ b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
@@ -10,8 +10,14 @@
 				<span class="icon"><svg-icon :name="item.name" size="16" /></span>
 				<span class="label">{{ item.label }}</span>
 			</div>
-			<button @click="onCreate">创建</button>
-			<button @click="onReset">重置</button>
+			<button @click="onCreate">
+				<span class="icon"><svg-icon name="dc-create" size="12" /></span>
+				<span class="text">{{ $t('DepthCanvas.create') }}</span>
+			</button>
+			<button @click="onReset">
+				<span class="icon"><svg-icon name="dc-reset" size="12" /></span>
+				<span class="text">{{ $t('DepthCanvas.reset') }}</span>
+			</button>
 		</div>
 	</transition>
 	<brush-control-panel v-if="show" :currentTool="currentTool2" style="top: 14rem" />
@@ -114,5 +120,22 @@
 				background: rgba(235, 235, 235, 0.9);
 			}
 		}
+		> button {
+			cursor: pointer;
+			border: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 2.5rem;
+			background-color: rgba(13, 13, 13, 1);
+			color: #fff;
+			font-size: 1.2rem;
+			border-radius: 0.4rem;
+			padding: 0 0.8rem;
+			gap: 0.8rem;
+			&:active {
+				opacity: 0.8;
+			}
+		}
 	}
 </style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
index 53cc57f..6cbb258 100644
--- a/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
@@ -5,7 +5,9 @@
 			<svg-icon :name="icon" :size="iconSize" />
 		</span>
 		<span v-show="before" class="before">{{ before }}</span>
+
 		<input
+			v-if="!isColor"
 			v-bind="attrs"
 			:value="modelValue"
 			@input="onInput"
@@ -13,15 +15,17 @@
 			@copy.stop
 			@keydown.stop
 		/>
-		<input
-			v-if="isColor"
-			readonly
-			type="text"
-			:value="colorObj.color"
-			@copy.stop
-			@keydown.stop
-		/>
-		<template v-if="isColor">
+		<template v-else>
+			<input
+				v-bind="attrs"
+				type="color"
+				:value="colorObj.color"
+				@input="onInput"
+				@change="onChange"
+				@copy.stop
+				@keydown.stop
+			/>
+			<input readonly :value="colorObj.color" @copy.stop @keydown.stop />
 			<span class="decorate marginl"></span>
 			<input
 				class="alpha"
@@ -35,6 +39,7 @@
 				@keydown.stop
 			/>
 		</template>
+
 		<span v-show="after" class="after">{{ after }}</span>
 	</div>
 </template>
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index 2955341..d3471a2 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -136,10 +136,11 @@ export class LayerManager {
 	copyLayerById(id) {
 		const object = this.canvasManager.getObjectById(id)
 		if (!object) return console.warn('复制图层失败，对象不存在ID:', id)
+		this.canvasManager.discardActiveObject()
 		cloneObjects([object]).then(objects => {
 			const newObject = objects[0]
 			const info = JSON.parse(JSON.stringify(newObject.info))
-			info.id = createId("image")
+			info.id = createId("copylayer")
 			// info.name = info.name
 			newObject.set({
 				top: newObject.top + 15,
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 7c397cd..8eafdf9 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -242,5 +242,7 @@ export default {
 		remove: "Remove",
 		brush: "Brush",
 		erase: "Erase",
+		create: "Create",
+		reset: "Reset"
 	}
 }
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index b06177f..5fa5790 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -239,5 +239,7 @@ export default {
 		remove: "删除",
 		brush: "画笔",
 		erase: "擦除",
+		create: "创建",
+		reset: "重置"
 	}
 }

From 41820a2f9d99b84497f2b9fddc247786d8173f75 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Fri, 27 Mar 2026 09:35:46 +0800
Subject: [PATCH 11/21] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E8=A3=81=E5=89=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.development b/.env.development
index f844c2d..8eca712 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # VITE_APP_URL = http://192.168.31.82:8771
 VITE_APP_URL = http://18.167.251.121:10015
 # VITE_APP_URL = http://192.168.31.118:8080
-# VITE_APP_URL = http://192.168.31.82:8755
+VITE_APP_URL = http://192.168.31.82:8755
 VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com

From 98d92cbf303d4039d20617eec0ffba001ff1df6b Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Fri, 27 Mar 2026 09:36:21 +0800
Subject: [PATCH 12/21] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E8=A3=81=E5=89=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/assets/icons/clipAdd.svg                  |   3 +
 src/assets/icons/clipMinus.svg                |   3 +
 src/components/Assistant/assistant.vue        |   2 +-
 .../FlowCanvas/components/tools/my-select.vue |   7 +-
 .../components/tools/my-textTools.vue         |   6 +-
 .../Canvas/FlowCanvas/flow-canvas.vue         |   2 +
 src/components/Canvas/tools/tools.ts          |  18 +
 src/components/clipDialog.vue                 | 738 ++++++++++++++++++
 src/lang/en.ts                                |   5 +
 src/lang/zh-cn.ts                             |   5 +
 src/views/home/setting/General.vue            |  20 +-
 12 files changed, 801 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/clipAdd.svg
 create mode 100644 src/assets/icons/clipMinus.svg
 create mode 100644 src/components/clipDialog.vue

diff --git a/.env.development b/.env.development
index 8eca712..f844c2d 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # VITE_APP_URL = http://192.168.31.82:8771
 VITE_APP_URL = http://18.167.251.121:10015
 # VITE_APP_URL = http://192.168.31.118:8080
-VITE_APP_URL = http://192.168.31.82:8755
+# VITE_APP_URL = http://192.168.31.82:8755
 VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com
diff --git a/src/assets/icons/clipAdd.svg b/src/assets/icons/clipAdd.svg
new file mode 100644
index 0000000..d7b4773
--- /dev/null
+++ b/src/assets/icons/clipAdd.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0C12.0125 0 12.8333 0.820811 12.8333 1.83333V9.16667H20.1667C21.1792 9.16667 22 9.98748 22 11C22 12.0125 21.1792 12.8333 20.1667 12.8333H12.8333V20.1667C12.8333 21.1792 12.0125 22 11 22C9.98748 22 9.16667 21.1792 9.16667 20.1667V12.8333H1.83333C0.820811 12.8333 0 12.0125 0 11C0 9.98748 0.820811 9.16667 1.83333 9.16667H9.16667V1.83333C9.16667 0.820811 9.98748 0 11 0Z" fill="#0D0D0D"/>
+</svg>
diff --git a/src/assets/icons/clipMinus.svg b/src/assets/icons/clipMinus.svg
new file mode 100644
index 0000000..dec342c
--- /dev/null
+++ b/src/assets/icons/clipMinus.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="4" viewBox="0 0 22 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2C0 0.89543 0.820811 0 1.83333 0H20.1667C21.1792 0 22 0.89543 22 2C22 3.10457 21.1792 4 20.1667 4H1.83333C0.820811 4 0 3.10457 0 2Z" fill="#0D0D0D"/>
+</svg>
diff --git a/src/components/Assistant/assistant.vue b/src/components/Assistant/assistant.vue
index 64a8193..502b225 100644
--- a/src/components/Assistant/assistant.vue
+++ b/src/components/Assistant/assistant.vue
@@ -86,7 +86,7 @@
 		width: 46.69rem;
 		height: 56.6rem;
 		flex-shrink: 0;
-		// background-color: #fff;
+		background-color: #fff;
 		box-shadow: 0px 19.44px 27.22px 0px #0000000d;
 		border: 1px solid;
 		border-image-source: linear-gradient(
diff --git a/src/components/Canvas/FlowCanvas/components/tools/my-select.vue b/src/components/Canvas/FlowCanvas/components/tools/my-select.vue
index ff9d156..66493af 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/my-select.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/my-select.vue
@@ -1,7 +1,12 @@
 <template>
 	<div class="my-select">
 		<el-select :model-value="modelValue" @change="onChange" v-bind="attrs">
-			<el-option v-for="v in list" :key="v.value" :label="v.label" :value="v.value" />
+			<el-option v-for="v in list" :key="v.value" :label="v.label" :value="v.value" >
+				<slot name="option" :item="v">
+					<!-- 默认内容 -->
+					<span>{{ v.label }}</span>
+				</slot>
+			</el-option>
 		</el-select>
 	</div>
 </template>
diff --git a/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue b/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
index f95ee47..5c92f70 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
@@ -3,7 +3,11 @@
 		<input class="color" type="color" ref="colorInput" @change="changeColor" />
 		<div class="interval"></div>
 		<div class="fontFamily">
-			<my-select v-model="textStyle['--font-family']" @change="changeFontFamily"  :list="fontFamilyList[locale]" />
+			<my-select v-model="textStyle['--font-family']" @change="changeFontFamily"  :list="fontFamilyList[locale]" >
+				<template #option="{ item }">
+					<span :style="{'font-family': item.value,}">{{ item.label }}</span>
+				</template>
+			</my-select>
 		</div>
 		<div class="interval"></div>
 		<div class="size">
diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index e8bc2d2..3b11ab2 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -62,6 +62,7 @@
 			<threeModel :currentData="currentData" />
 		</template>
 	</baseModal>
+			<Assistant />
 </template>
 
 <script setup lang="ts">
@@ -69,6 +70,7 @@
 	import { computed, ref, watch, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
 	import { useLayout } from '@/utils/treeDiagram'
 	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
+	import Assistant from '@/components/Assistant/assistant.vue'
 	// 组件
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
diff --git a/src/components/Canvas/tools/tools.ts b/src/components/Canvas/tools/tools.ts
index e08e6f5..b2fb0df 100644
--- a/src/components/Canvas/tools/tools.ts
+++ b/src/components/Canvas/tools/tools.ts
@@ -78,6 +78,24 @@ export const base64Tofile = (base64: string,name: string) => {
 	const file = new File([blob], name, { type: mime })
 	return file
 }
+/** 二进制转base64 */
+/**
+ * File 对象转 Base64
+ * @param {File} file - 文件对象
+ * @returns {Promise<string>} Base64 字符串
+ */
+export const fileToBase64 = (file: File) => {
+	return new Promise((resolve, reject) => {
+	  const reader = new FileReader()
+	  reader.onload = () => {
+		resolve(reader.result) // Base64 字符串
+	  }
+	  reader.onerror = (error) => {
+		reject(error)
+	  }
+	  reader.readAsDataURL(file)
+	})
+}
 //获取当前时间2026-03-20 11:38:29
 export const getCurrentTime = () => {
 	const now = new Date()
diff --git a/src/components/clipDialog.vue b/src/components/clipDialog.vue
new file mode 100644
index 0000000..e239443
--- /dev/null
+++ b/src/components/clipDialog.vue
@@ -0,0 +1,738 @@
+<template>
+	<el-dialog
+		class="clipDialog"
+		v-model="showPanel"
+		align-center
+		:show-close="false"
+		width="75rem"
+		height="69rem"
+		style="border-radius: 2rem; padding: 4rem; --el-dialog-padding-primary: 1rem"
+	>
+		<template #header="{ close }">
+			<div class="clip-header">
+				<div class="title">{{ $t("clipDialog.title") }}</div>
+				<span class="close" @click="close">
+					<svg-icon name="close" size="12" color="#000" />
+				</span>
+			</div>
+		</template>
+		<div class="crop-image-modal">
+			<div class="modal-content">
+				<div class="clip">
+					<!-- 图片剪切 -->
+					<div class="image-clip" ref="el" v-if="data.url">
+						<div
+							class="box"
+							ref="box"
+							:style="{
+								width: clipData.img_width + 'px',
+								height: clipData.img_height + 'px',
+							}"
+						>
+							<img :src="data.url" />
+							<div class="shade"></div>
+							<div
+								ref="clipRef"
+								class="clip"
+								:style="{
+									top: clipData.top + 'px',
+									left: clipData.left + 'px',
+									width: clipData.width + 'px',
+									height: clipData.height + 'px',
+								}"
+								@mousedown.stop="clipMousedown"
+								@touchstart.stop="clipMousedown"
+							>
+								<div class="img">
+									<img
+										:src="data.url"
+										:style="{
+											width: clipData.img_width + 'px',
+											height: clipData.img_height + 'px',
+											top: -clipData.top + 'px',
+											left: -clipData.left + 'px',
+										}"
+									/>
+								</div>
+								<div
+									class="top"
+									@mousedown.stop="topMousedown"
+									@touchstart.stop="topMousedown"
+								></div>
+								<div
+									class="right"
+									@mousedown.stop="rightMousedown"
+									@touchstart.stop="rightMousedown"
+								></div>
+								<div
+									class="bottom"
+									@mousedown.stop="bottomMousedown"
+									@touchstart.stop="bottomMousedown"
+								></div>
+								<div
+									class="left"
+									@mousedown.stop="leftMousedown"
+									@touchstart.stop="leftMousedown"
+								></div>
+								<span
+									class="top"
+									@mousedown.stop="topMousedown"
+									@touchstart.stop="topMousedown"
+								></span>
+								<span
+									class="right"
+									@mousedown.stop="rightMousedown"
+									@touchstart.stop="rightMousedown"
+								></span>
+								<span
+									class="bottom"
+									@mousedown.stop="bottomMousedown"
+									@touchstart.stop="bottomMousedown"
+								></span>
+								<span
+									class="left"
+									@mousedown.stop="leftMousedown"
+									@touchstart.stop="leftMousedown"
+								></span>
+							</div>
+						</div>
+					</div>
+					<!-- 空状态 -->
+					<!-- <div class="empty-state" v-else>
+						<div class="empty-icon">📷</div>
+						<p>空</p>
+					</div> -->
+				</div>
+			</div>
+			<!-- <div class="operation">
+				<div class="operation-btn">
+					<svg-icon name="clipMinus" size="22" color="#000" />
+				</div>
+				<div class="slider">
+					<el-slider v-model="clipSize" />
+				</div>
+				<div class="operation-btn">
+					<svg-icon name="clipAdd" size="22" color="#000" />
+				</div>
+			</div> -->
+			<div class="modal-footer">
+				<div class="image-count" @click="close">	
+					{{ $t("clipDialog.cancel") }}
+				</div>
+				<div class="image-submit" @click="confirm">
+					{{ $t("clipDialog.confirm") }}
+				</div>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+	import {
+		ref,
+		computed,
+		onDeactivated,
+		reactive,
+		nextTick,
+	} from "vue";
+	import { useI18n } from "vue-i18n";
+
+	// Props
+	const props = defineProps(
+		{
+			isRatio: {
+				type: Boolean,
+				default: true,
+			}
+		}
+	);
+	const { t } = useI18n();
+	const clipSize = ref(0);
+	var resolveFn: (value: string | PromiseLike<string>) => void;
+	const showPanel = ref(false);
+	const open = (url: string) => {
+		showPanel.value = true;
+		setImgage(url);
+		return new Promise((resolve) => (resolveFn = resolve));
+	};
+	const close = () => {
+		showPanel.value = false;
+	};
+	//提交选中的T图片
+	const confirm = () => {
+		const base64 = getImageBase64();
+		resolveFn && resolveFn(base64);
+		close();
+	};
+
+	const data = reactive({
+		url: "",
+	});
+	const el = ref();
+	const box = ref();
+	const clipRef = ref();
+	const clipData = reactive({
+		top: 0,
+		left: 0,
+		width: 0,
+		height: 0,
+		img_width: 0,
+		img_height: 0,
+	});
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	const reload = () => {
+		if (!el.value) return;
+		const size = Math.min(
+			1,
+			el.value.offsetWidth / canvas.width,
+			el.value.offsetHeight / canvas.height
+		);
+		const width = size * canvas.width;
+		const height = size * canvas.height;
+		clipSize.value = Math.min(width, height);
+		clipData.left = 0;
+		clipData.top = 0;
+		clipData.width = props.isRatio ? clipSize.value : width;
+		clipData.height = props.isRatio ? clipSize.value : height;
+		clipData.img_width = width;
+		clipData.img_height = height;
+	};
+	window.addEventListener("resize", reload);
+	onDeactivated(() => {
+		window.removeEventListener("resize", reload);
+	});
+
+	const setImgage = (url: string) => {
+		if (!url) return;
+		const img = new Image();
+		img.onload = () => {
+			const width = img.width;
+			const height = img.height;
+			canvas.width = width;
+			canvas.height = height;
+			ctx?.clearRect(0, 0, width, height);
+			ctx?.drawImage(img, 0, 0, width, height);
+			nextTick(() => reload());
+		};
+		img.src = url;
+		data.url = url;
+	};
+	const canvasImageDataToBase64 = (imageData: any) => {
+		// 创建一个临时的canvas元素
+		const canvas = document.createElement("canvas");
+		canvas.width = imageData.width;
+		canvas.height = imageData.height;
+		const ctx = canvas.getContext("2d");
+		ctx?.putImageData(imageData, 0, 0);
+		const dataURL = canvas.toDataURL("image/png");
+		return dataURL;
+	};
+	const getImageBase64 = () => {
+		const scale = canvas.width / clipData.img_width;
+		const imageData = ctx?.getImageData(
+			clipData.left * scale,
+			clipData.top * scale,
+			clipData.width * scale,
+			clipData.height * scale
+		);
+		const base64 = canvasImageDataToBase64(imageData);
+		return base64;
+	};
+
+	// 移动裁剪框
+	const clipMousedown = (e: MouseEvent | TouchEvent) => {
+		e.preventDefault();
+		var pageX = 0;
+		var pageY = 0;
+		if (e.type == "touchstart") {
+			const touch = e["touches"][0];
+			pageX = touch.pageX;
+			pageY = touch.pageY;
+		} else {
+			pageX = e["pageX"];
+			pageY = e["pageY"];
+		}
+		const elInfo = box.value.getBoundingClientRect();
+		const clipInfo = clipRef.value.getBoundingClientRect();
+		// 鼠标相对元素的位置
+		const CX = pageX - clipInfo.x;
+		const CY = pageY - clipInfo.y;
+
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			e.preventDefault();
+			var pageX = 0;
+			var pageY = 0;
+			if (e.type == "touchmove") {
+				const touch = e["touches"][0];
+				pageX = touch.pageX;
+				pageY = touch.pageY;
+			} else {
+				pageX = e["pageX"];
+				pageY = e["pageY"];
+			}
+			let x = pageX - elInfo.x - CX;
+			let y = pageY - elInfo.y - CY;
+			if (x < 0) {
+				x = 0;
+			} else if (x > elInfo.width - clipInfo.width) {
+				x = elInfo.width - clipInfo.width;
+			}
+			if (y < 0) {
+				y = 0;
+			} else if (y > elInfo.height - clipInfo.height) {
+				y = elInfo.height - clipInfo.height;
+			}
+
+			clipData.top = y;
+			clipData.left = x;
+			clipData.img_width = elInfo.width;
+			clipData.img_height = elInfo.height;
+		};
+		const mouseup = () => {
+			window.removeEventListener("mousemove", mousemove);
+			window.removeEventListener("mouseup", mouseup);
+			window.removeEventListener("touchmove", mousemove);
+			window.removeEventListener("touchend", mouseup);
+		};
+		if (e.type == "touchstart") {
+			window.addEventListener("touchmove", mousemove);
+			window.addEventListener("touchend", mouseup);
+		} else {
+			window.addEventListener("mousemove", mousemove);
+			window.addEventListener("mouseup", mouseup);
+		}
+	};
+
+	// 移动裁剪框的四个边框
+	const mousedown = (
+		e: MouseEvent | TouchEvent,
+		type: "top" | "bottom" | "right" | "left"
+	) => {
+		const minWidth = 20;
+		const minHeight = 20;
+		const elInfo = box.value.getBoundingClientRect();
+		const R = elInfo.width - clipData.left - clipData.width;
+		const B = elInfo.height - clipData.top - clipData.height;
+		const noRatioMousemove = (e: MouseEvent | TouchEven)=>{
+			var x = 0;
+			var y = 0;
+			if (e.type == "touchmove") {
+				const touch = e["touches"][0];
+				x = touch.pageX - elInfo.x;
+				y = touch.pageY - elInfo.y;
+			} else {
+				x = e["pageX"] - elInfo.x;
+				y = e["pageY"] - elInfo.y;
+			}
+
+			if (type == "right") {
+				let width = x - clipData.left;
+				if (width + clipData.left > elInfo.width) {
+					width = elInfo.width - clipData.left;
+				}
+				if (width < minWidth) width = minWidth;
+				clipData.width = width;
+			} else if (type == "bottom") {
+				let height = y - clipData.top;
+				if (height + clipData.top > elInfo.height) {
+					height = elInfo.height - clipData.top;
+				}
+				if (height < minHeight) height = minHeight;
+				clipData.height = height;
+			} else if (type == "left") {
+				let left = x;
+				let width = clipData.width;
+				if (left < 0) {
+					left = 0;
+				} else if (left > elInfo.width - R - minWidth) {
+					left = elInfo.width - R - minWidth;
+				}
+				width = elInfo.width - R - left;
+				clipData.left = left;
+				clipData.width = width;
+				clipData.img_width = elInfo.width;
+				clipData.img_height = elInfo.height;
+			} else if (type == "top") {
+				let top = y;
+				let height = clipData.height;
+				if (top < 0) {
+					top = 0;
+				} else if (top > elInfo.height - B - minHeight) {
+					top = elInfo.height - B - minHeight;
+				}
+				height = elInfo.height - B - top;
+				clipData.top = top;
+				clipData.height = height;
+				clipData.img_width = elInfo.width;
+			}
+		}
+		const ratioMousemove = (e: MouseEvent | TouchEvent) => {
+			var x = 0;
+			var y = 0;
+			if (e.type == "touchmove") {
+				const touch = e["touches"][0];
+				x = touch.pageX - elInfo.x;
+				y = touch.pageY - elInfo.y;
+			} else {
+				x = e["pageX"] - elInfo.x;
+				y = e["pageY"] - elInfo.y;
+			}
+			if (type == "right" || type == "bottom") {
+				let width = x - clipData.left;
+				let height = y - clipData.top;
+				if (width + clipData.left > elInfo.width) {
+					width = elInfo.width - clipData.left;
+				}
+				if (height + clipData.top > elInfo.height) {
+					height = elInfo.height - clipData.top;
+				}
+
+				if (type == "right") {
+					if (width < minWidth) {
+						width = minWidth;
+					}
+					height = width;
+					if (height + clipData.top > elInfo.height) {
+						height = elInfo.height - clipData.top;
+						width = height;
+					}
+				} else if (type == "bottom") {
+					if (height < minHeight) {
+						height = minHeight;
+					}
+					width = height;
+					if (width + clipData.left > elInfo.width) {
+						width = elInfo.width - clipData.left;
+						height = width;
+					}
+				}
+				clipData.width = width;
+				clipData.height = height;
+			} else if (type == "left" || type == "top") {
+				let left = x;
+				let top = y;
+				let width = clipData.width;
+				let height = clipData.height;
+				if (type == "left") {
+					if (left < 0) {
+						left = 0;
+					} else if (left > elInfo.width - R - minWidth) {
+						left = elInfo.width - R - minWidth;
+					}
+					width = elInfo.width - R - left;
+					top = elInfo.height - B - width;
+					if (top < 0) {
+						top = 0;
+						width = height;
+						left = elInfo.width - R - width;
+					}
+					height = elInfo.height - B - top;
+				} else if (type == "top") {
+					if (top < 0) {
+						top = 0;
+					} else if (top > elInfo.height - B - minHeight) {
+						top = elInfo.height - B - minHeight;
+					}
+					height = elInfo.height - B - top;
+					left = elInfo.width - R - height;
+					if (left < 0) {
+						left = 0;
+						height = width;
+						top = elInfo.height - B - height;
+					}
+					width = elInfo.width - R - left;
+				}
+				clipData.top = top;
+				clipData.left = left;
+				clipData.width = width;
+				clipData.height = height;
+				clipData.img_width = elInfo.width;
+				clipData.img_height = elInfo.height;
+			}
+		}
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if(props.isRatio){
+				ratioMousemove(e)
+			}else{
+				noRatioMousemove(e)
+			}
+		};
+		const mouseup = () => {
+			window.removeEventListener("mousemove", mousemove);
+			window.removeEventListener("mouseup", mouseup);
+			window.removeEventListener("touchmove", mousemove);
+			window.removeEventListener("touchend", mouseup);
+		};
+		if (e.type == "touchstart") {
+			window.addEventListener("touchmove", mousemove);
+			window.addEventListener("touchend", mouseup);
+		} else {
+			window.addEventListener("mousemove", mousemove);
+			window.addEventListener("mouseup", mouseup);
+		}
+	};
+	const topMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "top");
+	};
+	const rightMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "right");
+	};
+	const bottomMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "bottom");
+	};
+	const leftMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "left");
+	};
+	defineExpose({
+		open,
+		close,
+	});
+</script>
+
+<style scoped lang="less">
+	.clip-header {
+		margin-top: 0.2rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 3.3rem;
+		border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
+		> .title {
+			font-family: Semibold;
+			font-size: 1.6rem;
+			color: #000;
+		}
+		.close{
+			cursor: pointer;
+		}
+	}
+	/* 弹窗主体 */
+	.crop-image-modal {
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+	}
+	.close-btn {
+		background: none;
+		border: none;
+		font-size: 24px;
+		cursor: pointer;
+		color: #666;
+		padding: 0;
+		line-height: 1;
+		opacity: 0.7;
+		transition: all 0.2s;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover {
+			opacity: 1;
+			color: #333;
+			transform: scale(1.1);
+		}
+	}
+
+	/* 弹窗内容 */
+	.modal-content {
+		// padding: 20px;
+		overflow: hidden;
+		background-color: #fff;
+		-webkit-overflow-scrolling: touch;
+		display: flex;
+		width: 47.2rem;
+		height: 35.20rem;
+		margin: 4rem auto;
+		> .clip{
+			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///9ra2sgNdccAAAARSURBVAjXY2A/wICMfjAgIwB8gwi84a8abQAAAABJRU5ErkJggg==);
+			flex: 1;
+			display: flex;
+		}
+		
+	}
+	.operation{
+		display: flex;
+		align-items: center;
+		width: 52rem;
+		margin: 0 auto;
+		gap: 2rem;
+		> .operation-btn{
+			cursor: pointer;
+		}
+		> .slider{
+			flex: 1;
+			:deep(.el-slider){
+				--el-slider-main-bg-color: #000;
+			}
+		}
+	}
+	.image-clip {
+		user-select: none;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> .box {
+			position: relative;
+			> img {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+			> .shade {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background-color: rgba(0, 0, 0, 0.5);
+			}
+			> .clip {
+				position: absolute;
+				cursor: move;
+				outline: 1px solid #39f;
+
+				> * {
+					position: absolute;
+				}
+				> .img {
+					pointer-events: none;
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+					> img {
+						position: absolute;
+						background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///9ra2sgNdccAAAARSURBVAjXY2A/wICMfjAgIwB8gwi84a8abQAAAABJRU5ErkJggg==);
+					}
+				}
+
+				> .top {
+					cursor: n-resize;
+				}
+				> .bottom {
+					cursor: s-resize;
+				}
+				> .right {
+					cursor: e-resize;
+				}
+				> .left {
+					cursor: w-resize;
+				}
+
+				--border: 4px;
+				--trbl: calc(0px - var(--border) / 2);
+				--ball-size: 8px;
+				--ball-trbl: calc(0px - var(--ball-size) / 2);
+				> div.top {
+					top: var(--trbl);
+					left: 0;
+					right: 0;
+					height: var(--border);
+				}
+
+				> div.bottom {
+					bottom: var(--trbl);
+					left: 0;
+					right: 0;
+					height: var(--border);
+				}
+				> div.left {
+					top: 0;
+					left: var(--trbl);
+					bottom: 0;
+					width: var(--border);
+				}
+				> div.right {
+					top: 0;
+					right: var(--trbl);
+					bottom: 0;
+					width: var(--border);
+				}
+				> span {
+					position: absolute;
+					width: var(--ball-size);
+					height: var(--ball-size);
+					border-radius: 50%;
+					background-color: #39f;
+				}
+				> span.top {
+					top: var(--ball-trbl);
+					left: 50%;
+					transform: translateX(-50%);
+				}
+				> span.right {
+					right: var(--ball-trbl);
+					top: 50%;
+					transform: translateY(-50%);
+				}
+				> span.bottom {
+					bottom: var(--ball-trbl);
+					left: 50%;
+					transform: translateX(-50%);
+				}
+				> span.left {
+					left: var(--ball-trbl);
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+		}
+	}
+
+	/* 空状态 */
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		color: #666;
+		min-height: 300px;
+		flex: 1;
+		.empty-icon {
+			font-size: 48px;
+			margin-bottom: 16px;
+			opacity: 0.5;
+		}
+
+		p {
+			font-size: 16px;
+			margin: 0;
+		}
+	}
+
+	/* 弹窗底部 */
+	.modal-footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		flex-shrink: 0;
+		gap: 1.6rem;
+		// margin-top: 6.6rem;
+		> div {
+			cursor: pointer;
+			width: 7.7rem;
+			text-align: center;
+			font-size: 1.2rem;
+			line-height: 2.8rem;
+			font-weight: 500;
+			border-radius: 2rem;
+			border: 1px solid #000;
+		}
+		.image-count{
+			background-color: #fff;
+			color: #000;
+		}
+		.image-submit{
+			background-color: #000;
+			color: #fff;
+		}
+	}
+	.image-count {
+		font-size: 14px;
+		color: #666;
+		font-weight: 500;
+	}
+</style>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 31f6a52..df676dc 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -200,5 +200,10 @@ export default {
 	threeModel: {
 		loading: 'Loading',
 		download: 'Download'
+	},
+	clipDialog: {
+		title: 'Upload your profile photo',
+		cancel: 'Cancel',
+		confirm: 'Save'
 	}
 }
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index e7e33e4..0e666c7 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -197,5 +197,10 @@ export default {
 	threeModel: {
 		loading: '加载中',
 		download: '下载'
+	},
+	clipDialog: {
+		title: '上传您的个人资料照片',
+		cancel: '取消',
+		confirm: '保存'
 	}
 }
diff --git a/src/views/home/setting/General.vue b/src/views/home/setting/General.vue
index a6e754a..6d872db 100644
--- a/src/views/home/setting/General.vue
+++ b/src/views/home/setting/General.vue
@@ -31,6 +31,7 @@
 		<div class="label">{{ $t('Home.logoutDevice') }}</div>
 		<button class="logout-btn" @click="logout">{{ $t('Home.logout') }}</button>
 	</div>
+	<clip-dialog ref="clipDialogRef" />
 </template>
 
 <script setup lang="ts">
@@ -41,6 +42,8 @@
 	import { useI18n } from 'vue-i18n'
 	import { uploadImage } from '@/api/upload'
 	import { UpdateUserAvatar, getAvatarLimit } from '@/api/user'
+	import clipDialog from '@/components/clipDialog.vue'
+	import { fileToBase64, base64Tofile } from '../../../components/Canvas/tools/tools'
 	const router = useRouter()
 	const { locale } = useI18n()
 	const userInfoStore = useUserInfoStore()
@@ -50,6 +53,7 @@
 		{ label: '中文', value: 'CHINESE_SIMPLIFIED' }
 	])
 	const remainingNum = ref(0)
+	const clipDialogRef = ref<typeof clipDialog>()
 	const changeLang = (value: string) => {
 		locale.value = value
 		localStorage.setItem('language', value)
@@ -72,13 +76,17 @@
 		const input = document.createElement('input')
 		input.type = 'file'
 		input.accept = 'image/png, image/jpeg, image/jpg'
-		input.addEventListener('change', (e) => {
+		input.addEventListener('change', async (e) => {
 			const file = e.target.files[0]
-			const formData = new FormData()
-			formData.append('avatar', file)
-			UpdateUserAvatar(formData).then((res) => {
-				userInfoStore.updateUserInfo({avatar: res})
-				getAvatarLimitNum()
+			let base64Img = await fileToBase64(file)
+			clipDialogRef.value?.open(base64Img).then((base64: string)=>{
+				const fileData = base64Tofile(base64,file.name)
+				const formData = new FormData()
+				formData.append('avatar', fileData)
+				UpdateUserAvatar(formData).then((res) => {
+					userInfoStore.updateUserInfo({avatar: res})
+					getAvatarLimitNum()
+				})
 			})
 		})
 		input.click()

From 43cf097a2acd9cde950e2da260e1965f56ddf2fc Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Fri, 27 Mar 2026 09:50:09 +0800
Subject: [PATCH 13/21] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E6=A9=A1=E7=9A=AE=E6=93=A6=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/AISelectboxToolManager.ts           |  5 +++--
 .../manager/events/CanvasEventManager.js        | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
index 7ac7371..a08ce87 100644
--- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
@@ -221,12 +221,13 @@ export class AISelectboxToolManager {
 		if (!this.demoObject) return
 		const fobject = this.demoObject
 		this.clearDemoObject()
-		const canvas = getObjectAlphaToCanvas(fobject, null, 0, { r: 255, g: 0, b: 0, a: 255 });
+		const tcanvas = await this.createStaticCanvas(fobject)
+		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, { r: 255, g: 0, b: 0, a: 255 });
+		const arr = traceImageContour(canvas);
 		const scaleY = fobject.scaleY
 		const scaleX = fobject.scaleX
 		const top = fobject.top
 		const left = fobject.left
-		const arr = traceImageContour(canvas);
 		let minX = fobject.width;
 		let minY = fobject.height;
 		const str = arr.map((v) => {
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
index c94c2a2..bdd0d42 100644
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -753,6 +753,23 @@ export class CanvasEventManager {
 		this.canvas.on("object:removed", (e) => {
 			// updateLayers(e);
 		});
+		this.canvas.on("erasing:start", (e) => {
+			// console.log("erasing:start", e);
+		});
+		this.canvas.on("erasing:end", async (e) => {
+			// console.log("erasing:end", e);
+			const targets = e.targets;
+			var isRecord = false;
+			for (let i = 0; i < targets.length; i++) {
+				const target = targets[i];
+				const id = target?.info?.id;
+				if (id) {
+					isRecord = true;
+					await this.layerManager.updateLayerThumbnailsById(id)
+				}
+			}
+			if (isRecord) this.stateManager.recordState();
+		});
 	}
 	setupDoubleClickEvents() {
 		// 双击处理

From 3593a5ee4d0d799c21f5e34ca15846c4c7837484 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Fri, 27 Mar 2026 09:57:41 +0800
Subject: [PATCH 14/21] =?UTF-8?q?bugfix:=20=E5=BC=95=E7=94=A8=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88&projectID=E4=BC=A0=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/components/Agent.vue | 12 +++++-------
 src/views/home/components/Input.vue       |  9 +++++----
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index 116c54f..57a949b 100644
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -56,7 +56,7 @@
 	const isGenerating = ref(false)
 	const isPaused = ref(false) // 标记是否为主动暂停
 	const params = reactive<AgentParamsType>({
-		projectID: projectStore.state.id,
+		projectID: null,
 		message: '',
 		token: userStore.state.token,
 		versionID: '',
@@ -170,13 +170,16 @@
 		const abortController = createAbortController()
 
 		// console.log('token---', params.token, '参数---', params)
-
+		params.projectID = projectStore.state.id
 		try {
 			const urlParams = new URLSearchParams<AgentParamsType>({
 				...params,
 				configParams: JSON.stringify(params.configParams)
 			})
 			const BASEURL = import.meta.env.VITE_APP_URL
+			// console.log('params', params)
+
+			// debugger
 			const response = await fetch(`${BASEURL}${chatUrl}?${urlParams.toString()}`, {
 				method: 'GET',
 				signal: abortController.signal
@@ -609,11 +612,6 @@
 			return
 		}
 		const { ancestors, current } = data
-		current.dialogue.forEach((item) => {
-			if (item.webAddress) {
-				console.log(item)
-			}
-		})
 
 		const imgList = []
 		const ancestorsList = []
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 9acb96c..2992da0 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -14,7 +14,7 @@
 						<img
 							:src="image.url || image"
 							class="preview-image"
-							@click="previewImage(image.url)"
+							@click="previewImage(image.url || image)"
 						/>
 						<div class="image-remove-btn" @click="removeImage(index, image)">
 							<SvgIcon name="delete" size="16" />
@@ -824,7 +824,7 @@
 	const handleQuote = (url: string) => {
 		const hasQuoted = quoteList.value.includes(url)
 		if (hasQuoted) return
-		quoteList.value.push(url)
+		quoteList.value[0] = url
 	}
 	onUnmounted(() => {
 		MyEvent.remove('quote', handleQuote)
@@ -1066,10 +1066,11 @@
 				width: 13rem;
 				color: #fff;
 				border-radius: 4.2rem;
-				font-family: 'MSemiBold';
+				font-family: 'SemiBold';
 				font-weight: 600;
-				font-size: 1.28rem;
+				font-size: 1.3rem;
 				cursor: pointer;
+				column-gap: 0.3rem;
 				.shining-icon {
 					width: 1.4rem;
 					height: 1.4rem;

From a8aa9deea2df0b3683e2a3d5bc0df88c3245a913 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Fri, 27 Mar 2026 10:22:13 +0800
Subject: [PATCH 15/21] fix

---
 .../Canvas/FlowCanvas/components/tools/my-textTools.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue b/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
index 5c92f70..ffa3bcb 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="my-textTools">
-		<input class="color" type="color" ref="colorInput" @change="changeColor" />
+		<input class="color" type="color" v-model="textStyle['--font-color']" ref="colorInput" @change="changeColor" />
 		<div class="interval"></div>
 		<div class="fontFamily">
 			<my-select v-model="textStyle['--font-family']" @change="changeFontFamily"  :list="fontFamilyList[locale]" >

From f9f4d3669eacc6737d351f7689625310d2d87ddc Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Fri, 27 Mar 2026 11:12:39 +0800
Subject: [PATCH 16/21] 111

---
 src/views/home/left-nav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
index fced71d..97c4972 100644
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -44,7 +44,7 @@
 					<span class="label" v-show="!item.edit">{{ item.name }}</span>
 					<el-popover
 						placement="right"
-						trigger="contextmenu"
+						trigger="hover"
 						width="10rem"
 						popper-style="
 							padding: .6rem 0.7rem;
@@ -54,7 +54,7 @@
 						v-model:visible="item.visible"
 					>
 						<template #reference>
-							<span @click.stop="item.visible = !item.visible" class="icon">
+							<span @click.stop class="icon">
 								<svg-icon name="more" size="16" />
 							</span>
 						</template>

From 185a041962a35f64dc016cbd664751ca7a297ce8 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Fri, 27 Mar 2026 11:35:17 +0800
Subject: [PATCH 17/21] fix

---
 src/views/home/left-nav.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
index 97c4972..04c3abd 100644
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -44,7 +44,7 @@
 					<span class="label" v-show="!item.edit">{{ item.name }}</span>
 					<el-popover
 						placement="right"
-						trigger="hover"
+						trigger="contextmenu"
 						width="10rem"
 						popper-style="
 							padding: .6rem 0.7rem;
@@ -54,7 +54,7 @@
 						v-model:visible="item.visible"
 					>
 						<template #reference>
-							<span @click.stop class="icon">
+							<span @click.stop="openPopover(item)" class="icon">
 								<svg-icon name="more" size="16" />
 							</span>
 						</template>
@@ -207,6 +207,12 @@
 			}
 		})
 	}
+	const openPopover = (item: any) => {
+		list.value.forEach((item: any) => {
+			item.visible = false
+		})
+		item.visible = !item.visible
+	}
 	onMounted(() => {
 		MyEvent.add('newTitle', replaceTitle)
 	})

From 40c4b7f8ac6cbac852999c79ffce0af5d52d33ab Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Fri, 27 Mar 2026 11:45:06 +0800
Subject: [PATCH 18/21] =?UTF-8?q?bugfix:=20=20=E5=88=87=E6=8D=A2=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E6=97=B6=E5=88=9D=E5=A7=8B=E5=8C=96=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/index.vue      |  1 +
 src/views/home/components/Input.vue | 31 +++++++++++++++++++----------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue
index f7eaa08..fb54be7 100644
--- a/src/views/home/agent/index.vue
+++ b/src/views/home/agent/index.vue
@@ -124,6 +124,7 @@
 			projectStore.clearProject()
 			if (newVal) {
 				handleGetProjectInfoAndHistory()
+				MyEvent.emit('projectChange')
 			}
 		}
 	)
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 2992da0..1149da5 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -494,12 +494,12 @@
 		editorRef.value?.addEventListener('input', removePlaceholderOnInput)
 	}
 
-	const toogltReportTag = () => {
+	const toogltReportTag = (clear = false) => {
 		stopTypewriter() // 移除标签时停止打字机效果
 		// 清理掉已被删除的标签引用（从 DOM 中移除的元素）
 		reportTags.value = reportTags.value.filter((tag) => tag.parentNode !== null)
 
-		if (reportTags.value.length > 0) {
+		if (reportTags.value.length > 0 ) {
 			// 移除所有标签及其关联的零宽空格
 			reportTags.value.forEach((tag) => {
 				if (
@@ -722,14 +722,6 @@
 		})
 	})
 
-	// 初始化编辑器高度
-	onMounted(() => {
-		MyEvent.add('quote', handleQuote)
-		nextTick(() => {
-			autoResizeEditor()
-		})
-	})
-
 	const typeValue = ref<string>('')
 	const areaValue = ref<string>('')
 	const styleValue = ref<string>('')
@@ -826,8 +818,27 @@
 		if (hasQuoted) return
 		quoteList.value[0] = url
 	}
+
+	const handleInitInput = () => {
+		inputValue.value = ''
+		uploadedImages.value = []
+		quoteList.value = []
+		toogltReportTag(true)
+		if (editorRef.value) {
+			editorRef.value.innerHTML = ''
+		}
+	}
+
+	onMounted(() => {
+		MyEvent.add('quote', handleQuote)
+		MyEvent.add('projectChange', handleInitInput)
+		nextTick(() => {
+			autoResizeEditor()
+		})
+	})
 	onUnmounted(() => {
 		MyEvent.remove('quote', handleQuote)
+		MyEvent.remove('projectChange', handleInitInput)
 	})
 	// 暴露方法给父组件
 	defineExpose({

From 780d3a3e70ab7f13e1692514913c04dd943907cf Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Fri, 27 Mar 2026 11:50:13 +0800
Subject: [PATCH 19/21] =?UTF-8?q?=E6=9F=A5=E4=B8=8D=E5=88=B0=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E5=B0=B1=E8=B7=B3=E8=BD=AC=E5=88=9B=E5=BB=BA=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/en.ts                 |  3 ++-
 src/lang/zh-cn.ts              |  3 ++-
 src/views/home/agent/index.vue | 10 +++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 291813d..b49ec3e 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -81,7 +81,8 @@ export default {
 		userAgreement: 'User Agreement',
 		privacyPolicy: 'Privacy Policy',
 		view: 'View',
-		remainingNum: 'Remaining number of times to upload profile picture:'
+		remainingNum: 'Remaining number of times to upload profile picture:',
+		notFound: 'Project not found',
 	},
 	Country: {
 		unitedStates: 'United States',
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 397ef81..2c9e030 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -82,7 +82,8 @@ export default {
 		userAgreement: '用户协议',
 		privacyPolicy: '隐私政策',
 		view: '查看',
-		remainingNum: '剩余上传头像次数：'
+		remainingNum: '剩余上传头像次数：',
+		notFound: '项目不存在',
 	},
 	Country: {
 		unitedStates: '美国',
diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue
index f7eaa08..9ac97bb 100644
--- a/src/views/home/agent/index.vue
+++ b/src/views/home/agent/index.vue
@@ -36,10 +36,13 @@
 	import { useProjectStore } from '@/stores'
 	import { getProjectInfo } from '@/api/agent'
 	import { clearNodeChat, getNodeAncestors } from '@/api/versitonTree'
-	import { useRoute } from 'vue-router'
+	import { useRoute, useRouter } from 'vue-router'
 	import MyEvent from '@/utils/myEvent'
+	import { useI18n } from 'vue-i18n'
 
 	const route = useRoute()
+	const router = useRouter()
+	const { t } = useI18n()
 	const projectStore = useProjectStore()
 
 	const previewRef = ref(null)
@@ -90,6 +93,11 @@
 	const handleGetProjectInfoAndHistory = () => {
 		handleOpenSketch()
 		getProjectInfo({ id: route.params.id }).then((res) => {
+			if(!res) {
+				router.push({ name: 'mainInput' })
+				ElMessage.warning(t('Home.notFound'))
+				return
+			}
 			if (res) agentRef.value.setChatInfo(res)
 			let data = res?.project || res
 			if (data?.latestNodeId) data.nodeId = data.latestNodeId

From c707416cc14c217291d6ea58645dc809672f4bfc Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Fri, 27 Mar 2026 15:31:58 +0800
Subject: [PATCH 20/21] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=93=E5=BC=803d?=
 =?UTF-8?q?=E4=BC=9A=E5=87=BA=E7=8E=B0=E4=B8=8A=E6=AC=A13d=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Canvas/FlowCanvas/flow-canvas.vue | 2 +-
 src/components/Canvas/components/base-modal.vue  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 3b11ab2..15972e8 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -62,7 +62,7 @@
 			<threeModel :currentData="currentData" />
 		</template>
 	</baseModal>
-			<Assistant />
+			<!-- <Assistant /> -->
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Canvas/components/base-modal.vue b/src/components/Canvas/components/base-modal.vue
index c3c81ea..f127769 100644
--- a/src/components/Canvas/components/base-modal.vue
+++ b/src/components/Canvas/components/base-modal.vue
@@ -2,6 +2,7 @@
 	<el-dialog
 		class="base-modal"
 		v-model="showDialog"
+		destroy-on-close
 		align-center
 		:show-close="false"
 		:width="modalWidth"

From 0be1c9743c25accf54cf9d18c5dde534638d0259 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Fri, 27 Mar 2026 16:07:13 +0800
Subject: [PATCH 21/21] =?UTF-8?q?=E7=95=A5=E7=95=A5=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/depth-canvas.ts                       | 13 ++++
 src/api/user.ts                               | 15 ++++
 .../Canvas/DepthCanvas/depth-canvas.vue       |  1 +
 .../manager/AISelectboxToolManager.ts         | 77 ++++++++++++++++---
 .../DepthCanvas/manager/CanvasManager.ts      |  1 +
 .../DepthCanvas/manager/LayerManager.ts       |  4 +
 .../DepthCanvas/manager/StateManager.ts       |  4 +-
 src/views/home/test.vue                       |  4 +-
 src/views/nuic/index.vue                      |  1 +
 src/views/nuic/nuic-2.vue                     | 41 ++++++----
 10 files changed, 129 insertions(+), 32 deletions(-)

diff --git a/src/api/depth-canvas.ts b/src/api/depth-canvas.ts
index 76a1db7..8570ee8 100644
--- a/src/api/depth-canvas.ts
+++ b/src/api/depth-canvas.ts
@@ -39,3 +39,16 @@ export const deleteDepthCanvas = (id: string) => {
 		loading: true,
 	})
 }
+
+/**
+ * 获取分隔后图片
+ * @param data 分隔参数数据
+ * @returns 分隔后图片数据
+ */
+export const getSegAnythingImage = (data: object) => {
+	return request({
+		url: `/api/python/segAnything`,
+		method: 'post',
+		data,
+	})
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index d96a8fc..ff68dd5 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -133,3 +133,18 @@ export const getAvatarLimit = () => {
 	})
 }
 
+/**
+ * 获取用户风格图片列表
+ * @param params 获取用户风格图片列表的参数	
+ * @param params.pageNum 页码
+ * @param params.pageSize 每页数量
+ * @returns 用户风格图片列表
+*/
+export const GetUserStyleImages = (params) => {
+	return request({
+		url: '/api/user/style/images',
+		method: 'get',
+		params,
+		loading: true,
+	})
+}
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index e4578cd..aa85dd5 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -105,6 +105,7 @@
 			const json = canvasManager.processCanvasDisUrlJSON(canvasData)
 			await canvasManager.loadJSON(json)
 		}
+		layerManager.setActiveFirstLayer()
 		globalStore.setLoading(false)
 
 		stateManager.onMounted()
diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
index a08ce87..fda5d43 100644
--- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
@@ -1,6 +1,8 @@
 import { fabric } from 'fabric-with-all'
 import { OperationType } from '../tools/layerHelper'
 import { getObjectAlphaToCanvas, traceImageContour, cloneObjects } from '../tools/canvasMethod'
+import { getSegAnythingImage } from '@/api/depth-canvas'
+import { useGlobalStore, useUserInfoStore } from '@/stores'
 
 /** 智能框选工具管理器 */
 export class AISelectboxToolManager {
@@ -10,6 +12,7 @@ export class AISelectboxToolManager {
 	layerManager: any
 	toolManager: any
 
+	targetObject: any
 	isDragging: boolean = false
 	startX: number = 0
 	startY: number = 0
@@ -54,6 +57,19 @@ export class AISelectboxToolManager {
 		this.clear();
 		this.createDemoObject()
 		this.tcanvas = null;
+		this.targetObject = null;
+		this.canvasManager.getObjects().forEach((obj) => {
+			if (obj?.info?.isOriginal) {
+				this.targetObject = obj.toObject();
+			}
+		})
+		// const image = this.layerManager.getActiveLayer()
+		// if (image && image.info.isAiSelect) {
+		// 	this.targetObject = image;
+		// } else {
+		// 	this.targetObject = null;
+		// }
+
 	}
 	clear() {
 		console.log("清除智能框选工具")
@@ -121,6 +137,7 @@ export class AISelectboxToolManager {
 	}
 	// 处理绘制图像
 	async handleDrawImage(object: fabric.Object) {
+		if (!this.targetObject) return;
 		const tcanvas = await this.createStaticCanvas(this.demoObject)
 		tcanvas.add(object)
 		tcanvas.renderAll();
@@ -129,6 +146,7 @@ export class AISelectboxToolManager {
 	}
 	// 处理图像删除
 	async handleRemoveImage(object: fabric.Object) {
+		if (!this.targetObject) return;
 		const tcanvas = await this.createStaticCanvas(this.demoObject)
 		const rcanvas = await this.createStaticCanvas(object)
 		const tempCanvas = rcanvas.toCanvasElement();
@@ -147,6 +165,7 @@ export class AISelectboxToolManager {
 	}
 
 	mouseDownEvent(e) {
+		if (!this.targetObject) return;
 		const tool = this.toolManager.currentTool.value
 		const tools = [OperationType.AISELECT_ADD, OperationType.AISELECT_REMOVE]
 		if (!tools.includes(tool)) return;
@@ -157,6 +176,7 @@ export class AISelectboxToolManager {
 		this.createIndicatorObject()
 	}
 	mouseMoveEvent(e) {
+		if (!this.targetObject) return;
 		if (!this.isDragging) return;
 		var width = e.absolutePointer.x - this.startX
 		var height = e.absolutePointer.y - this.startY
@@ -173,7 +193,8 @@ export class AISelectboxToolManager {
 		this.indicatorObject.set({ width, height, left, top })
 		this.canvasManager.canvas.renderAll()
 	}
-	mouseUpEvent(e) {
+	async mouseUpEvent(e) {
+		if (!this.targetObject) return;
 		if (!this.isDragging) return;
 		this.isDragging = false;
 		const object = this.indicatorObject.toJSON("evented")
@@ -182,20 +203,32 @@ export class AISelectboxToolManager {
 		this.clearIndicatorObject()
 		this.canvasManager.canvas.renderAll()
 
-		const rect = new fabric.Rect({
-			left: object.left,
-			top: object.top,
-			width: object.width,
-			height: object.height,
-			fill: '#f00',
-			strokeWidth: 0,
-		})
+		useGlobalStore().setLoading(true)
+		const x1 = Math.round(object.left)
+		const y1 = Math.round(object.top)
+		const x2 = Math.round(object.left + object.width)
+		const y2 = Math.round(object.top + object.height)
+		const data = {
+			type: "box",
+			box: [x1, y1, x2, y2],
+		}
+		const url = await this.getSegAnythingImage(data)
+		const image = await this.loadImageToObject(url)
+		// const rect = new fabric.Rect({
+		// 	left: object.left,
+		// 	top: object.top,
+		// 	width: object.width,
+		// 	height: object.height,
+		// 	fill: '#f00',
+		// 	strokeWidth: 0,
+		// })
 		const currentTool = this.toolManager.currentTool.value
 		if (currentTool === OperationType.AISELECT_ADD) {
-			this.handleDrawImage(rect)
+			await this.handleDrawImage(image)
 		} else if (currentTool === OperationType.AISELECT_REMOVE) {
-			this.handleRemoveImage(rect)
+			await this.handleRemoveImage(image)
 		}
+		useGlobalStore().setLoading(false)
 	}
 
 
@@ -218,6 +251,7 @@ export class AISelectboxToolManager {
 		absolutePositioned: true,
 	};
 	async createSelectbox() {
+		if (!this.targetObject) return;
 		if (!this.demoObject) return
 		const fobject = this.demoObject
 		this.clearDemoObject()
@@ -263,7 +297,26 @@ export class AISelectboxToolManager {
 		this.toolManager.setTool(OperationType.SELECT)
 	}
 
-
+	/** 获取分隔后图片 */
+	async getSegAnythingImage(obj) {
+		return new Promise((resolve, reject) => {
+			if (!this.targetObject) return;
+			const user_id = useUserInfoStore().state.userInfo.id;
+			const image_path = this.targetObject.src;
+			const data = {
+				image_path,
+				user_id,
+				...obj,
+			}
+			getSegAnythingImage(data).then((res) => {
+				console.log(res)
+				resolve(res)
+			}).catch((error) => {
+				console.error(error);
+				useGlobalStore().setLoading(false)
+			})
+		});
+	}
 
 	dispose() {
 		this.clear()
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index 5c3b944..4c1d16c 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -92,6 +92,7 @@ export class CanvasManager {
 							id: createId("image"),
 							name: "图片图层",
 							lock: true,
+							isOriginal: true,
 						}
 					})
 					image = img
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index d3471a2..6d9e74b 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -31,6 +31,10 @@ export class LayerManager {
 			this.stateManager.toolManager.setTool(OperationType.SELECT)
 		}
 	}
+	setActiveFirstLayer() {
+		this.setActiveID(this.layers.value[0]?.info?.id || "")
+	}
+
 	getActiveLayer() {
 		return this.getLayerById(this.activeID.value)
 	}
diff --git a/src/components/Canvas/DepthCanvas/manager/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index 6e7651b..bccf835 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -1,5 +1,5 @@
 import { ref, computed } from "vue";
-import { ElMessageBox } from 'element-plus'
+import { OperationType } from '../tools/layerHelper'
 import i18n from '@/lang'
 const t = i18n.global.t
 
@@ -95,6 +95,7 @@ export class StateManager {
 		this.running.value = true
 		this.historyIndex.value = index
 		this.canvasManager.loadJSON(state.canvas, false).then(() => {
+			this.toolManager.setTool(OperationType.SELECT)
 			this.event.emit('canvas:undo', state)
 			this.running.value = false
 		})
@@ -108,6 +109,7 @@ export class StateManager {
 		this.running.value = true
 		this.historyIndex.value = index
 		this.canvasManager.loadJSON(state.canvas, false).then(() => {
+			this.toolManager.setTool(OperationType.SELECT)
 			this.event.emit('canvas:redo', state)
 			this.running.value = false
 		})
diff --git a/src/views/home/test.vue b/src/views/home/test.vue
index 2e7c94b..eae7529 100644
--- a/src/views/home/test.vue
+++ b/src/views/home/test.vue
@@ -11,12 +11,12 @@
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
 	const url =
-		'https://www.minio-api.aida.com.hk/fida-test/furniture/sketches/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260320%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260320T020948Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7dc192bac887bce7b02c99d7037c08d9d684310f00add9b0e63b74b36ee63d37'
+		'https://minio-api.aida.com.hk/fida-public-bucket/furniture/sketches/e3082a38-55d2-4313-ad53-55aad715cf67.png'
 	const openCanvas = () => {
 		myEvent.emit('openFlowCanvas', { url })
 	}
 	const openDepthCanvas = () => {
-		myEvent.emit('openDepthCanvas', { url, canvasId: '69c34539ce996b52f07e625f' })
+		myEvent.emit('openDepthCanvas', { url, canvasId: '' })
 	}
 	onMounted(() => {
 		if (route.query.depth) {
diff --git a/src/views/nuic/index.vue b/src/views/nuic/index.vue
index c31d4c6..732c772 100644
--- a/src/views/nuic/index.vue
+++ b/src/views/nuic/index.vue
@@ -62,6 +62,7 @@
 				}
 			})
 		} else {
+			data.vibe = JSON.parse(data.vibe)
 			onSubmit(data)
 		}
 	}
diff --git a/src/views/nuic/nuic-2.vue b/src/views/nuic/nuic-2.vue
index 1b6b85b..f925d17 100644
--- a/src/views/nuic/nuic-2.vue
+++ b/src/views/nuic/nuic-2.vue
@@ -3,9 +3,9 @@
 		<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
 		<div class="list">
 			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
-				<img :src="v.url" draggable="false" />
+				<img :src="v.imageUrl" draggable="false" />
 				<div class="active" v-show="v.active">
-					<span>{{ v.title }}</span>
+					<span>{{ v.styleName }}</span>
 				</div>
 			</div>
 		</div>
@@ -22,28 +22,35 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { GetUserStyleImages } from '@/api/user'
 	const router = useRouter()
 	const emit = defineEmits(['next'])
-	const list = ref([
-		{ id: 1, url: '/image/nuic/style-1.png', title: '凳子', active: false },
-		{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
-		{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
-		{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
-		{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
-		{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
-		{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
-		{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
-	])
+	const list = ref([])
+	const pageSize = ref(8)
+	const pageNum = ref(1)
+	const totalPages = ref(1)
 	const onNext = () => {
 		const data = {
-			vibe: list.value
-				.filter((v) => v.active)
-				.map((v) => v.id)
-				.join(',')
+			vibe: JSON.stringify(list.value.filter((v) => v.active).map((v) => v.id))
 		}
 		emit('next', data)
 	}
-	const onLoadMore = () => {}
+	const onLoadMore = () => {
+		GetUserStyleImages({
+			pageNum: pageNum.value,
+			pageSize: pageSize.value
+		}).then((res) => {
+			if (!res) return
+			list.value = res.images.map((v) => ({
+				...v,
+				active: false
+			}))
+			totalPages.value = res.totalPages
+			pageNum.value++
+			if (pageNum.value > totalPages.value) pageNum.value = 1
+		})
+	}
+	onLoadMore()
 </script>
 
 <style lang="less" scoped>