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/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/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/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
index 58f33bf..879e978 100644
--- a/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
+++ b/src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
@@ -10,7 +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="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" />
@@ -21,6 +28,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] }
@@ -37,22 +46,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) => {
@@ -61,6 +70,9 @@
 	const onCreate = () => {
 		stateManager.aiSelectboxToolManager.createSelectbox()
 	}
+	const onReset = () => {
+		stateManager.aiSelectboxToolManager.resetDemoObject()
+	}
 </script>
 <style lang="less" scoped>
 	// 淡入淡出动画
@@ -108,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/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 da5b100..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,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">{{ $t('DepthCanvas.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">{{ $t('DepthCanvas.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..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"
@@ -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..4c2dd95 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -2,13 +2,13 @@
 	<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>
 		</div>
-		<div class="content" v-if="isShow" v-show="show">
-			<!-- <basic-info :object="activeObject" /> -->
+		<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" />
 		</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()
@@ -49,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;
@@ -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..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,79 +1,10 @@
 <template>
 	<div class="shape-setting h">
 		<div>
-			<div class="title">Position</div>
+			<div class="title">{{ $t('DepthCanvas.appearance') }}</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">
-				<div>
-					<span class="label">Opacity</span>
+					<span class="label">{{ $t('DepthCanvas.opacity') }}</span>
 					<depth-input
 						type="number"
 						after="%"
@@ -86,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"
@@ -96,12 +27,32 @@
 						@change="onChange"
 					/>
 				</div>
+				<div v-else-if="object.type === 'path'">
+					<span class="label">{{ $t('DepthCanvas.strokeWidth') }}</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>
+					<span class="label">{{ $t('DepthCanvas.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/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..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,13 +3,13 @@
 		<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>
 			</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..6cbb258 100644
--- a/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
@@ -2,10 +2,12 @@
 	<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
+			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>
@@ -220,45 +225,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 +282,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 5fce2d0..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()
@@ -101,6 +102,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..d3471a2 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -3,7 +3,9 @@ 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'
+import i18n from '@/lang/index'
+const t = i18n.global.t
 
 export class LayerManager {
 	stateManager: any
@@ -134,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,
@@ -206,7 +209,7 @@ export class LayerManager {
 			fill: 'transparent',
 			info: {
 				id: createId("image"),
-				name: '空图层',
+				name: t('DepthCanvas.emptyLayer'),
 			}
 		})
 		this.setLayerPosition(emptyObject)
@@ -226,7 +229,7 @@ export class LayerManager {
 			evented: false,
 			info: {
 				id: createId("group"),
-				name: '智能选区组',
+				name: t('DepthCanvas.aiGroupLayer'),
 				showChildren: true,
 				...(options?.info || {}),
 			}
@@ -245,7 +248,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("text"),
-				name: '文本图层',
+				name: t('DepthCanvas.textLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -263,7 +266,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("rect"),
-				name: '矩形图层',
+				name: t('DepthCanvas.rectLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -274,25 +277,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: '直线图层',
+				name: t('DepthCanvas.lineLayer'),
 				...(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) {
@@ -302,7 +307,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("ellipse"),
-				name: '椭圆图层',
+				name: t('DepthCanvas.ellipseLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -321,7 +326,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("triangle"),
-				name: '三角形图层',
+				name: t('DepthCanvas.triangleLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -341,7 +346,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("star"),
-				name: '五角星图层',
+				name: t('DepthCanvas.starLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -353,19 +358,19 @@ 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"),
-				name: '箭头图层',
+				id: createId("arrow"),
+				name: t('DepthCanvas.arrowLayer'),
 				...(options?.info || {}),
 			}
 		});
@@ -395,7 +400,7 @@ export class LayerManager {
 					...(options || {}),
 					info: {
 						id: createId("image"),
-						name: "图片图层",
+						name: t('DepthCanvas.imageLayer'),
 						...(options?.info || {}),
 					}
 				})
@@ -419,7 +424,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/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 => {
diff --git a/src/lang/en.ts b/src/lang/en.ts
index df676dc..291813d 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',
@@ -201,6 +203,50 @@ export default {
 		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",
+		create: "Create",
+		reset: "Reset"
+	},
 	clipDialog: {
 		title: 'Upload your profile photo',
 		cancel: 'Cancel',
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 0e666c7..397ef81 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: '美国',
@@ -153,7 +154,7 @@ export default {
 		quote: '引用',
 		delete: '删除',
 		edit: '编辑',
-		generatingReport:'正在为您生成报告,可能需要几分钟时间,生成期间你可以继续进行其他任务'
+		generatingReport: '正在为您生成报告,可能需要几分钟时间,生成期间你可以继续进行其他任务'
 	},
 
 	// Version Tree
@@ -198,6 +199,50 @@ export default {
 		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: "擦除",
+		create: "创建",
+		reset: "重置"
+	},
 	clipDialog: {
 		title: '上传您的个人资料照片',
 		cancel: '取消',
diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index 789c708..116c54f 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 = []
diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index ee5a4ee..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 && isLast" />
+				<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(() => {
@@ -318,12 +326,14 @@
 					width: 100%;
 					height: 100%;
 					border-radius: 50%;
+					object-fit: cover;
 				}
 			}
 			.message-context {
 				line-height: 2rem;
 				font-size: 1.4rem;
 				width: 82%;
+				word-break: break-word;
 			}
 			&.is-user .message-context {
 				width: fit-content;
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 6f17ef1..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,16 +35,19 @@
 	.report-card {
 		cursor: pointer;
 		width: 100%;
-		margin: 2.4rem 0;
+		height: 11.2rem;
+		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 +64,7 @@
 
 		&-header {
 			font-family: 'Medium';
-			font-size: 1.6rem;
+			font-size: 1.2rem;
 			margin-bottom: 1.3rem;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -80,7 +83,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(() => {
diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
index 9f47937..fced71d 100644
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -16,13 +16,13 @@
 			<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" />
 			</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%;