diff --git a/src/assets/icons/dc/hide.svg b/src/assets/icons/dc/hide.svg
new file mode 100644
index 0000000..e991e7e
--- /dev/null
+++ b/src/assets/icons/dc/hide.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.52856 1.52876C1.78891 1.26841 2.21102 1.26841 2.47137 1.52876L14.4714 13.5288C14.7317 13.7891 14.7317 14.2112 14.4714 14.4716C14.211 14.7319 13.7889 14.7319 13.5286 14.4716L11.8523 12.7953C10.8026 13.4938 9.51597 14.0002 7.99997 14.0002C5.89718 14.0002 4.24037 13.0275 3.03903 11.9196C1.84104 10.8148 1.0565 9.5415 0.674858 8.83761C0.390009 8.31223 0.390478 7.68717 0.675086 7.1623C1.06023 6.45201 1.86133 5.15114 3.09055 4.03355L1.52856 2.47157C1.26822 2.21122 1.26822 1.78911 1.52856 1.52876ZM4.03457 4.97757C2.93812 5.95924 2.20475 7.13846 1.8472 7.79786C1.77728 7.92679 1.77735 8.07364 1.84699 8.20209C2.19241 8.83919 2.89458 9.97267 3.94294 10.9395C4.98794 11.9032 6.33712 12.6668 7.99997 12.6668C9.09957 12.6668 10.0599 12.3336 10.8868 11.8298L9.59732 10.5403C8.43827 11.2706 6.8882 11.131 5.87864 10.1215C4.86909 9.11193 4.72948 7.56186 5.45981 6.40281L4.03457 4.97757ZM6.44811 7.39112L8.60901 9.55201C8.01093 9.78639 7.30472 9.66194 6.82145 9.17867C6.33819 8.69541 6.21374 7.9892 6.44811 7.39112Z" fill="#0D0D0D"/>
+<path d="M6.81556 3.46675C7.18897 3.38117 7.58347 3.3335 7.99997 3.3335C9.66282 3.3335 11.012 4.09716 12.057 5.06087C13.1054 6.02766 13.8075 7.16114 14.153 7.79823C14.2223 7.92613 14.2225 8.07385 14.1523 8.2033C13.9632 8.55189 13.664 9.05544 13.2557 9.60051C13.035 9.89521 13.095 10.313 13.3897 10.5338C13.6844 10.7545 14.1022 10.6945 14.3229 10.3998C14.7784 9.79162 15.1118 9.23078 15.3243 8.83897C15.6087 8.31464 15.6102 7.68865 15.3251 7.16272C14.9434 6.45883 14.1589 5.18548 12.9609 4.0807C11.7596 2.97282 10.1028 2.00016 7.99997 2.00016C7.48067 2.00016 6.98628 2.05972 6.51772 2.16711C6.15883 2.24935 5.93457 2.60696 6.01682 2.96585C6.09907 3.32473 6.45668 3.54899 6.81556 3.46675Z" fill="#0D0D0D"/>
+</svg>
diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg
index 29b0e11..3d7f8e2 100644
--- a/src/assets/icons/delete.svg
+++ b/src/assets/icons/delete.svg
@@ -1,4 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="white"/>
 <path d="M5.03431 5.03431C5.34673 4.7219 5.85327 4.7219 6.16569 5.03431L8 6.86863L9.83432 5.03431C10.1467 4.7219 10.6533 4.7219 10.9657 5.03431C11.2781 5.34673 11.2781 5.85327 10.9657 6.16569L9.13137 8L10.9657 9.83432C11.2781 10.1467 11.2781 10.6533 10.9657 10.9657C10.6533 11.2781 10.1467 11.2781 9.83432 10.9657L8 9.13137L6.16569 10.9657C5.85327 11.2781 5.34673 11.2781 5.03431 10.9657C4.7219 10.6533 4.7219 10.1467 5.03431 9.83432L6.86863 8L5.03431 6.16569C4.7219 5.85327 4.7219 5.34673 5.03431 5.03431Z" fill="#CDCDCD"/>
 <path d="M8 1.6C4.46538 1.6 1.6 4.46538 1.6 8C1.6 11.5346 4.46538 14.4 8 14.4C11.5346 14.4 14.4 11.5346 14.4 8C14.4 4.46538 11.5346 1.6 8 1.6ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="#CDCDCD"/>
 </svg>
diff --git a/src/components/Canvas/DepthCanvas/components/header-tools.vue b/src/components/Canvas/DepthCanvas/components/header-tools.vue
index d8ab35f..172dce0 100644
--- a/src/components/Canvas/DepthCanvas/components/header-tools.vue
+++ b/src/components/Canvas/DepthCanvas/components/header-tools.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 	import { ref, inject, computed } from 'vue'
-	import { TOOLS } from '../manager/ToolManager'
+	import { OperationType } from '../tools/layerHelper'
 	const props = defineProps({
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
@@ -32,29 +32,29 @@
 	const emit = defineEmits(['export', 'import'])
 	const stateManager = inject('stateManager') as any
 	const toolManager = inject('toolManager') as any
-	const tool = computed(() => stateManager.tool.value)
+	const tool = computed(() => toolManager.currentTool.value)
 	const historyIndex = computed(() => stateManager.historyIndex.value)
 	const historyList = computed(() => stateManager.historyList.value)
 	const isUndo = computed(() => !historyList.value[historyIndex.value - 1])
 	const isRedo = computed(() => !historyList.value[historyIndex.value + 1])
 	const tools = ref([
-		{ name: TOOLS.SELECT, icon: 'dc-select', iconSize: 16, disabled: ref(false) },
-		{ name: TOOLS.MOVE, icon: 'dc-move', iconSize: 18, disabled: ref(false) },
-		{ name: TOOLS.BRUSH, icon: 'dc-brush', iconSize: 18, disabled: ref(false) },
-		{ name: TOOLS.ERASER, icon: 'dc-eraser', iconSize: 18, disabled: ref(false) },
-		{ name: TOOLS.IMAGE, icon: 'dc-image', iconSize: 17, disabled: ref(false) },
-		{ name: TOOLS.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
-		{ name: TOOLS.RECTANGLE, icon: 'dc-rectangle', iconSize: 16, disabled: ref(false) },
+		{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16, disabled: ref(false) },
+		{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18, disabled: ref(false) },
+		{ name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18, disabled: ref(false) },
+		{ name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18, disabled: ref(false) },
+		{ name: OperationType.IMAGE, icon: 'dc-image', iconSize: 17, disabled: ref(false) },
+		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
+		{ name: OperationType.RECTANGLE, icon: 'dc-rectangle', iconSize: 16, disabled: ref(false) },
 		{ type: 'line' },
 		{
-			name: TOOLS.UNDO,
+			name: OperationType.UNDO,
 			icon: 'dc-undo',
 			iconSize: 18,
 			disabled: isUndo,
 			on: () => stateManager.undoState()
 		},
 		{
-			name: TOOLS.REDO,
+			name: OperationType.REDO,
 			icon: 'dc-redo',
 			iconSize: 18,
 			disabled: isRedo,
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
index fbf8bc2..a54bebb 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
@@ -1,28 +1,64 @@
 <template>
-	<div class="layer-item">
+	<div class="layer-item" @click="onClickLayer">
 		<div class="drag"><svg-icon name="dc-drag" size="18" /></div>
 		<div class="thumb"></div>
 		<div class="name">
-			<div @dblclick="editName = true" v-if="!editName">{{ layer.name }}</div>
-			<input type="text" v-model="layer.name" v-else @blur="editName = false" />
+			<div @dblclick="onClickEditName" v-if="!editName">
+				{{ layer.info.name || '未命名图层' }}
+			</div>
+			<input
+				v-else
+				type="text"
+				ref="nameInputRef"
+				:value="layer.info.name"
+				@blur="onChangeName"
+				@keyup.enter="onChangeName"
+			/>
 		</div>
 		<div class="icons">
-			<span><svg-icon name="dc-show" size="15" /></span>
-			<span><svg-icon name="dc-delete" size="13" /></span>
+			<span @click="onClickShowHide"
+				><svg-icon :name="layer.visible ? 'dc-show' : 'dc-hide'" size="15"
+			/></span>
+			<span @click="onClickDelete"><svg-icon name="dc-delete" size="13" /></span>
 			<span><svg-icon name="dc-down_arrow" size="11" /></span>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, inject, computed } from 'vue'
+	import { ref, inject, nextTick } from 'vue'
+	const layerManager = inject('layerManager') as any
+	const editName = ref(false)
 	const props = defineProps({
 		layer: {
 			type: Object,
 			default: () => ({})
 		}
 	})
-	const editName = ref(false)
+	const nameInputRef = ref(null)
+	const onClickEditName = () => {
+		editName.value = true
+		nextTick(() => {
+			nameInputRef.value.focus()
+		})
+	}
+	const onChangeName = (e) => {
+		const value = e.target.value
+		editName.value = false
+		const name = props.layer.info.name
+		if (name !== value) {
+			layerManager.setLayerNameByID(props.layer.info.id, value)
+		}
+	}
+	const onClickShowHide = () => {
+		layerManager.setLayerVisibleByID(props.layer.info.id, !props.layer.visible)
+	}
+	const onClickDelete = () => {
+		layerManager.deleteLayerByID(props.layer.info.id)
+	}
+	const onClickLayer = () => {
+		layerManager.setActiveID(props.layer.info.id)
+	}
 </script>
 
 <style lang="less" scoped>
@@ -39,11 +75,11 @@
 		&:last-child {
 			border-bottom: none;
 		}
-		&:not([draging='true']) {
-			&:hover,
-			&.active {
-				background-color: #ededed;
-			}
+		&:not([draging='true']):hover {
+			background-color: #f5f5f5;
+		}
+		&.active {
+			background-color: #ededed !important;
 		}
 		&.drag {
 			opacity: 0;
@@ -51,7 +87,7 @@
 		&.ghost,
 		&.chosen {
 			box-shadow: inset 0 0 5px #aaa;
-			background-color: #ededed;
+			background-color: #ededed !important;
 		}
 		> .drag {
 			padding: 0.3rem;
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 9d71e72..df6ca37 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
@@ -11,7 +11,7 @@
 		</div>
 		<div class="content">
 			<VueDraggable
-				:model-value="sortableRootLayers"
+				:model-value="list"
 				@start="handleDragStart"
 				@end="handleDragEnd"
 				class="sortable-layers"
@@ -36,10 +36,11 @@
 				:scroll-speed="10"
 			>
 				<layer-item
-					v-for="layer in sortableRootLayers"
-					:key="layer.id"
+					v-for="layer in list"
+					:key="layer.info.id"
 					:layer="layer"
 					:draging="draging"
+					:class="{ active: layer.info.id === layerManager.activeID.value }"
 				/>
 			</VueDraggable>
 		</div>
@@ -51,20 +52,16 @@
 	import { ref, inject, computed } from 'vue'
 	import layerItem from './layer-item.vue'
 	const draging = ref(false)
-	const sortableRootLayers = ref([
-		{ id: 1, name: 'layer1' },
-		{ id: 2, name: 'layer2' },
-		{ id: 3, name: 'layer3' }
-	])
-
+	const layerManager = inject('layerManager') as any
+	const list = computed(() => layerManager.layers.value)
 	const handleDragStart = () => {
 		draging.value = true
 	}
 	const handleDragEnd = (event) => {
 		draging.value = false
-		const { from, to, oldIndex, newIndex, item } = event
-		console.log('🔄 拖拽结束事件:', event)
-		sortableRootLayers.value.splice(newIndex, 0, sortableRootLayers.value.splice(oldIndex, 1)[0])
+		const { from, to, oldIndex, newIndex, data } = event
+		console.log('oldIndex', data)
+		layerManager.dragSort(data.info.id, newIndex)
 	}
 </script>
 
@@ -107,6 +104,7 @@
 		> .content {
 			flex: 1;
 			overflow-y: auto;
+			min-height: 20rem;
 			&::-webkit-scrollbar {
 				width: 4px;
 			}
diff --git a/src/components/Canvas/DepthCanvas/components/tools/my-input.vue b/src/components/Canvas/DepthCanvas/components/tools/my-input.vue
deleted file mode 100644
index 3c3e1ef..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/my-input.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-	<div class="my-input">
-		<span class="decorate"></span>
-		<span v-show="icon" class="icon">
-			<svg-icon :name="icon" :size="iconSize" size-unit="px" />
-		</span>
-		<span v-show="before" class="before">{{ before }}</span>
-		<input v-bind="attrs" :value="modelValue" @input="onInput" @copy.stop @keydown.stop />
-		<span v-show="after" class="after">{{ after }}</span>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, useAttrs, watch } from 'vue'
-	const props = defineProps({
-		modelValue: { type: [String, Number] },
-		icon: { default: '', type: String },
-		iconSize: { default: '10', type: [Number, String] },
-		before: { default: '', type: String },
-		after: { default: '', type: String }
-	})
-	const attrs = useAttrs()
-	const emit = defineEmits(['update:modelValue', 'input'])
-	const onInput = (e) => {
-		var value = e.target.value
-		if (attrs.type === 'number') value = Number(value)
-		emit('update:modelValue', value)
-		emit('input', value)
-	}
-</script>
-<style scoped lang="less">
-	.my-input {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		border: 1px solid rgba(230, 230, 231, 1);
-		border-radius: 1.7px;
-		height: 17px;
-		padding: 0 4px 0 2px;
-		> .decorate {
-			width: 2px;
-			background-color: rgba(230, 230, 231, 1);
-			border-radius: 3px;
-			height: 85%;
-			margin-right: 4px;
-		}
-		> .iconfont {
-			font-size: 12px;
-			color: #000;
-			margin-right: 2px;
-		}
-		> .before {
-			font-size: 12px;
-			color: #000;
-			margin-right: 2px;
-		}
-		> .after {
-			font-size: 12px;
-			color: #000;
-			margin-left: 1px;
-		}
-		> input {
-			font-size: 12px;
-			width: 0;
-			flex: 1;
-			text-align: right;
-			outline: none;
-			border: none;
-			background-color: transparent;
-			padding: 0;
-			-moz-appearance: textfield; /* Firefox */
-			&::-webkit-outer-spin-button,
-			&::-webkit-inner-spin-button {
-				-webkit-appearance: none;
-				margin: 0;
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/my-select.vue b/src/components/Canvas/DepthCanvas/components/tools/my-select.vue
deleted file mode 100644
index ccfc13c..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/my-select.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<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-select>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, useAttrs, watch } from 'vue'
-	const props = defineProps({
-		modelValue: { required: true },
-		list: { default: () => [], type: [Array, Object] }
-	})
-	const attrs = useAttrs()
-	const emit = defineEmits(['update:modelValue', 'change'])
-	const onChange = (value) => {
-		emit('update:modelValue', value)
-		emit('change', value)
-	}
-</script>
-<style scoped lang="less">
-	.my-select {
-		&:deep(.el-select) {
-			--el-select-input-font-size: 12px;
-			.el-select__wrapper {
-				font-size: 12px;
-				min-height: 0;
-				height: 28px;
-				padding: 0 8px;
-			}
-			.el-select__selected-item,
-			.el-select__input-wrapper,
-			.el-select__placeholder {
-				line-height: normal;
-			}
-			.el-select__input {
-				height: 24px;
-			}
-		}
-	}
-	.el-popper {
-		.el-select-dropdown {
-			li {
-				padding-left: 8px;
-				height: 30px;
-				line-height: 30px;
-				font-size: 12px;
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/my-textarea.vue b/src/components/Canvas/DepthCanvas/components/tools/my-textarea.vue
deleted file mode 100644
index a8d146d..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/my-textarea.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-	<div class="my-textarea">
-		<textarea
-			:placeholder="placeholder"
-			:value="modelValue"
-			@input="onInput"
-			@change="onChange"
-			@copy.stop
-			@keydown.stop
-		></textarea>
-		<div class="bths">
-			<button><svg-icon name="mobang" size="10" size-unit="px" /></button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref, markRaw, onMounted } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'input', 'change'])
-	const props = defineProps({
-		modelValue: { type: String },
-		placeholder: {
-			type: String,
-			default: 'Enter the scene you want to describe...'
-		}
-	})
-	const onInput = (e) => {
-		const value = e.target.value
-		emit('update:modelValue', value)
-		emit('input', value)
-	}
-	const onChange = (e) => {
-		emit('change', e.target.value)
-	}
-</script>
-
-<style lang="less" scoped>
-	.my-textarea {
-		width: 100%;
-		height: 115px;
-		border: 1px solid #e4e4e7;
-		border-radius: 10px;
-		padding: 10px 5px;
-		display: flex;
-		flex-direction: column;
-		> textarea {
-			padding: 0 5px;
-			width: 100%;
-			flex: 1;
-			border: none;
-			outline: none;
-			resize: none;
-			font-family: Medium;
-			font-size: 10px;
-			color: #333;
-			&::placeholder {
-				color: #c9c9c9;
-			}
-			&::-webkit-scrollbar {
-				width: 4px;
-			}
-			&::-webkit-scrollbar-thumb {
-				border-radius: 4px;
-				background: rgba(0, 0, 0, 0.2);
-			}
-			&::-webkit-scrollbar-track {
-				border-radius: 4px;
-				background: rgba(0, 0, 0, 0.1);
-			}
-		}
-		> .bths {
-			padding: 5px 5px 0;
-			> button {
-				width: 20px;
-				height: 20px;
-				padding: 0;
-				border-radius: 4px;
-				background-color: #f0f0f0;
-				border: 1px solid #e4e4e7;
-				&:active {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/offset-tool.vue b/src/components/Canvas/DepthCanvas/components/tools/offset-tool.vue
deleted file mode 100644
index 5732251..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/offset-tool.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-	<div class="offset-tool">
-		<div class="input" v-show="showInput">
-			<my-input v-model="left" type="number" before="X" after="%" :min="-100" :max="100" />
-			<my-input v-model="top" type="number" before="Y" after="%" :min="-100" :max="100" />
-		</div>
-		<div
-			class="dish"
-			@mousedown="mousedown"
-			@touchstart="mousedown"
-			ref="dishRef"
-			v-show="showDish"
-		>
-			<img src="/src/assets/images/icon/xyz.png" />
-			<span class="ball" :style="ballStyle"></span>
-			<span class="tip x">X: {{ left }}%</span>
-			<span class="tip y">Y: {{ top }}%</span>
-			<span class="line x"></span>
-			<span class="line y"></span>
-			<span class="line z" :style="lineZStyle"></span>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, watch, computed } from 'vue'
-	import MyInput from './my-input.vue'
-	const props = defineProps({
-		modelValue: { type: Object as () => { x: number; y: number } },
-		showInput: {
-			type: Boolean,
-			default: true
-		},
-		showDish: {
-			type: Boolean,
-			default: true
-		}
-	})
-	const emit = defineEmits(['update:modelValue', 'change', 'input'])
-	// 工具的实际坐标 -100 ~ 100
-	const top = ref(Math.round(props.modelValue.y))
-	const left = ref(Math.round(props.modelValue.x))
-
-	// 原点的坐标 0 ~ 100
-	const ballStyle = computed(() => ({
-		top: 50 + top.value / 2 + '%',
-		left: 50 + left.value / 2 + '%'
-	}))
-	watch(
-		() => props.modelValue.x,
-		(v) => (left.value = v)
-	)
-	watch(
-		() => props.modelValue.y,
-		(v) => (top.value = v)
-	)
-	const dishRef = ref<HTMLDivElement>()
-	const mousedown = (e: MouseEvent | TouchEvent) => {
-		if (!dishRef.value) return
-		const mousemove = (e: MouseEvent | TouchEvent) => {
-			if (!dishRef.value) return
-			const rect = dishRef.value.getBoundingClientRect()
-			const X = e.clientX || (e as TouchEvent).touches[0].clientX
-			const Y = e.clientY || (e as TouchEvent).touches[0].clientY
-			var x = ((X - rect.left) / rect.width) * 100
-			var y = ((Y - rect.top) / rect.height) * 100
-			if (x < 0) x = 0
-			if (x > 100) x = 100
-			if (y < 0) y = 0
-			if (y > 100) y = 100
-			left.value = Math.round((x - 50) * 2)
-			top.value = Math.round((y - 50) * 2)
-			onInput()
-		}
-		mousemove(e)
-		const mouseup = () => {
-			onChange()
-			document.removeEventListener('mousemove', mousemove)
-			document.removeEventListener('touchmove', mousemove)
-			document.removeEventListener('mouseup', mouseup)
-			document.removeEventListener('touchend', mouseup)
-		}
-		document.addEventListener('mousemove', mousemove)
-		document.addEventListener('touchmove', mousemove)
-		document.addEventListener('mouseup', mouseup)
-		document.addEventListener('touchend', mouseup)
-	}
-	const onInput = () => {
-		const value = {
-			x: left.value,
-			y: top.value
-		}
-		emit('update:modelValue', value)
-		emit('input', value)
-	}
-	var changeTime: any = null
-	const onChange = () => {
-		clearTimeout(changeTime)
-		changeTime = setTimeout(() => {
-			const value = {
-				x: left.value,
-				y: top.value
-			}
-			emit('update:modelValue', value)
-			emit('change', value)
-		}, 500)
-	}
-	const lineZStyle = computed(() => ({
-		'--rotateZ': calculateAngle(0, 0, left.value, top.value) + 'deg',
-		width: calculateDistance(0, 0, left.value, top.value) / 2 + '%'
-	}))
-	// 计算角度
-	function calculateAngle(x1: number, y1: number, x2: number, y2: number) {
-		const deltaX = x2 - x1
-		const deltaY = y1 - y2
-		let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90
-		return angle
-	}
-	// 计算距离
-	function calculateDistance(x1: number, y1: number, x2: number, y2: number) {
-		const deltaX = x2 - x1
-		const deltaY = y2 - y1
-		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-		return distance
-	}
-</script>
-
-<style scoped lang="less">
-	.offset-tool {
-		position: relative;
-		> .input {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			> * {
-				flex: 1;
-				margin-right: 10px;
-				&:last-child {
-					margin-right: 0;
-				}
-			}
-		}
-		> .dish {
-			width: 115px;
-			height: 115px;
-			border: 1px solid #eaeaea;
-			border-radius: 3.4px;
-			cursor: pointer;
-			position: relative;
-			background-color: #f6f6f6;
-			margin-top: 20px;
-			> * {
-				position: absolute;
-				pointer-events: none;
-				user-select: none;
-			}
-			> img {
-				width: 12px;
-				height: 12px;
-				bottom: 3.5px;
-				right: 3.5px;
-			}
-			> .ball {
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				width: 8.5px;
-				height: 8.5px;
-				border: 1px solid #fff;
-				background-color: #333;
-				border-radius: 50%;
-				box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26);
-			}
-			> .tip {
-				font-size: 8.5px;
-				color: #000;
-				line-height: 24px;
-				&.x {
-					top: 50%;
-					right: 0%;
-					transform: translate(100%, -50%);
-					padding-left: 6px;
-				}
-				&.y {
-					top: 0%;
-					left: 50%;
-					transform: translate(-50%, -100%);
-				}
-			}
-			> .line {
-				border-color: #d9d9d9;
-				border-style: dashed;
-				border-width: 0;
-				width: 0;
-				height: 0;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				&.x {
-					width: 100%;
-					border-top-width: 1px;
-				}
-				&.y {
-					height: 100%;
-					border-left-width: 1px;
-				}
-				&.z {
-					width: 50%;
-					border-top-width: 1px;
-					border-color: #454754;
-					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
-					transform-origin: left center;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/pixel-ratio-selection.vue b/src/components/Canvas/DepthCanvas/components/tools/pixel-ratio-selection.vue
deleted file mode 100644
index c182c83..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/pixel-ratio-selection.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-	<div class="pixel-ratio-selection">
-		<div
-			v-for="v in list"
-			:key="v"
-			:class="{ active: v === modelValue }"
-			@click="onChange(v)"
-			:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
-		>
-			{{ v }}
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, defineExpose } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'change'])
-	const props = defineProps({
-		modelValue: { type: String },
-		list: {
-			type: Array,
-			default: () => ['1:1', '4:3', '3:4', '16:9']
-		}
-	})
-	const data = reactive({})
-	const onChange = (v) => {
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.pixel-ratio-selection {
-		width: 100%;
-		height: 34px;
-		border-radius: 6px;
-		background-color: #f0f0f0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 17px;
-		user-select: none;
-		> div {
-			text-align: center;
-			cursor: pointer;
-			font-size: 12px;
-			color: #7c7c7c;
-			height: 21px;
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			&.active {
-				border-radius: 4px;
-				background-color: #fff;
-			}
-			&::before {
-				content: '';
-				border-radius: 1px;
-				border: 1px solid #7c7c7c;
-				width: calc(var(--w) / max(var(--w), var(--h)) * 10px);
-				height: calc(var(--h) / max(var(--w), var(--h)) * 10px);
-				margin-right: 4px;
-				box-sizing: border-box;
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/slider.vue b/src/components/Canvas/DepthCanvas/components/tools/slider.vue
deleted file mode 100644
index eff883f..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/slider.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-	<div class="slider" :disabled="disabled">
-		<div
-			class="input-range"
-			:style="{
-				'--progress': (value - props.min) / (props.max - props.min)
-			}"
-		>
-			<span class="tip">{{ props.tipFormatter(value) }}</span>
-			<input
-				type="range"
-				v-model="value"
-				v-bind="$attrs"
-				@input="onInput"
-				@change="onChange"
-				:disabled="disabled"
-				:min="props.min"
-				:max="props.max"
-			/>
-		</div>
-		<div class="input" v-show="isInput">
-			<my-input
-				type="number"
-				v-model="value"
-				v-bind="$attrs"
-				@input="onInput"
-				@change="onChange"
-				:disabled="disabled"
-				:min="props.min"
-				:max="props.max"
-			/>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, defineProps, defineEmits, watch } from 'vue'
-	import MyInput from './my-input.vue'
-	const props = defineProps({
-		modelValue: { type: Number },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		min: {
-			type: Number,
-			default: 0
-		},
-		max: {
-			type: Number,
-			default: 100
-		},
-		tipFormatter: {
-			type: Function,
-			default: (v) => v
-		},
-		isInput: {
-			type: Boolean,
-			default: true
-		}
-	})
-	const emit = defineEmits(['update:modelValue', 'change', 'input'])
-	watch(
-		() => props.modelValue,
-		(v) => {
-			value.value = v
-		}
-	)
-	const value = ref(props.modelValue)
-	const onInput = () => {
-		if (props.disabled) return
-		const v = Number(value.value)
-		emit('update:modelValue', v)
-		emit('input', v)
-	}
-	const onChange = () => {
-		if (props.disabled) return
-		const v = Number(value.value)
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-</script>
-
-<style scoped lang="less">
-	.slider {
-		position: relative;
-		display: flex;
-		align-items: center;
-		--input-thumb-size: 8px;
-		--backcolor1: var(--slider-thumb-color1, #4285f4);
-		--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
-		&:hover {
-			> .input-range > .tip {
-				display: block;
-			}
-		}
-		> .input-range {
-			position: relative;
-			flex: 2;
-			display: flex;
-			> input {
-				width: 100%;
-				-webkit-appearance: none;
-				appearance: none;
-				height: 3px;
-				border-radius: 3px;
-				outline: none;
-				background: linear-gradient(
-					to right,
-					var(--backcolor1) 0%,
-					var(--backcolor1) calc(var(--progress) * 100%),
-					var(--backcolor2) calc(var(--progress) * 100%),
-					var(--backcolor2) 100%
-				);
-				&::-webkit-slider-thumb {
-					-webkit-appearance: none;
-					appearance: none;
-					width: var(--input-thumb-size);
-					height: var(--input-thumb-size);
-					border-radius: 50%;
-					background: var(--backcolor1); /* 蓝色滑块 */
-					cursor: pointer;
-					transition: all 0.2s;
-					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-				}
-				&::-webkit-slider-thumb:hover {
-					transform: scale(1.1);
-				}
-			}
-			> .tip {
-				position: absolute;
-				font-size: 10px;
-				pointer-events: none;
-				user-select: none;
-				color: #666;
-				top: calc(var(--input-thumb-size) / -2 - 3.5px);
-				left: calc(
-					(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
-				);
-				transform: translate(-50%, -100%);
-				background-color: rgba(0, 0, 0, 0.7);
-				color: white;
-				padding: 3px 5px;
-				border-radius: 4px;
-				font-size: 10px;
-				white-space: nowrap;
-				pointer-events: none;
-				display: none;
-				&::after {
-					content: '';
-					position: absolute;
-					top: 97%;
-					left: 50%;
-					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);
-				}
-			}
-		}
-		> .input {
-			flex: 1;
-			margin-left: 10px;
-			> input {
-				border-radius: 3px;
-				width: 100%;
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/upload-file.vue b/src/components/Canvas/DepthCanvas/components/tools/upload-file.vue
deleted file mode 100644
index b4396e0..0000000
--- a/src/components/Canvas/DepthCanvas/components/tools/upload-file.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-	<div class="upload-file">
-		<div class="preview" v-if="url">
-			<img :src="url" @error="onChange(null)" />
-			<div class="close" @click="onChange(null)">
-				<svg-icon name="close-border" size="16" size-unit="px" />
-			</div>
-		</div>
-		<div class="control" v-else>
-			<div class="icon"><svg-icon name="upload" size="17" size-unit="px" /></div>
-			<div class="txt">{{ tip }}</div>
-			<div class="btn" @click="onSelectFile">Select File</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, computed } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'change'])
-	const props = defineProps({
-		modelValue: { type: [File, Object, String, null] },
-		tip: { type: String, default: 'Upload your files' }
-	})
-	const data = reactive({
-		file: null
-	})
-	const url = computed(() => {
-		const type = props.modelValue?.constructor
-		var str = ''
-		if (type === File) {
-			str = URL.createObjectURL(props.modelValue as File)
-		} else if (type === String) {
-			str = props.modelValue as string
-		}
-		return str
-	})
-	const onChange = (v) => {
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-	const onSelectFile = () => {
-		const input = document.createElement('input')
-		input.type = 'file'
-		input.accept = 'image/png, image/jpeg, image/jpg'
-		input.addEventListener('change', (e) => {
-			const file = e.target.files[0]
-			if (file) onChange(file)
-		})
-		input.click()
-	}
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.upload-file {
-		width: 100%;
-		height: 99px;
-		border-radius: 10px;
-		background-color: #f0f0f0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		> .control {
-			text-align: center;
-			> .txt {
-				margin-top: 6px;
-				margin-bottom: 8px;
-				font-size: 8px;
-				color: #7c7c7c;
-			}
-			> .btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				box-shadow: 0px 0.75px 0px 0px rgba(0, 0, 0, 0.02);
-				min-width: 39px;
-				height: 13px;
-				border-radius: 2.3px;
-				background-color: #fff;
-				font-size: 6px;
-				color: #000;
-				border: 1px solid #d9d9d9;
-				cursor: pointer;
-				&:active {
-					opacity: 0.6;
-				}
-			}
-		}
-		> .preview {
-			width: 80px;
-			height: 80px;
-			position: relative;
-			> img {
-				height: 100%;
-				width: 100%;
-				object-fit: contain;
-			}
-			> .close {
-				position: absolute;
-				top: 0.1px;
-				right: 0.1px;
-				border-radius: 50%;
-				background-color: #fff;
-				cursor: pointer;
-			}
-		}
-	}
-</style>
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index f17f9ce..4a8c5bd 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -5,8 +5,13 @@
 		</div>
 		<layer-panel />
 		<details-panel />
-		<header-tools />
-		<zoom :zoom="1" :step="0.1" is-home />
+		<header-tools @export="exportCanvas" />
+		<zoom
+			:zoom="canvasManager.currentZoom.value / 100"
+			:step="0.1"
+			is-home
+			@home="() => canvasManager.resetZoom()"
+		/>
 	</div>
 </template>
 
@@ -22,10 +27,10 @@
 
 	// 管理器
 	import { StateManager } from './manager/StateManager'
+	import { LayerManager } from './manager/LayerManager'
 	import { EventManager } from './manager/EventManager'
-	import { FlowManager } from './manager/FlowManager'
-	import { NodeManager } from './manager/NodeManager'
-	import { ToolManager, TOOLS } from './manager/ToolManager'
+	import { CanvasManager } from './manager/CanvasManager'
+	import { ToolManager } from './manager/ToolManager'
 
 	const canvasContainerRef = ref(null)
 	const canvasRef = ref(null)
@@ -41,77 +46,59 @@
 	const stateManager = new StateManager({})
 	provide('stateManager', stateManager)
 
+	// 画布管理器
+	const canvasManager = new CanvasManager({ stateManager })
+	stateManager.setManager({ canvasManager, canvasRef })
+	provide('canvasManager', canvasManager)
+
+	// 图层管理器
+	const layerManager = new LayerManager({ stateManager, canvasManager })
+	stateManager.setManager({ layerManager })
+	provide('layerManager', layerManager)
+
 	// 事件管理器
 	const eventManager = new EventManager({ stateManager })
 	stateManager.setManager({ eventManager })
 	provide('eventManager', eventManager)
 
-	// 流程管理器
-	const flowManager = new FlowManager({ stateManager })
-	stateManager.setManager({ flowManager })
-	provide('flowManager', flowManager)
-
-	// 节点管理器
-	const nodeManager = new NodeManager({ stateManager })
-	stateManager.setManager({ nodeManager })
-	provide('nodeManager', nodeManager)
-
 	// 工具管理器
-	const toolManager = new ToolManager({ stateManager })
+	const toolManager = new ToolManager({ stateManager, canvasManager })
 	stateManager.setManager({ toolManager })
 	provide('toolManager', toolManager)
-	const initCanvas = () => {
-		console.log('OverallCanvas: initCanvas')
-		const canvasViewWidth = canvasContainerRef.value.clientWidth
-		const canvasViewHeight = canvasContainerRef.value.clientHeight
-		const canvasWidth = 750
-		const canvasHeight = 600
-		const canvas = new fabric.Canvas(canvasRef.value, {
-			selection: true,
-			width: canvasViewWidth,
-			height: canvasViewHeight,
-			imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
-			imageSmoothingQuality: 'high', // 设置高质量图像平滑
-			preserveObjectStacking: true,
-			enableRetinaScaling: true,
-			stopContextMenu: true,
-			fireRightClick: true,
-			backgroundColor: '#fff'
-		})
-		canvas.clipPath = new fabric.Rect({
-			left: 0,
-			top: 0,
-			width: canvasWidth,
-			height: canvasHeight
-		})
-		// 画布居中
-		const canvasX = canvasViewWidth / 2 - canvasWidth / 2
-		const canvasY = canvasViewHeight / 2 - canvasHeight / 2
-		canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
-		// 创建矩形
-		const rect = new fabric.Rect({
-			left: 20,
-			top: 20,
-			width: 100,
-			height: 100,
-			fill: '#f00'
-		})
-		canvas.add(rect)
-		//创建圆形
-		const circle = new fabric.Circle({
-			left: 200,
-			top: 200,
-			radius: 50,
-			fill: '#0f0'
-		})
-		canvas.add(circle)
-	}
+
+	const observer = ref(null)
 	onMounted(() => {
-		initCanvas()
+		canvasManager.initCanvas({
+			canvasRef,
+			canvasViewWidth: canvasContainerRef.value.clientWidth,
+			canvasViewHeight: canvasContainerRef.value.clientHeight,
+			canvasWidth: 750,
+			canvasHeight: 600
+		})
+
+		const trailingTimeout = ref(null)
+		observer.value = new ResizeObserver((entries) => {
+			clearTimeout(trailingTimeout.value)
+			trailingTimeout.value = setTimeout(async () => {
+				handleWindowResize()
+			}, 100)
+		})
+		observer.value.observe(canvasContainerRef.value)
 	})
 	onBeforeMount(() => {
 		// eventManager.removeEvents() // 移除事件
 	})
+	async function handleWindowResize() {
+		console.log('==========画布窗口大小变化==========')
+		canvasManager.setCanvasViewSize({
+			canvasViewWidth: canvasContainerRef.value.clientWidth,
+			canvasViewHeight: canvasContainerRef.value.clientHeight
+		})
+		canvasManager.resetZoom()
+	}
+	const exportCanvas = () => {
+		console.log(canvasManager.getBitObjects())
+	}
 </script>
 <style lang="less">
 	@import '@vue-flow/core/dist/style.css';
diff --git a/src/components/Canvas/DepthCanvas/manager/AnimationManager.js b/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
new file mode 100644
index 0000000..6da5b5d
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
@@ -0,0 +1,850 @@
+import { gsap } from "gsap";
+
+/**
+ * 画布动画管理器
+ * 负责处理画布平移、缩放等动画效果
+ */
+export class AnimationManager {
+	/**
+	 * 创建动画管理器
+	 * @param {fabric.Canvas} canvas fabric.js画布实例
+	 * @param {Object} options 配置选项
+	 */
+	constructor(canvas, options = {}) {
+		this.canvasManager = options.canvasManager;
+		this.canvas = canvas;
+		this.currentZoom = options.currentZoom;
+
+		// 动画相关属性
+		this._zoomAnimation = null;
+		this._panAnimation = null;
+		this._lastWheelTime = 0;
+		this._lastWheelProcessTime = 0; // 上次处理wheel事件的时间
+		this._wheelEvents = [];
+
+		// 检测设备类型，Mac设备使用更短的节流时间确保响应性
+		this._isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+		this._wheelThrottleTime = this._isMac
+			? options.wheelThrottleTime || 8 // Mac设备使用更短的节流时间
+			: options.wheelThrottleTime || 30;
+
+		this._accumulatedWheelDelta = 0; // 累积滚轮增量
+		this._wheelAccumulationTimeout = null; // 滚轮累积超时
+
+		// Mac设备使用更短的累积时间窗口，确保及时响应
+		this._wheelAccumulationTime = this._isMac ? 60 : 120; // 滚轮累积时间窗口(毫秒)
+
+		// 添加新的状态跟踪变量
+		this._wasPanning = false; // 是否有平移动画正在进行
+		this._wasZooming = false; // 是否有缩放动画正在进行
+		this._combinedAnimation = null; // 组合动画引用
+
+		// Mac特有的动画优化变量 - 使用最小防抖机制
+		if (this._isMac) {
+			this._lastMacAnimationTime = 0; // 上次Mac动画时间
+			this._macAnimationCooldown = 2; // 最小的动画冷却时间，确保最大响应性
+		}
+
+		// 初始化GSAP默认配置
+		gsap.defaults({
+			ease: options.defaultEase || (this._isMac ? "power2.out" : "power2.out"), // Mac使用简单高效的缓动
+			duration: options.defaultDuration || (this._isMac ? 0.3 : 0.3), // Mac使用标准持续时间
+			overwrite: "auto", // 自动覆盖同一对象上的动画
+		});
+	}
+
+	/**
+	 * 使用 GSAP 实现平滑缩放动画
+	 * @param {Object} point 缩放中心点 {x, y}
+	 * @param {Number} targetZoom 目标缩放值
+	 * @param {Object} options 动画选项
+	 */
+	animateZoom(point, targetZoom, options = {}) {
+		if (!this.canvas) return;
+
+		// 限制缩放范围
+		targetZoom = Math.min(Math.max(targetZoom, 0.1), 20);
+
+		// 当前缩放值
+		const currentZoom = this.canvas.getZoom();
+
+		// 如果变化太小，直接应用缩放
+		if (Math.abs(targetZoom - currentZoom) < 0.01) {
+			this._applyZoom(point, targetZoom);
+			return;
+		}
+
+		// 停止任何进行中的缩放动画
+		if (this._zoomAnimation) {
+			// 不是直接 kill，而是获取当前进度值作为新的起点
+			const currentProgress = this._zoomAnimation.progress();
+			const currentZoomValue = this._zoomAnimation.targets()[0].value;
+			this._zoomAnimation.kill();
+			this._zoomAnimation = null;
+
+			// 从当前过渡中的值开始新动画，而不是从最初的值
+			const zoomObj = { value: currentZoomValue };
+			const currentVpt = [...this.canvas.viewportTransform];
+
+			// 计算过渡动画持续时间 - 根据当前值到目标值的距离比例
+			const progressRatio =
+				Math.abs(targetZoom - currentZoomValue) / Math.abs(targetZoom - currentZoom);
+			const duration = options.duration || 0.3 * progressRatio;
+
+			// 计算缩放后目标位置需要的修正，保持缩放点不变
+			const animOptions = {
+				value: targetZoom,
+				duration: duration,
+				ease: options.ease || "power2.out",
+				onUpdate: () => {
+					// 更新缩放值显示
+					this.currentZoom.value = Math.round(zoomObj.value * 100);
+
+					// 计算过渡中的变换矩阵
+					const zoom = zoomObj.value;
+					const scale = zoom / currentZoomValue;
+					const currentScaleFactor = scale;
+
+					// 应用变换
+					const vpt = this.canvas.viewportTransform;
+					vpt[0] = currentVpt[0] * scale;
+					vpt[3] = currentVpt[3] * scale;
+
+					// 应用平移修正以保持缩放点
+					const adjustX = (1 - currentScaleFactor) * point.x;
+					const adjustY = (1 - currentScaleFactor) * point.y;
+					vpt[4] = currentVpt[4] * scale + adjustX;
+					vpt[5] = currentVpt[5] * scale + adjustY;
+
+					this.canvas.renderAll();
+				},
+				onComplete: () => {
+					this._zoomAnimation = null;
+
+					// 确保最终状态准确
+					this._applyZoom(point, targetZoom, true);
+				},
+			};
+
+			// 启动 GSAP 动画
+			this._zoomAnimation = gsap.to(zoomObj, animOptions);
+			return;
+		}
+
+		// 如果没有正在进行的动画，创建新的缩放动画
+		const zoomObj = { value: currentZoom };
+		const currentVpt = [...this.canvas.viewportTransform];
+
+		// 计算缩放后目标位置需要的修正，保持缩放点不变
+		const scaleFactor = targetZoom / currentZoom;
+		const invertedScaleFactor = 1 / scaleFactor;
+
+		// 这个数学公式确保缩放点在屏幕上的位置保持不变
+		const dx = point.x - point.x * invertedScaleFactor;
+		const dy = point.y - point.y * invertedScaleFactor;
+
+		// 创建动画配置
+		const animOptions = {
+			value: targetZoom,
+			duration: options.duration || 0.3,
+			ease: options.ease || (this._isMac ? "expo.out" : "power2.out"), // Mac使用更平滑的缓动
+			onUpdate: () => {
+				// 更新缩放值显示
+				this.currentZoom.value = Math.round(zoomObj.value * 100);
+
+				// 计算过渡中的变换矩阵
+				const zoom = zoomObj.value;
+				const scale = zoom / currentZoom;
+				const currentScaleFactor = scale;
+
+				// 应用变换
+				const vpt = this.canvas.viewportTransform;
+				vpt[0] = currentVpt[0] * scale;
+				vpt[3] = currentVpt[3] * scale;
+
+				// 应用平移修正以保持缩放点
+				const adjustX = (1 - currentScaleFactor) * point.x;
+				const adjustY = (1 - currentScaleFactor) * point.y;
+				vpt[4] = currentVpt[4] * scale + adjustX;
+				vpt[5] = currentVpt[5] * scale + adjustY;
+
+				this.canvas.renderAll();
+			},
+			onComplete: () => {
+				this._zoomAnimation = null;
+
+				// 确保最终状态准确
+				this._applyZoom(point, targetZoom, true);
+			},
+		};
+
+		// 启动 GSAP 动画
+		this._zoomAnimation = gsap.to(zoomObj, animOptions);
+	}
+
+	/**
+	 * 应用缩放（内部使用）
+	 * @private
+	 */
+	_applyZoom(point, zoom, skipUpdate = false) {
+		if (!skipUpdate) {
+			this.currentZoom.value = Math.round(zoom * 100);
+		}
+		this.canvas.zoomToPoint(point, zoom);
+	}
+
+	/**
+	 * 使用 GSAP 实现平滑平移动画
+	 * @param {Object} targetPosition 目标位置 {x, y}
+	 * @param {Object} options 动画选项
+	 */
+	animatePan(targetPosition, options = {}) {
+		if (!this.canvas) return;
+
+		// 停止任何进行中的平移动画
+		if (this._panAnimation) {
+			this._panAnimation.kill();
+		}
+
+		const currentVpt = [...this.canvas.viewportTransform];
+		const position = {
+			x: -currentVpt[4],
+			y: -currentVpt[5],
+		};
+
+		// 计算平移距离
+		const dx = targetPosition.x - position.x;
+		const dy = targetPosition.y - position.y;
+
+		// 如果距离太小，直接应用平移
+		if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
+			this._applyPan(targetPosition.x, targetPosition.y);
+			return;
+		}
+
+		// 创建动画配置
+		const animOptions = {
+			x: targetPosition.x,
+			y: targetPosition.y,
+			duration: options.duration || 0.3,
+			ease: options.ease || (this._isMac ? "circ.out" : "power2.out"), // Mac使用更柔和的缓动
+			onUpdate: () => {
+				this._applyPan(position.x, position.y);
+			},
+			onComplete: () => {
+				this._panAnimation = null;
+				// 确保最终位置准确
+				this._applyPan(targetPosition.x, targetPosition.y);
+			},
+		};
+
+		// 启动 GSAP 动画
+		this._panAnimation = gsap.to(position, animOptions);
+	}
+
+	/**
+	 * 应用平移（内部使用）
+	 * @private
+	 */
+	_applyPan(x, y) {
+		if (!this.canvas) return;
+
+		const vpt = this.canvas.viewportTransform;
+		vpt[4] = -x;
+		vpt[5] = -y;
+
+		this.canvas.renderAll();
+	}
+
+	/**
+	 * 使用动画平移到指定元素
+	 * @param {Object} elementId 元素ID
+	 */
+	panToElement(elementId) {
+		if (!this.canvas) return;
+
+		const obj = this.canvas.getObjects().find((obj) => obj.id === elementId);
+		if (!obj) return;
+
+		const zoom = this.canvas.getZoom();
+		const center = obj.getCenterPoint();
+
+		// 计算目标中心位置
+		const targetX = center.x * zoom - this.canvas.width / 2;
+		const targetY = center.y * zoom - this.canvas.height / 2;
+
+		// 动画平移
+		this.animatePan(
+			{ x: targetX, y: targetY },
+			{
+				duration: 0.6,
+				ease: this._isMac ? "back.out(0.3)" : "power3.out", // Mac使用轻微回弹效果
+			}
+		);
+	}
+
+	/**
+	 * 重置缩放（带平滑动画）
+	 * @param {Boolean} animated 是否使用动画
+	 */
+	async resetZoom(animated = true) {
+		const canvasViewWidth = this.canvasManager.canvasViewWidth;
+		const canvasViewHeight = this.canvasManager.canvasViewHeight;
+		const canvasWidth = this.canvasManager.canvasWidth;
+		const canvasHeight = this.canvasManager.canvasHeight;
+		const panX = canvasViewWidth / 2 - canvasWidth / 2
+		const panY = canvasViewHeight / 2 - canvasHeight / 2
+		return new Promise((resolve) => {
+			if (animated) {
+				// 停止任何进行中的动画
+				if (this._zoomAnimation) {
+					this._zoomAnimation.kill();
+				}
+				if (this._panAnimation) {
+					this._panAnimation.kill();
+				}
+
+				const center = {
+					x: this.canvas.width / 2,
+					y: this.canvas.height / 2,
+				};
+
+				// 获取当前变换矩阵
+				const currentVpt = [...this.canvas.viewportTransform];
+				const currentZoom = this.canvas.getZoom();
+
+				// 创建一个对象来动画整个视图变换
+				const viewTransform = {
+					zoom: currentZoom,
+					panX: currentVpt[4],
+					panY: currentVpt[5],
+				};
+
+				// 使用GSAP同时动画缩放和平移
+				gsap.to(viewTransform, {
+					zoom: 1,
+					panX: panX,
+					panY: panY,
+					duration: 0.5,
+					ease: this._isMac ? "back.out(0.2)" : "power3.out", // Mac使用轻微回弹效果
+					onUpdate: () => {
+						// 更新缩放显示值
+						this.currentZoom.value = Math.round(viewTransform.zoom * 100);
+
+						// 应用新的变换
+						const vpt = this.canvas.viewportTransform;
+						vpt[0] = viewTransform.zoom;
+						vpt[3] = viewTransform.zoom;
+						vpt[4] = viewTransform.panX;
+						vpt[5] = viewTransform.panY;
+
+						this.canvas.renderAll();
+					},
+					onComplete: () => {
+						// 确保最终状态准确
+						this.canvas.setViewportTransform([1, 0, 0, 1, panX, panY]);
+						this.currentZoom.value = 100;
+						this._zoomAnimation = null;
+						this._panAnimation = null;
+						resolve();
+					},
+				});
+			} else {
+				this.canvas.setViewportTransform([1, 0, 0, 1, panX, panY]);
+				this.currentZoom.value = 100;
+				resolve();
+			}
+		});
+	}
+
+	/**
+	 * 处理鼠标滚轮缩放
+	 * @param {Object} opt 事件对象
+	 */
+	handleMouseWheel(opt) {
+		const now = Date.now();
+		let delta = opt.e.deltaY;
+
+		// 记录事件用于计算速度和惯性
+		this._wheelEvents.push({
+			delta: delta,
+			point: { x: opt.e.offsetX, y: opt.e.offsetY },
+			time: now,
+			hasPanAnimation: this._wasPanning,
+			hasZoomAnimation: this._wasZooming,
+		});
+
+		// 保留最近的事件记录
+		if (this._wheelEvents.length > 10) {
+			this._wheelEvents.shift();
+		}
+
+		// 检查是否是第一个事件或者距离上次处理已经过了足够时间
+		const isFirstEvent = !this._wheelAccumulationTimeout;
+		const timeSinceLastProcess = now - (this._lastWheelProcessTime || 0);
+
+		if (isFirstEvent || timeSinceLastProcess > this._wheelAccumulationTime) {
+			// 立即处理第一个事件或长时间没有处理的事件，确保响应性
+			this._processAccumulatedWheel(opt);
+			this._lastWheelProcessTime = now;
+
+			// 清理之前的累积
+			this._accumulatedWheelDelta = 0;
+
+			// 如果有pending的timeout，清除它
+			if (this._wheelAccumulationTimeout) {
+				clearTimeout(this._wheelAccumulationTimeout);
+				this._wheelAccumulationTimeout = null;
+			}
+		} else {
+			// 累积后续事件
+			this._accumulatedWheelDelta += delta;
+
+			// 如果正在累积中，清除之前的定时器
+			if (this._wheelAccumulationTimeout) {
+				clearTimeout(this._wheelAccumulationTimeout);
+			}
+
+			// 设置新的定时器，处理累积的事件
+			this._wheelAccumulationTimeout = setTimeout(() => {
+				this._processAccumulatedWheel(opt);
+				this._lastWheelProcessTime = Date.now();
+
+				// 清理
+				this._accumulatedWheelDelta = 0;
+				this._wheelAccumulationTimeout = null;
+			}, this._wheelThrottleTime);
+		}
+
+		opt.e.preventDefault();
+		opt.e.stopPropagation();
+	}
+
+	/**
+	 * 处理累积的滚轮事件并应用缩放
+	 * @private
+	 * @param {Object} lastOpt 最后一个滚轮事件
+	 */
+	_processAccumulatedWheel(lastOpt) {
+		if (!this._wheelEvents.length) return;
+
+		const now = Date.now();
+
+		// Mac设备的轻量防抖检查 - 进一步减少冷却时间，确保响应性
+		if (this._isMac && now - this._lastMacAnimationTime < this._macAnimationCooldown) {
+			// 如果距离上次动画时间太短，只延迟很短时间，不阻塞太久
+			if (this._wheelAccumulationTimeout) {
+				clearTimeout(this._wheelAccumulationTimeout);
+			}
+			this._wheelAccumulationTimeout = setTimeout(
+				() => {
+					this._processAccumulatedWheel(lastOpt);
+				},
+				Math.min(this._macAnimationCooldown, 3)
+			); // 最多延迟3ms
+			return;
+		}
+
+		const currentZoom = this.canvas.getZoom();
+
+		// 分析滚轮事件模式，计算平均增量、速度和加速度
+		let sumDelta = 0;
+		let count = 0;
+		let earliestTime = now;
+		let latestTime = 0;
+		let point = {
+			x: lastOpt.e.offsetX,
+			y: lastOpt.e.offsetY,
+		};
+
+		// 判断是否在事件收集期间有平移或缩放动画
+		let hadPanAnimation = false;
+		let hadZoomAnimation = false;
+
+		// 计算平均增量和速度
+		this._wheelEvents.forEach((event) => {
+			sumDelta += event.delta;
+			count++;
+			earliestTime = Math.min(earliestTime, event.time);
+			latestTime = Math.max(latestTime, event.time);
+
+			// 使用最后记录的点作为缩放中心
+			if (event.time > latestTime) {
+				point = event.point;
+			}
+
+			// 检查是否有动画状态
+			if (event.hasPanAnimation) hadPanAnimation = true;
+			if (event.hasZoomAnimation) hadZoomAnimation = true;
+		});
+
+		// 计算平均增量
+		const avgDelta = sumDelta / count;
+
+		// 计算滚动速度 - 基于事件频率和时间跨度
+		const timeSpan = latestTime - earliestTime + 1; // 避免除以零
+		const eventsPerSecond = (count / timeSpan) * 1000;
+
+		// 速度系数: 速度越快，缩放越敏感
+		let speedFactor = Math.min(3, Math.max(0.5, eventsPerSecond / 10));
+
+		// 计算缩放因子，应用速度系数
+		// 针对Mac设备优化：Mac触控板的deltaY值通常较小，需要适度增加敏感度
+		let zoomFactorBase = 0.999;
+		if (this._isMac) {
+			// Mac设备的触控板需要适度的敏感度，避免过度反应
+			zoomFactorBase = 0.995; // 适度降低基数，增加缩放敏感度
+
+			// 检测是否为触控板滚动（小幅度、高频次的特征）
+			const avgAbsDelta = Math.abs(avgDelta);
+			if (avgAbsDelta < 50 && count > 2) {
+				// 触控板滚动，适度增加敏感度
+				speedFactor *= 1.6; // 适度增加敏感度倍数
+				zoomFactorBase = 0.993; // 进一步调整基数
+			}
+		}
+
+		const zoomFactor = zoomFactorBase ** (avgDelta * speedFactor);
+		let targetZoom = currentZoom * zoomFactor;
+
+		// 限制缩放范围
+		targetZoom = Math.min(Math.max(targetZoom, 0.1), 20);
+
+		// 根据滚动速度和缩放幅度计算动画持续时间
+		// 速度快时缩短动画时间，缩放幅度大时延长动画时间
+		const zoomRatio = Math.abs(targetZoom - currentZoom) / currentZoom;
+
+		let duration;
+		if (this._isMac) {
+			// Mac设备使用平衡的动画时间控制
+			if (speedFactor > 2) {
+				// 快速操作：快速但平滑
+				duration = Math.min(0.18, Math.max(0.08, (zoomRatio * 0.3) / Math.sqrt(speedFactor)));
+			} else if (speedFactor > 1.2) {
+				// 中等速度：标准响应
+				duration = Math.min(0.25, Math.max(0.1, (zoomRatio * 0.4) / Math.sqrt(speedFactor)));
+			} else {
+				// 慢速精确操作：确保平滑
+				duration = Math.min(0.3, Math.max(0.12, (zoomRatio * 0.5) / Math.sqrt(speedFactor)));
+			}
+		} else {
+			duration = Math.min(0.5, Math.max(0.15, (zoomRatio * 0.8) / Math.sqrt(speedFactor)));
+		}
+
+		// 根据滚动速度选择不同的缓动效果
+		let easeType;
+		if (this._isMac) {
+			// Mac设备使用更简单、性能更好的缓动函数
+			// 避免复杂的指数和回弹效果，减少计算量
+			if (speedFactor > 2) {
+				// 快速滚动：使用简单的缓出效果
+				easeType = "power2.out";
+			} else if (speedFactor > 1.2) {
+				// 中等速度：使用平滑的缓出
+				easeType = "power1.out";
+			} else {
+				// 慢速精确操作：使用线性过渡
+				easeType = "power1.out";
+			}
+		} else {
+			// 非Mac设备保持原有的缓动
+			easeType = speedFactor > 1.5 ? "power1.out" : "power2.out";
+		}
+
+		// 根据是否有其他动画正在进行，选择合适的动画方法
+		if (hadPanAnimation || this._wasPanning) {
+			// 如果有平移动画，使用组合动画以保持平滑过渡
+			this.animateCombinedTransform(point, targetZoom, {
+				duration: duration,
+				ease: easeType,
+			});
+		} else {
+			// 如果没有其他动画，使用标准缩放动画
+			this.animateZoom(point, targetZoom, {
+				duration: duration,
+				ease: easeType,
+			});
+		}
+
+		// 更新Mac设备的最后动画时间
+		if (this._isMac) {
+			this._lastMacAnimationTime = now;
+		}
+
+		// 清理事件记录
+		this._wheelEvents = [];
+	}
+
+	/**
+	 * 计算并应用拖动结束后的惯性效果
+	 * @param {Array} positions 拖动过程中记录的位置数组
+	 * @param {Boolean} isTouchDevice 是否是触摸设备
+	 */
+	applyInertiaEffect(positions, isTouchDevice) {
+		if (!positions || positions.length <= 1) return;
+
+		const lastPos = positions[positions.length - 1];
+		const firstPos = positions[0];
+		const deltaTime = lastPos.time - firstPos.time;
+
+		if (deltaTime <= 0) return;
+
+		// 计算速度向量 (像素/毫秒)
+		const velocityX = (lastPos.x - firstPos.x) / deltaTime;
+		const velocityY = (lastPos.y - firstPos.y) / deltaTime;
+		const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY);
+
+		// 仅当速度足够大时应用惯性效果
+		if (speed > 0.2) {
+			// 计算惯性距离，基于速度和衰减因子
+			const decayFactor = 300; // 调整此值以改变惯性效果的强度
+			const inertiaDistanceX = velocityX * decayFactor;
+			const inertiaDistanceY = velocityY * decayFactor;
+
+			// 计算目标位置
+			const vpt = this.canvas.viewportTransform;
+			const currentPos = {
+				x: -vpt[4],
+				y: -vpt[5],
+			};
+
+			const targetPos = {
+				x: currentPos.x - inertiaDistanceX,
+				y: currentPos.y - inertiaDistanceY,
+			};
+
+			// 应用惯性动画，速度越大，动画时间越长
+			const animationDuration = Math.min(1.2, Math.max(0.6, speed * 2));
+
+			// 应用惯性动画
+			this.animatePan(targetPos, {
+				duration: animationDuration, // 动态计算持续时间
+				ease: this._isMac ? "quart.out" : "power3.out", // Mac使用更自然的减速效果
+			});
+		}
+	}
+
+	/**
+	 * 平滑过渡停止所有动画
+	 * 用于在需要中断当前动画时提供更自然的过渡，而不是硬性中断
+	 * @param {Object} options 过渡选项
+	 */
+	smoothStopAnimations(options = {}) {
+		const duration = options.duration || 0.15; // 默认短暂过渡时间
+
+		// 处理缩放动画
+		if (this._zoomAnimation) {
+			const zoomObj = this._zoomAnimation.targets()[0];
+			const currentZoom = this.canvas.getZoom();
+
+			// 创建短暂的过渡动画到当前值
+			gsap.to(zoomObj, {
+				value: currentZoom,
+				duration: duration,
+				ease: this._isMac ? "circ.out" : "power1.out", // Mac使用更平滑的缓动
+				onUpdate: () => {
+					this.currentZoom.value = Math.round(zoomObj.value * 100);
+					this.canvas.renderAll();
+				},
+				onComplete: () => {
+					if (this._zoomAnimation) {
+						this._zoomAnimation.kill();
+						this._zoomAnimation = null;
+					}
+				},
+			});
+		}
+
+		// 处理平移动画
+		if (this._panAnimation) {
+			const panObj = this._panAnimation.targets()[0];
+			const vpt = this.canvas.viewportTransform;
+			const currentPos = { x: -vpt[4], y: -vpt[5] };
+
+			// 创建短暂的过渡动画到当前位置
+			gsap.to(panObj, {
+				x: currentPos.x,
+				y: currentPos.y,
+				duration: duration,
+				ease: this._isMac ? "circ.out" : "power1.out", // Mac使用更平滑的缓动
+				onUpdate: () => {
+					this._applyPan(panObj.x, panObj.y);
+				},
+				onComplete: () => {
+					if (this._panAnimation) {
+						this._panAnimation.kill();
+						this._panAnimation = null;
+					}
+				},
+			});
+		}
+	}
+
+	/**
+	 * 设置画布交互动画
+	 * 为对象交互添加流畅的动画效果
+	 */
+	setupInteractionAnimations() {
+		if (!this.canvas) return;
+
+		// 启用对象旋转的流畅动画
+		this._setupRotationAnimation();
+	}
+
+	/**
+	 * 设置旋转动画
+	 * @private
+	 */
+	_setupRotationAnimation() {
+		if (!fabric) return;
+
+		// 保存原始旋转方法
+		const originalRotate = fabric.Object.prototype.rotate;
+		const isMac = this._isMac; // 保存Mac检测结果
+
+		// 覆盖旋转方法以添加动画
+		fabric.Object.prototype.rotate = function (angle) {
+			const currentAngle = this.angle || 0;
+
+			if (Math.abs(angle - currentAngle) > 0.1) {
+				gsap.to(this, {
+					angle: angle,
+					duration: 0.3,
+					ease: isMac ? "back.out(0.3)" : "power2.out", // Mac使用轻微回弹
+					onUpdate: () => {
+						this.canvas && this.canvas.renderAll();
+					},
+				});
+				return this;
+			}
+
+			// 如果角度差异很小，使用原始方法
+			return originalRotate.call(this, angle);
+		};
+	}
+
+	/**
+	 * 处理滚轮缩放，同时兼容正在进行的平移动画
+	 * @param {Object} point 缩放中心点
+	 * @param {Number} targetZoom 目标缩放值
+	 * @param {Object} options 动画选项
+	 */
+	animateCombinedTransform(point, targetZoom, options = {}) {
+		if (!this.canvas) return;
+
+		// 限制缩放范围
+		targetZoom = Math.min(Math.max(targetZoom, 0.1), 20);
+
+		// 当前状态
+		const currentZoom = this.canvas.getZoom();
+		const currentVpt = [...this.canvas.viewportTransform];
+		const currentPos = { x: -currentVpt[4], y: -currentVpt[5] };
+
+		// 如果有正在进行的动画，先停止它们
+		if (this._combinedAnimation) {
+			this._combinedAnimation.kill();
+			this._combinedAnimation = null;
+		}
+
+		if (this._zoomAnimation) {
+			this._zoomAnimation.kill();
+			this._zoomAnimation = null;
+		}
+
+		if (this._panAnimation) {
+			this._panAnimation.kill();
+			this._panAnimation = null;
+		}
+
+		// 创建一个统一的变换对象来动画
+		const transform = {
+			zoom: currentZoom,
+			panX: currentVpt[4],
+			panY: currentVpt[5],
+			progress: 0, // 用于动画进度跟踪
+		};
+
+		// 获取平移目标位置（如果有的话）
+		let panTarget = { x: currentPos.x, y: currentPos.y };
+		if (this._wasPanning) {
+			// 如果之前有平移动画，尝试获取平移的目标位置
+			const vpt = this.canvas.viewportTransform;
+			panTarget = {
+				x: currentPos.x,
+				y: currentPos.y,
+			};
+		}
+
+		// 计算新的变换矩阵，同时考虑平移和缩放
+		const scaleFactor = targetZoom / currentZoom;
+
+		// 创建动画
+		this._combinedAnimation = gsap.to(transform, {
+			zoom: targetZoom,
+			progress: 1,
+			duration: options.duration || 0.3,
+			ease: options.ease || (this._isMac ? "expo.out" : "power2.out"), // Mac使用更平滑的缓动
+			onUpdate: () => {
+				// 计算当前动画阶段的混合变换
+				const currentScaleFactor = transform.zoom / currentZoom;
+
+				// 应用缩放
+				const vpt = this.canvas.viewportTransform;
+				vpt[0] = currentVpt[0] * (transform.zoom / currentZoom);
+				vpt[3] = currentVpt[3] * (transform.zoom / currentZoom);
+
+				// 平滑混合平移和缩放调整
+				const adjustX = (1 - currentScaleFactor) * point.x;
+				const adjustY = (1 - currentScaleFactor) * point.y;
+
+				// 如果存在平移目标，进行插值
+				if (this._wasPanning) {
+					const t = transform.progress;
+					const interpolatedX = currentPos.x * (1 - t) + panTarget.x * t;
+					const interpolatedY = currentPos.y * (1 - t) + panTarget.y * t;
+
+					// 结合缩放和平移的调整
+					vpt[4] = -interpolatedX * currentScaleFactor + adjustX;
+					vpt[5] = -interpolatedY * currentScaleFactor + adjustY;
+				} else {
+					// 只有缩放，保持中心点
+					vpt[4] = currentVpt[4] * currentScaleFactor + adjustX;
+					vpt[5] = currentVpt[5] * currentScaleFactor + adjustY;
+				}
+
+				// 更新缩放值显示
+				this.currentZoom.value = Math.round(transform.zoom * 100);
+				this.canvas.renderAll();
+			},
+			onComplete: () => {
+				this._combinedAnimation = null;
+				this._zoomAnimation = null;
+				this._panAnimation = null;
+				this._wasPanning = false;
+				this._wasZooming = false;
+
+				// 确保最终状态准确
+				this._applyZoom(point, targetZoom, true);
+			},
+		});
+	}
+
+	/**
+	 * 清理资源
+	 */
+	dispose() {
+		if (this._zoomAnimation) {
+			this._zoomAnimation.kill();
+			this._zoomAnimation = null;
+		}
+
+		if (this._panAnimation) {
+			this._panAnimation.kill();
+			this._panAnimation = null;
+		}
+
+		this._wheelEvents = [];
+		this.canvas = null;
+		this.currentZoom = null;
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
new file mode 100644
index 0000000..9664daf
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -0,0 +1,167 @@
+import { fabric } from 'fabric-with-all'
+import { ref } from 'vue'
+import { createCanvas } from '../tools/canvasFactory'
+import { AnimationManager } from './AnimationManager'
+import { detectDeviceType } from '../tools/index'
+import { CanvasEventManager } from "./events/CanvasEventManager";
+import { OperationType } from '../tools/layerHelper'
+
+interface CanvasInitOptions {
+	canvasRef: any
+	canvasViewWidth?: number
+	canvasViewHeight?: number
+	canvasWidth?: number
+	canvasHeight?: number
+}
+export class CanvasManager {
+	stateManager: any
+	layerManager: any
+	animationManager: any
+	eventManager: any
+	deviceInfo: any
+	canvas: any
+	canvasViewWidth: number
+	canvasViewHeight: number
+	canvasWidth: number
+	canvasHeight: number
+	currentZoom: any
+	constructor(options) {
+		this.stateManager = options.stateManager;
+		this.deviceInfo = detectDeviceType();
+		this.currentZoom = ref(100)
+	}
+	setCanvasViewSize(options) {
+		this.canvasViewWidth = options.canvasViewWidth || 1920
+		this.canvasViewHeight = options.canvasViewHeight || 1080
+	}
+	initCanvas(options: CanvasInitOptions) {
+		this.layerManager = this.stateManager.layerManager
+		this.setCanvasViewSize(options)
+		this.canvasWidth = options.canvasWidth || 750
+		this.canvasHeight = options.canvasHeight || 600
+		this.canvas = createCanvas(options.canvasRef.value, {
+			width: this.canvasViewWidth,
+			height: this.canvasViewHeight,
+			preserveObjectStacking: true,
+			enableRetinaScaling: true,
+			stopContextMenu: true,
+			fireRightClick: true,
+			backgroundColor: '#fff',
+		})
+		this.canvas.clipPath = new fabric.Rect({
+			left: 0,
+			top: 0,
+			width: this.canvasWidth,
+			height: this.canvasHeight
+		})
+		// 画布居中
+		const canvasX = this.canvasViewWidth / 2 - this.canvasWidth / 2
+		const canvasY = this.canvasViewHeight / 2 - this.canvasHeight / 2
+		this.canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
+		// 创建矩形
+		const rect = new fabric.Rect({
+			left: 20,
+			top: 20,
+			width: 100,
+			height: 100,
+			fill: '#f00',
+			info: {
+				id: 'rect1',
+				name: 'rect1',
+			}
+		})
+		this.canvas.add(rect)
+		//创建圆形
+		const circle = new fabric.Circle({
+			left: 200,
+			top: 200,
+			radius: 50,
+			fill: '#0f0',
+			info: {
+				id: 'circle',
+				name: 'circle',
+			}
+		})
+		this.canvas.add(circle)
+		// 文字
+		const text = new fabric.Text('Hello World', {
+			left: 300,
+			top: 300,
+			fontSize: 24,
+			fill: '#000',
+			info: {
+				id: 'text1',
+				name: 'text',
+			}
+		})
+		this.canvas.add(text)
+		// 文字
+		const text2 = new fabric.Text('Hello World', {
+			left: 300,
+			top: 300,
+			fontSize: 24,
+			fill: '#000',
+			info: {
+				id: 'text2',
+				name: 'tex2t',
+			}
+		})
+		this.canvas.add(text2)
+		this.animationManager = new AnimationManager(this.canvas, {
+			currentZoom: this.currentZoom,
+			canvasManager: this,
+			wheelThrottleTime: 15, // 降低滚轮事件节流时间，提高响应性
+			defaultEase: "power2.lin",
+			defaultDuration: 0.3, // 缩短默认动画时间
+		});
+		this.setupCanvasEvents()
+		this.stateManager.toolManager.setTool(OperationType.SELECT)
+		this.layerManager.updateLayers()
+		this.layerManager.setActiveID(text2.info.id)
+	}
+	setupCanvasEvents() {
+		// 创建画布事件管理器
+		this.eventManager = new CanvasEventManager(this.canvas, {
+			canvasManager: this,
+			animationManager: this.animationManager,
+			toolManager: this.stateManager.toolManager,
+		});
+		// 设置动画交互效果
+		this.animationManager.setupInteractionAnimations();
+	}
+	resetZoom() {
+		this.animationManager.resetZoom()
+	}
+	getObjects() {
+		return this.canvas.getObjects() || []
+	}
+	getObjectById(id: string) {
+		return this.getObjects().find((item: any) => item.info.id === id)
+	}
+	renderAll() {
+		this.canvas.renderAll()
+	}
+
+	deleteObjectById(id: string) {
+		const object = this.getObjectById(id)
+		if (object) {
+			this.canvas.remove(object)
+			this.layerManager.updateLayers()
+			this.renderAll()
+		}
+	}
+	// 拖拽排序
+	dragSort(id, newIndex) {
+		this.canvas.moveTo(this.getObjectById(id), newIndex)
+		this.layerManager.updateLayers()
+		this.renderAll()
+	}
+	getBitObjects() {
+		return this.getObjects().map(v => {
+			const object = v.toJSON("info");
+			return object
+		})
+	}
+
+
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/EventManager.ts b/src/components/Canvas/DepthCanvas/manager/EventManager.ts
index b2e616c..03ac0ee 100644
--- a/src/components/Canvas/DepthCanvas/manager/EventManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/EventManager.ts
@@ -1,4 +1,4 @@
-import { TOOLS } from "./ToolManager"
+import { OperationType } from "../tools/layerHelper"
 export class EventManager {
 	stateManager: any
 	vueFlow: any
@@ -30,14 +30,14 @@ export class EventManager {
 	handleClick(event: any) {
 		this.stateManager.setActiveNodeID("")
 		const tool = this.stateManager.tool.value
-		if (tool === TOOLS.TEXT) {
+		if (tool === OperationType.TEXT) {
 			const { x, y, zoom } = this.vueFlow.value.viewport
 			const position = {
 				x: (event.offsetX - x) / zoom,
 				y: (event.offsetY - y) / zoom
 			}
 			this.stateManager.nodeManager.createTextNode({ position })
-			this.stateManager.toolManager.setTool(TOOLS.SELECT)
+			this.stateManager.toolManager.setTool(OperationType.SELECT)
 		}
 	}
 
diff --git a/src/components/Canvas/DepthCanvas/manager/FlowManager.ts b/src/components/Canvas/DepthCanvas/manager/FlowManager.ts
deleted file mode 100644
index f2cc897..0000000
--- a/src/components/Canvas/DepthCanvas/manager/FlowManager.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export class FlowManager {
-	stateManager: any
-	vueFlow: any
-	constructor(options) {
-		this.stateManager = options.stateManager;
-		this.vueFlow = options.vueFlow
-	}
-	setZoom(zoom: number) {
-		this.stateManager.zoom.value = zoom
-		this.vueFlow.value.zoomTo(zoom)
-	}
-	getNodeById(id: string) {
-		return this.vueFlow.value.getNode(id)
-	}
-	getLastNode() {
-		const lastNode = this.stateManager.getLastNode()
-		if (lastNode?.id) {
-			return this.vueFlow.value.getNode(lastNode.id)
-		}
-		return null;
-	}
-	getSubordNodeByID(id: string) {
-		return this.vueFlow.value.getNodes?.find((v) => v.data.superiorID === id)
-	}
-
-}
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
new file mode 100644
index 0000000..e029abb
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+
+export class LayerManager {
+	stateManager: any
+	canvasManager: any
+	layers: any
+	activeID: any
+	constructor(options) {
+		this.stateManager = options.stateManager;
+		this.canvasManager = options.canvasManager;
+		this.layers = ref([])
+		this.activeID = ref("")
+	}
+	setActiveID(id: string) { this.activeID.value = id }
+	getLayerByID(id) {
+		return this.layers.value.find((item: any) => item.info.id === id)
+	}
+	setLayerNameByID(id, name: string) {
+		const layer = this.getLayerByID(id)
+		if (layer) {
+			layer.info.name = name
+			this.canvasManager.renderAll()
+		}
+	}
+	setLayerVisibleByID(id, visible: boolean) {
+		const layer = this.getLayerByID(id)
+		if (layer) {
+			layer.set({
+				visible: visible
+			})
+			this.canvasManager.renderAll()
+		}
+	}
+	deleteLayerByID(id) {
+		this.canvasManager.deleteObjectById(id)
+	}
+	// 拖拽排序
+	dragSort(id, newIndex) {
+		const index = Math.abs(this.layers.value.length - newIndex - 1)
+		this.canvasManager.dragSort(id, index)
+	}
+	// 更新图层列表
+	updateLayers() {
+		this.layers.value = this.canvasManager.getObjects().reverse()
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/NodeManager.ts b/src/components/Canvas/DepthCanvas/manager/NodeManager.ts
deleted file mode 100644
index 47f0d19..0000000
--- a/src/components/Canvas/DepthCanvas/manager/NodeManager.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { createId } from '../../tools/tools'
-import { NODE_DATATYPE, NODE_COMPONENT, NODE_DATATIER } from '../tools/index.d'
-interface NodeData {
-	type?: string
-	component?: any// 节点组件
-	data?: object// 节点数据
-	tier?: string// 节点层级
-	isHeader?: boolean// 是否显示头
-	superiorID?: string// 上级节点ID
-	disableDelete?: boolean// 是否禁用删除
-	disableCopy?: boolean// 是否禁用复制
-}
-interface NodeOptions {
-	id?: string
-	position?: { x: number, y: number }
-	positionX?: number
-	positionY?: number
-	component?: any
-	data?: NodeData
-}// 不可传入type class （内部使用）
-
-export class NodeManager {
-	stateManager: any
-	vueFlow: any
-	nodesep = 100 // 节点间距
-	ranksep = 100 // 层级间距
-	constructor(options) {
-		this.stateManager = options.stateManager;
-		this.vueFlow = options.vueFlow
-	}
-
-	/** 删除节点 */
-	deleteNode(id: string) {
-		this.stateManager.deleteNode(id)
-	}
-	/** 添加节点 */
-	addNode(node: any) {
-		this.stateManager.addNode(node)
-	}
-
-	/** 创建节点 */
-	createNode(options: NodeOptions) {
-		const superiorID = options?.data?.superiorID
-		const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
-		const id = options.id || createId()
-		const positionX = options.positionX || 0
-		const positionY = options.positionY || 0
-		const position = options.position ||
-			(!snode ?
-				{ x: positionX, y: positionY } :
-				{
-					x: snode.position.x + snode.dimensions.width + this.nodesep + positionX,
-					y: snode.position.y + positionY
-				})
-		const data = options?.data || {}
-		data['component'] = options.component
-		const options_ = {
-			id,
-			position,
-			data
-		}
-		this.addNode(options_)
-		return options_;
-	}
-	/** 创建结果节点 */
-	createResultNode(options?: NodeOptions) {
-		const options_ = {
-			...(options ? options : {}),
-			component: NODE_COMPONENT.RESULT_IMAGE,
-			data: {
-				tier: NODE_DATATIER.RESULT_IMAGE,
-				type: NODE_DATATYPE.RESULT_IMAGE,
-				isHeader: true,
-				...(options?.data || {}),
-			},
-		}
-		return this.createNode(options_)
-	}
-	/** 创建卡片选择节点 */
-	createCardsSelect(options?: NodeOptions) {
-		const options_ = {
-			...(options ? options : {}),
-			component: NODE_COMPONENT.CARD,
-			positionY: 50,
-			data: {
-				tier: NODE_DATATIER.CARDS_SELECT,
-				type: NODE_DATATYPE.CARDS_SELECT,
-				...(options?.data || {}),
-			},
-		}
-		return this.createNode(options_)
-	}
-	/** 创建卡片节点 */
-	createCardNode(options?: NodeOptions) {
-		const options_ = {
-			...(options ? options : {}),
-			component: NODE_COMPONENT.CARD,
-			data: {
-				...(options?.data || {}),
-			}
-		}
-		return this.createNode(options_)
-	}
-	/** 创建文本节点 */
-	createTextNode(options?: NodeOptions) {
-		const options_ = {
-			...(options ? options : {}),
-			component: NODE_COMPONENT.TEXT,
-			data: {
-				...(options?.data || {}),
-			}
-		}
-		return this.createNode(options_)
-	}
-
-	copyNodeById(id: string) {
-		const node = this.stateManager.getNodeById(id)
-		const flowNode = this.stateManager.flowManager.getNodeById(id)
-		if (!node) return console.warn(`${id}找不到对应节点`)
-		if (node.data?.disableCopy) return console.warn(`${id}节点已禁用复制`)
-		const node_ = {
-			...JSON.parse(JSON.stringify(node)),
-			id: createId(),
-			position: {
-				x: node.position.x,
-				y: node.position.y + (flowNode?.dimensions?.height || 0) + this.ranksep,
-			}
-		}
-		delete node_.data?.superiorID
-		delete node_.data?.disableDelete
-		this.stateManager.addNode(node_)
-	}
-}
diff --git a/src/components/Canvas/DepthCanvas/manager/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index 1d5bba8..b970261 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -4,183 +4,67 @@ import { ElMessageBox } from 'element-plus'
 import i18n from '@/lang'
 const t = i18n.global.t
 
-export interface NodesItem {
-	id: string
-	type: string
-	class: string
-	position: { x: number, y: number }
-	data: { component: any, type: string, superiorID?: string }
-}
-export class StateManager {
-	vueFlow: any
-	activeNodeID: any
-	nodes: any
-	nodes_: any
-	edges: any
-	zoom: any
-	tool: any
-	cursor: any
-	// 节点是否可拖动
-	nodesDraggable: any
-	// 拖动时是否可以平移画布
-	panOnDrag: any
 
+export class StateManager {
 	// 历史记录-撤回/重做
 	mxHistory: any
 	historyList: any
 	historyIndex: any
 
 	// 管理器	
+	canvasManager: any
+	layerManager: any
 	eventManager: any
-	flowManager: any
-	nodeManager: any
 	toolManager: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
-		options.flowManager && (this.flowManager = options.flowManager)
-		options.nodeManager && (this.nodeManager = options.nodeManager)
+		options.canvasManager && (this.canvasManager = options.canvasManager)
+		options.layerManager && (this.layerManager = options.layerManager)
 		options.toolManager && (this.toolManager = options.toolManager)
 	}
 	constructor(options) {
-		this.vueFlow = options.vueFlow
-		this.zoom = ref(1)
-		this.tool = ref("")
-		this.cursor = ref("")
-		this.nodesDraggable = ref(false)
-		this.panOnDrag = ref(false)
 		this.mxHistory = ref(50)
 		this.historyList = ref([])
 		this.historyIndex = ref(0)
 
 		this.activeNodeID = ref("")
-		this.nodes = ref<NodesItem[]>([]);
-		this.nodes_ = computed(() => {
-			return this.nodes.value.map((node, index) => {
-				const obj = node;
-				const superiorID = node.data.superiorID;
-				const isSuperior = this.nodes.value.some((v) => v.id === superiorID)
-				const isSubord = this.nodes.value.some((v) => v.data.superiorID === node.id)
-				if (!isSuperior && isSubord) {// 没有上级 有下级
-					obj.type = NODE_TYPE.INPUT;
-				} else if (isSuperior && isSubord) {// 有上级 有下级
-					obj.type = NODE_TYPE.SECONDARY;
-				} else if (isSuperior && !isSubord) {// 有上级 没有下级
-					obj.type = NODE_TYPE.OUTPUT;
-				} else {// 其他情况-没有上级 没有下级
-					obj.type = NODE_TYPE.ALONE;
-				}
-				return obj
-			})
-		})
-
-		this.edges = computed(() => {
-			const arr = []
-			this.nodes.value.forEach((node, index) => {
-				const superiorID = node.data.superiorID;
-				const isSuperior = this.nodes.value.some((v) => v.id === superiorID)
-				if (superiorID && isSuperior) {
-					const source = node.data.superiorID
-					const target = node.id
-					arr.push({
-						id: `el-${source}-${target}`,
-						source: source,
-						target: target,
-						selectable: false,
-						type: 'default'
-					})
-				}
-			})
-			return arr
-		})
 
 	}
 	/** 设置激活节点 */
 	setActiveNodeID(id: string) { this.activeNodeID.value = id }
-	/** 添加节点 */
-	addNode(node: NodesItem) {
-		this.nodes.value.push(node);
-		this.recordState()
-	}
-	/** 删除节点 */
-	async deleteNode(id: string, { isElMessageBox } = { isElMessageBox: false }) {
-		const node = this.getNodeById(id)
-		if (!node) return console.warn(`没有找到指定id:${id}`)
-		if (node.data.disableDelete) return console.warn('该节点禁用删除')
-		let deletePromise: any = true
-		if (isElMessageBox) {
-			deletePromise = await new Promise<void>((resolve, reject) => {
-				ElMessageBox.confirm(
-					t('flowCanvas.deleteCardConfirm'),
-					'',
-					{
-						confirmButtonText: t('flowCanvas.confirm'),
-						cancelButtonText: t('flowCanvas.cancel'),
-					}
-				).then(() => {
-					resolve(true)
-				}).catch(() => {
-					resolve(false)
-				})
-			})
-		}
-		if (!deletePromise) return console.log('删除操作被取消')
-		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
-		this.recordState()
-	}
-	/** 获取节点 */
-	getNodeById(id: string) { return this.nodes.value.find((node: NodesItem) => node.id === id) }
-	/** 获取下级节点 */
-	getSubordNodeByID(id: string) { return this.nodes.value.find((node: NodesItem) => node.data.superiorID === id) }
-	getLastNode() { return this.nodes.value[this.nodes.value.length - 1] }
-	/** 设置工具 */
-	setTool(tool: string) { this.tool.value = tool }
-	/** 设置光标 */
-	setCursor(v: string) { this.cursor.value = v }
-	/** 设置节点是否可拖动 */
-	setNodesDraggable(v: boolean) { this.nodesDraggable.value = v }
-	/** 设置是否可以平移画布 */
-	setPanOnDrag(v: boolean) { this.panOnDrag.value = v }
-	/** 设置节点层级至最顶部 */
-	bringToFont(id) {
-		const fromIndex = this.nodes.value.findIndex(item => item.id === id)
-		if (fromIndex === -1) return console.warn(`没有找到指定id:${id}`)
-		this.nodes.value.splice(this.nodes.value.length - 1, 0, ...this.nodes.value.splice(fromIndex, 1))
-	}
-	/** 设置节点层级至最低部 */
-	sendToBack(id) {
-		const fromIndex = this.nodes.value.findIndex(item => item.id === id)
-		if (fromIndex === -1) return console.warn(`没有找到指定id:${id}`)
-		this.nodes.value.splice(0, 0, ...this.nodes.value.splice(fromIndex, 1))
-	}
+
+
+
+
 	/** 记录状态 */
 	recordState() {
-		if (this.historyIndex.value < this.historyList.value.length - 1) {
-			this.historyList.value.splice(this.historyIndex.value + 1)
-		}
-		const state = {
-			nodes: JSON.stringify(this.nodes.value)
-		}
-		this.historyList.value.push(state)
-		const size = this.historyList.value.length - this.mxHistory.value
-		if (size > 0) this.historyList.value.splice(0, size)
-		this.historyIndex.value = this.historyList.value.length - 1
+		// if (this.historyIndex.value < this.historyList.value.length - 1) {
+		// 	this.historyList.value.splice(this.historyIndex.value + 1)
+		// }
+		// const state = {
+		// 	nodes: JSON.stringify(this.nodes.value)
+		// }
+		// this.historyList.value.push(state)
+		// const size = this.historyList.value.length - this.mxHistory.value
+		// if (size > 0) this.historyList.value.splice(0, size)
+		// this.historyIndex.value = this.historyList.value.length - 1
 	}
 	/** 撤回状态 */
 	undoState() {
-		var index = this.historyIndex.value - 1
-		const state = this.historyList.value[index]
-		if (!state) return
-		this.historyIndex.value = index
-		this.nodes.value = JSON.parse(state.nodes)
+		// var index = this.historyIndex.value - 1
+		// const state = this.historyList.value[index]
+		// if (!state) return
+		// this.historyIndex.value = index
+		// this.nodes.value = JSON.parse(state.nodes)
 	}
 	/** 重做状态 */
 	redoState() {
-		var index = this.historyIndex.value + 1
-		const state = this.historyList.value[index]
-		if (!state) return
-		this.historyIndex.value = index
-		this.nodes.value = JSON.parse(state.nodes)
+		// var index = this.historyIndex.value + 1
+		// const state = this.historyList.value[index]
+		// if (!state) return
+		// this.historyIndex.value = index
+		// this.nodes.value = JSON.parse(state.nodes)
 	}
 
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
index 019f3b6..4ef5177 100644
--- a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
@@ -1,52 +1,69 @@
-export const TOOLS = {
-	SELECT: "SELECT",
-	MOVE: "MOVE",
-	BRUSH: "BRUSH",
-	ERASER: "ERASER",
-	IMAGE: "IMAGE",
-	SELECTBOX: "SELECTBOX",
-	RECTANGLE: "RECTANGLE",
-	TEXT: "TEXT",
-	UNDO: "UNDO",
-	REDO: "REDO",
-}
-export const tools = [
-	/** 选择工具 */
-	{
-		name: TOOLS.SELECT,
-		nodesDraggable: true,
-		panOnDrag: false,
-	},
-	/** 移动工具 */
-	{
-		name: TOOLS.MOVE,
-		nodesDraggable: false,
-		panOnDrag: true,
-	},
-	/** 文本工具 */
-	{
-		name: TOOLS.TEXT,
-		cursor: "text",
-		nodesDraggable: false,
-		panOnDrag: false,
-	},
-
-]
+import { ref } from 'vue'
+import { OperationType } from '../tools/layerHelper'
 export class ToolManager {
 	stateManager: any
-	vueFlow: any
+	canvasManager: any
+	currentTool: any
+	tools: any[]
 	constructor(options) {
 		this.stateManager = options.stateManager;
-		this.vueFlow = options.vueFlow
-		this.setTool(TOOLS.SELECT)
+		this.canvasManager = options.canvasManager;
+		this.currentTool = ref(null)
+		this.tools = [
+			/** 选择工具 */
+			{
+				name: OperationType.SELECT,
+				cursor: "default",
+				setup: this.setupSelectTool.bind(this),
+				selection: true,
+			},
+			/** 移动工具 */
+			{
+				name: OperationType.PAN,
+				cursor: "grab",
+				setup: this.setupMoveTool.bind(this),
+			},
+			/** 画笔工具 */
+			{
+				name: OperationType.DRAW,
+				cursor: "crosshair",
+			},
+			/** 橡皮擦工具 */
+			{
+				name: OperationType.ERASER,
+				cursor: "crosshair",
+			},
+			/** 智能选框工具 */
+			{
+				name: OperationType.SELECTBOX,
+				cursor: "crosshair",
+			},
+			/** 矩形工具 */
+			{
+				name: OperationType.RECTANGLE,
+				cursor: "crosshair",
+			},
+		]
 	}
 	setTool(value: string) {
-		const tool = tools.find((t) => t.name === value)
+		const tool = this.tools.find((t) => t.name === value)
 		if (!tool) return console.warn(`工具${tool}不存在`)
-		this.stateManager.tool.value = tool.name
-		this.stateManager.setNodesDraggable(!!tool.nodesDraggable)
-		this.stateManager.setPanOnDrag(!!tool.panOnDrag)
-		this.stateManager.setCursor(tool.cursor || "")
-	}
+		this.currentTool.value = tool.name
+		this.canvasManager.canvas.defaultCursor = tool.cursor
+		this.setCanvasEvented(!!tool.selection)
+		this.canvasManager.canvas.isDragging = !!tool.isDragging
 
+		if (tool.setup) tool.setup()
+	}
+	// 切换工具时，设置画布事件
+	setCanvasEvented(value: boolean) {
+		this.canvasManager.canvas.selection = value
+		this.canvasManager.canvas.getObjects().forEach((v) => v.evented = value)
+	}
+	/** 选择工具 */
+	setupSelectTool() {
+	}
+	/** 移动工具 */
+	setupMoveTool() {
+	}
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
new file mode 100644
index 0000000..ded2794
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -0,0 +1,1144 @@
+import { isBoolean } from "lodash-es";
+import { OperationType, OperationTypes } from "../../tools/layerHelper";
+
+export class CanvasEventManager {
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.canvasManager = options.canvasManager;
+		this.toolManager = options.toolManager || null;
+		this.animationManager = options.animationManager;
+		this.thumbnailManager = options.thumbnailManager;
+		this.activeElementId = options.activeElementId || { value: null };
+		this.layerManager = options.layerManager || null;
+		this.layers = options.layers || null;
+		this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID
+
+		// 事件处理的内部状态 - 优化设备检测
+		this.deviceInfo = this._detectDeviceType();
+		this.dragStartTime = 0;
+		this.lastMousePositions = [];
+		this.positionHistoryLimit = 5; // 追踪鼠标位置的历史记录，用于计算速度
+		this.longPressTimer = null;
+		this.longPressThreshold = 500;
+
+		// 初始化所有事件
+		this.initEvents();
+	}
+
+	initEvents() {
+		this.setupZoomEvents();
+
+		// 优化三端设备的事件处理逻辑
+		if (this.deviceInfo.isMobile || this.deviceInfo.isTablet) {
+			// 真正的移动设备和平板设备使用触摸事件
+			this.setupTouchEvents();
+		} else {
+			// PC 和 Mac 设备主要使用鼠标事件
+			this.setupMouseEvents();
+		}
+
+		// Mac 设备需要额外的触摸手势支持（用于特殊场景）
+		if (this.deviceInfo.isMac && this.deviceInfo.hasTouchSupport) {
+			this.setupMacTouchGestures();
+		}
+
+		// 共享事件
+		// this.setupSelectionEvents();
+		// this.setupObjectEvents();
+		// this.setupDoubleClickEvents();
+
+		// this.setupHandlePathCreated();
+	}
+
+	setupZoomEvents() {
+		// 水平/垂直滚动相关状态
+		this._scrollWheelEvents = [];
+		this._scrollAccumulatedDelta = { x: 0, y: 0 };
+		this._scrollAccumulationTimeout = null;
+		this._scrollAccumulationTime = 100; // 降低滚轮累积时间窗口
+		this._lastScrollTime = 0; // 跟踪上次滚动时间
+		this._scrollThrottleDelay = 5; // 滚动节流延迟(毫秒)
+
+		// 缩放处理 - 使用动画管理器，针对 Mac 设备优化
+		this.canvas.on("mouse:wheel", (opt) => {
+			// Mac 设备双指滚动优化：确保滚动事件正确处理
+			if (this.deviceInfo.isMac) {
+				// Mac设备的简化处理逻辑，减少不必要的动画中断
+				// 让动画管理器自行处理冲突，避免过度干预
+			} else {
+				// 非 Mac 设备的标准处理
+				if (
+					this.animationManager._panAnimation ||
+					this.animationManager._zoomAnimation
+				) {
+					this.animationManager._wasPanning =
+						!!this.animationManager._panAnimation;
+					this.animationManager._wasZooming =
+						!!this.animationManager._zoomAnimation;
+					this.animationManager.smoothStopAnimations({ duration: 0.1 });
+				}
+			}
+
+			// 按住 Ctrl 键时实现垂直滚动（Mac 下是 Cmd 键）
+			const isCtrlOrCmd = this.deviceInfo.isMac ? opt.e.metaKey : opt.e.ctrlKey;
+			if (isCtrlOrCmd) {
+				this.handleScrollWheel(opt, "vertical");
+				opt.e.preventDefault();
+				return;
+			}
+
+			// 按住 Shift 键时实现水平滚动
+			if (opt.e.shiftKey) {
+				this.handleScrollWheel(opt, "horizontal");
+				opt.e.preventDefault();
+				return;
+			}
+
+			// 标准缩放行为 - 让 AnimationManager 处理平滑过渡
+			// Mac 设备下的双指滚动将直接进入这里进行缩放
+			this.animationManager.handleMouseWheel(opt);
+		});
+	}
+
+	/**
+	 * 处理滚轮滚动事件
+	 * @param {Object} opt 滚轮事件对象
+	 * @param {String} direction 滚动方向: 'vertical' 或 'horizontal'
+	 */
+	handleScrollWheel(opt, direction) {
+		// 获取当前视图变换
+		const vpt = this.canvas.viewportTransform.slice(0); // 创建副本避免直接修改
+		const zoom = this.canvas.getZoom();
+
+		// 计算滚动量 - 根据方向决定是水平还是垂直滚动
+		let deltaX = 0;
+		let deltaY = 0;
+
+		// 设置滚动方向和距离
+		if (direction === "horizontal") {
+			deltaX = opt.e.deltaY; // 水平滚动
+		} else {
+			deltaY = opt.e.deltaY; // 垂直滚动
+		}
+
+		// 计算滚动因子，基于缩放级别和设备类型调整
+		let scrollFactor = Math.max(0.4, Math.min(1, 1 / zoom));
+
+		// Mac 设备优化：触控板滚动通常比鼠标滚轮更敏感
+		if (this.deviceInfo.isMac) {
+			const isMacTrackpadScroll =
+				Math.abs(opt.e.deltaY) < 100 && opt.e.deltaMode === 0;
+			if (isMacTrackpadScroll) {
+				// Mac 触控板滚动更细腻，需要调整滚动因子
+				scrollFactor *= 0.8; // 降低滚动敏感度
+			}
+		}
+
+		// 直接应用滚动变化，不使用累积和计时器
+		vpt[4] -= deltaX * scrollFactor;
+		vpt[5] -= deltaY * scrollFactor;
+
+		// 直接设置新的视图变换，不使用动画
+		this.canvas.setViewportTransform(vpt);
+
+		// 请求重新渲染画布
+		this.canvas.renderAll();
+	}
+
+	/**
+	 * 处理累积的滚轮滚动事件并应用平移
+	 * @private
+	 * @param {String} direction 滚动方向
+	 */
+	_processAccumulatedScroll(direction) {
+		// 这个函数不再需要，但为了兼容性保留空实现
+		// 所有滚动逻辑已经移到 handleScrollWheel 中直接处理
+		return;
+	}
+
+	/**
+	 * 停止所有惯性动画
+	 * @param {boolean} smooth 是否平滑过渡，默认为 false（立即停止）
+	 */
+	stopInertiaAnimation(smooth = false) {
+		if (this.animationManager) {
+			if (this.animationManager._panAnimation && !smooth) {
+				this.animationManager._panAnimation.kill();
+				this.animationManager._panAnimation = null;
+			}
+			if (this.animationManager._zoomAnimation && !smooth) {
+				this.animationManager._zoomAnimation.kill();
+				this.animationManager._zoomAnimation = null;
+			}
+		}
+	}
+
+	/**
+	 * 设置鼠标事件处理
+	 */
+	setupMouseEvents() {
+		// 鼠标按下事件
+		this.canvas.on("mouse:down", (opt) => {
+			// console.log("==========鼠标按下",opt)
+			// 平滑停止任何正在进行的惯性动画
+			this.stopInertiaAnimation(true);
+
+			//   if (opt.e.which === 3 && this.toolManager.currentTool.value === OperationType.SELECT) {
+			// 	console.log("==========选择模式鼠标右击画布对象")
+
+			//   } else 
+			if (
+				opt.e.altKey ||
+				opt.e.which === 2 ||
+				this.toolManager.currentTool.value === OperationType.PAN
+			) {
+				this.canvas.isDragging = true;
+				this.canvas.lastPosX = opt.e.clientX;
+				this.canvas.lastPosY = opt.e.clientY;
+				this.canvas.defaultCursor = "grabbing";
+
+				// 记录拖动开始时间和位置，用于计算速度
+				this.dragStartTime = Date.now();
+				this.lastMousePositions = []; // 重置位置历史
+
+				if (this.canvas.isDragging) {
+					this.canvas.selection = false;
+					this.canvas.renderAll();
+				}
+			}
+		});
+
+		// 鼠标移动事件
+		this.canvas.on("mouse:move", (opt) => {
+			if (!this.canvas.isDragging) return;
+
+			const vpt = this.canvas.viewportTransform;
+			vpt[4] += opt.e.clientX - this.canvas.lastPosX;
+			vpt[5] += opt.e.clientY - this.canvas.lastPosY;
+
+			// 记录鼠标位置和时间，用于计算惯性
+			const now = Date.now();
+			this.lastMousePositions.push({
+				x: opt.e.clientX,
+				y: opt.e.clientY,
+				time: now,
+			});
+
+			// 保持历史记录在限定数量内
+			if (this.lastMousePositions.length > this.positionHistoryLimit) {
+				this.lastMousePositions.shift();
+			}
+
+			this.canvas.renderAll();
+			this.canvas.lastPosX = opt.e.clientX;
+			this.canvas.lastPosY = opt.e.clientY;
+		});
+
+		// 鼠标抬起事件
+		this.canvas.on("mouse:up", (opt) => {
+			this.handleDragEnd(opt);
+		});
+	}
+
+	/**
+	 * 设置触摸事件处理 - 修复iPad触摸事件支持
+	 */
+	setupTouchEvents() {
+		// 启用Fabric.js的指针事件支持（适用于触摸设备）
+		this.canvas.enablePointerEvents = true;
+
+		// 触摸状态管理
+		this.touchState = {
+			isZooming: false,
+			initialDistance: 0,
+			initialZoom: 1,
+			lastTouchTime: 0,
+			lastZoomTime: 0,
+			zoomThrottle: 16, // 约60fps的节流
+		};
+
+		// iPad特殊处理：禁用默认的触摸行为
+		if (this.deviceInfo.isTablet) {
+			document.addEventListener(
+				"touchstart",
+				(e) => {
+					if (e.target.closest("canvas")) {
+						e.preventDefault();
+					}
+				},
+				{ passive: false }
+			);
+
+			document.addEventListener(
+				"touchmove",
+				(e) => {
+					if (e.target.closest("canvas")) {
+						e.preventDefault();
+					}
+				},
+				{ passive: false }
+			);
+		}
+
+		// 使用标准的mouse事件，Fabric.js会自动处理触摸转换
+		this.canvas.on("mouse:down", (opt) => {
+			// 只在PAN模式下处理触摸事件
+			if (this.toolManager.currentTool.value !== OperationType.PAN) {
+				return;
+			}
+
+			// 平滑停止任何正在进行的惯性动画
+			this.stopInertiaAnimation(true);
+
+			// 检查是否是触摸事件
+			const isTouch = opt.e.type && opt.e.type.includes("touch");
+			const touches =
+				opt.e.touches || (opt.e.originalEvent && opt.e.originalEvent.touches);
+
+			if (isTouch && touches && touches.length === 2) {
+				// 双指触摸 - 用于缩放
+				this.touchState.isZooming = true;
+				this.touchState.initialDistance = this.getTouchDistance(
+					touches[0],
+					touches[1]
+				);
+				this.touchState.initialZoom = this.canvas.getZoom();
+
+				// 计算缩放中心点
+				const centerX = (touches[0].clientX + touches[1].clientX) / 2;
+				const centerY = (touches[0].clientY + touches[1].clientY) / 2;
+				this.touchState.zoomCenter = { x: centerX, y: centerY };
+
+				opt.e.preventDefault();
+			} else if (isTouch && touches && touches.length === 1) {
+				// 单指触摸 - 用于拖拽
+				this.canvas.isDragging = true;
+				this.canvas.lastPosX = touches[0].clientX;
+				this.canvas.lastPosY = touches[0].clientY;
+
+				this.dragStartTime = Date.now();
+				this.lastMousePositions = [];
+
+				this.canvas.selection = false;
+				opt.e.preventDefault();
+			} else if (!isTouch) {
+				// 鼠标事件 - 用于拖拽
+				this.canvas.isDragging = true;
+				this.canvas.lastPosX = opt.e.clientX;
+				this.canvas.lastPosY = opt.e.clientY;
+
+				this.dragStartTime = Date.now();
+				this.lastMousePositions = [];
+
+				this.canvas.selection = false;
+				opt.e.preventDefault();
+			}
+		});
+
+		// 触摸移动事件 - 优化性能
+		this.canvas.on("mouse:move", (opt) => {
+			// 只在PAN模式下处理
+			if (this.toolManager.currentTool.value !== OperationType.PAN) {
+				return;
+			}
+
+			// 检查是否是触摸事件
+			const isTouch = opt.e.type && opt.e.type.includes("touch");
+			const touches =
+				opt.e.touches || (opt.e.originalEvent && opt.e.originalEvent.touches);
+
+			if (
+				isTouch &&
+				touches &&
+				touches.length === 2 &&
+				this.touchState.isZooming
+			) {
+				// 双指缩放处理 - 修复抖动问题
+				const currentDistance = this.getTouchDistance(touches[0], touches[1]);
+
+				// 防止除零和异常值
+				if (this.touchState.initialDistance === 0 || currentDistance === 0) {
+					return;
+				}
+
+				const scale = currentDistance / this.touchState.initialDistance;
+
+				// 防止抖动：忽略微小的变化
+				if (Math.abs(scale - 1) < 0.01) {
+					return;
+				}
+
+				const newZoom = this.touchState.initialZoom * scale;
+
+				// 限制缩放范围
+				const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
+
+				// 使用缩放中心点进行缩放
+				const point = new fabric.Point(
+					this.touchState.zoomCenter.x,
+					this.touchState.zoomCenter.y
+				);
+
+				this.canvas.zoomToPoint(point, clampedZoom);
+				opt.e.preventDefault();
+				return;
+			}
+
+			if (!this.canvas.isDragging) return;
+
+			let currentX, currentY;
+
+			if (isTouch && touches && touches.length === 1) {
+				// 单指触摸移动
+				currentX = touches[0].clientX;
+				currentY = touches[0].clientY;
+			} else if (!isTouch) {
+				// 鼠标移动
+				currentX = opt.e.clientX;
+				currentY = opt.e.clientY;
+			} else {
+				return; // 忽略其他情况
+			}
+
+			// 优化：减少频繁的DOM操作
+			const deltaX = currentX - this.canvas.lastPosX;
+			const deltaY = currentY - this.canvas.lastPosY;
+
+			// 只有移动距离足够大时才更新
+			if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) {
+				return;
+			}
+
+			const vpt = this.canvas.viewportTransform;
+			vpt[4] += deltaX;
+			vpt[5] += deltaY;
+
+			// 优化：减少历史记录频率
+			const now = Date.now();
+			if (now - this.touchState.lastTouchTime > 16) {
+				// 约60fps
+				this.lastMousePositions.push({
+					x: currentX,
+					y: currentY,
+					time: now,
+				});
+
+				if (this.lastMousePositions.length > this.positionHistoryLimit) {
+					this.lastMousePositions.shift();
+				}
+
+				this.touchState.lastTouchTime = now;
+			}
+
+			this.canvas.requestRenderAll(); // 使用requestRenderAll代替renderAll
+			this.canvas.lastPosX = currentX;
+			this.canvas.lastPosY = currentY;
+			opt.e.preventDefault();
+		});
+
+		// 触摸结束事件
+		this.canvas.on("mouse:up", (opt) => {
+			// 只在PAN模式下处理
+			if (this.toolManager.currentTool.value !== OperationType.PAN) {
+				return;
+			}
+
+			// 重置触摸状态
+			this.touchState.isZooming = false;
+			this.touchState.initialDistance = 0;
+
+			this.handleDragEnd(opt, true);
+		});
+
+		// 添加原生触摸事件监听器作为备用方案
+		this.setupNativeTouchEvents();
+	}
+
+	/**
+	 * 计算两个触摸点之间的距离
+	 */
+	getTouchDistance(touch1, touch2) {
+		const dx = touch1.clientX - touch2.clientX;
+		const dy = touch1.clientY - touch2.clientY;
+		return Math.sqrt(dx * dx + dy * dy);
+	}
+
+	/**
+	 * 设置原生触摸事件监听器（备用方案）- 专门处理iPad双指缩放
+	 */
+	setupNativeTouchEvents() {
+		const canvasElement = this.canvas.upperCanvasEl;
+
+		// 确保canvas元素支持触摸
+		canvasElement.style.touchAction = "none";
+
+		let lastTouchDistance = 0;
+		let lastZoom = 1;
+
+		// 原生touchstart事件 - 处理双指缩放初始化
+		canvasElement.addEventListener(
+			"touchstart",
+			(e) => {
+				if (this.toolManager.currentTool.value !== OperationType.PAN) return;
+
+				// 调试信息
+				if (process.env.NODE_ENV === "development") {
+					//   console.log("iPad touchstart:", e.touches.length, "fingers");
+				}
+
+				if (e.touches.length === 2) {
+					// 双指触摸开始
+					this.touchState.isZooming = true;
+					lastTouchDistance = this.getTouchDistance(e.touches[0], e.touches[1]);
+					lastZoom = this.canvas.getZoom();
+
+					// 计算缩放中心点
+					const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+					const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+					this.touchState.zoomCenter = { x: centerX, y: centerY };
+
+					if (process.env.NODE_ENV === "development") {
+						// console.log("iPad双指缩放开始:", {
+						//   distance: lastTouchDistance,
+						//   zoom: lastZoom,
+						//   center: this.touchState.zoomCenter,
+						// });
+					}
+
+					e.preventDefault();
+				}
+			},
+			{ passive: false }
+		);
+
+		// 原生touchmove事件 - 处理双指缩放（修复抖动问题）
+		canvasElement.addEventListener(
+			"touchmove",
+			(e) => {
+				if (this.toolManager.currentTool.value !== OperationType.PAN) return;
+
+				if (e.touches.length === 2 && this.touchState.isZooming) {
+					// 节流处理，避免过于频繁的缩放操作
+					const now = Date.now();
+					if (
+						now - this.touchState.lastZoomTime <
+						this.touchState.zoomThrottle
+					) {
+						return;
+					}
+
+					const currentDistance = this.getTouchDistance(
+						e.touches[0],
+						e.touches[1]
+					);
+
+					// 防止除零和异常值
+					if (lastTouchDistance === 0 || currentDistance === 0) {
+						return;
+					}
+
+					const scale = currentDistance / lastTouchDistance;
+
+					// 防止抖动：忽略微小的变化
+					if (Math.abs(scale - 1) < 0.02) {
+						return;
+					}
+
+					// 使用当前缩放值而不是初始缩放值，避免累积误差
+					const currentZoom = this.canvas.getZoom();
+					const newZoom = currentZoom * scale;
+
+					// 限制缩放范围
+					const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
+
+					if (process.env.NODE_ENV === "development") {
+						// console.log("iPad双指缩放中:", {
+						//   currentDistance,
+						//   lastTouchDistance,
+						//   scale,
+						//   currentZoom,
+						//   newZoom,
+						//   clampedZoom,
+						// });
+					}
+
+					// 使用缩放中心点进行缩放
+					const point = new fabric.Point(
+						this.touchState.zoomCenter.x,
+						this.touchState.zoomCenter.y
+					);
+
+					this.canvas.zoomToPoint(point, clampedZoom);
+
+					// 更新基准距离和时间，避免累积误差
+					lastTouchDistance = currentDistance;
+					this.touchState.lastZoomTime = now;
+
+					e.preventDefault();
+				}
+			},
+			{ passive: false }
+		);
+
+		// 原生touchend事件 - 重置缩放状态
+		canvasElement.addEventListener(
+			"touchend",
+			(e) => {
+				if (this.toolManager.currentTool.value !== OperationType.PAN) return;
+
+				if (e.touches.length < 2) {
+					this.touchState.isZooming = false;
+					lastTouchDistance = 0;
+				}
+
+				e.preventDefault();
+			},
+			{ passive: false }
+		);
+	}
+
+	/**
+	 * 处理拖动结束（鼠标抬起或触摸结束）
+	 */
+	handleDragEnd(opt, isTouch = false) {
+		if (this.canvas.isDragging) {
+			// 使用动画管理器处理惯性效果
+			// if (this.lastMousePositions.length > 1 && opt && opt.e) {
+			// 	this.animationManager.applyInertiaEffect(
+			// 		this.lastMousePositions,
+			// 		isTouch
+			// 	);
+			// }
+		}
+
+		this.canvas.isDragging = false;
+
+		if (this.toolManager) {
+			// this.toolManager.restoreSelectionState(); // 恢复选择状态
+		}
+
+		this.canvas.renderAll();
+	}
+
+	setupSelectionEvents() {
+		// 监听对象选择事件
+		this.canvas.on("selection:created", (opt) => this.updateSelectedLayer(opt));
+
+		this.canvas.on("selection:updated", (opt) => this.updateSelectedLayer(opt));
+
+		// this.canvas.on("selection:cleared", () => this.clearSelectedElements());
+	}
+
+	setupObjectEvents() {
+		// 监听对象变化事件，用于更新缩略图
+		this.canvas.on("object:added", (e) => {
+			if (this.thumbnailManager && e.target && e.target.id) {
+				// 延迟更新以确保对象完全添加
+				setTimeout(() => {
+					// 现在图层就是元素本身，直接更新元素的缩略图
+					this.thumbnailManager.generateLayerThumbnail(e.target.layerId);
+				}, 300);
+			}
+		});
+
+		// 添加对象开始变换时的状态捕获
+		this.canvas.on(
+			"object:moving",
+			this._captureInitialTransformState.bind(this)
+		);
+		this.canvas.on(
+			"object:scaling",
+			this._captureInitialTransformState.bind(this)
+		);
+		this.canvas.on(
+			"object:rotating",
+			this._captureInitialTransformState.bind(this)
+		);
+		this.canvas.on(
+			"object:skewing",
+			this._captureInitialTransformState.bind(this)
+		);
+
+		this.canvas.on("object:modified", (e) => {
+			// 移除调试日志
+			// console.log("object:modified", e);
+
+			const activeObj = e.target || this.canvas.getActiveObject();
+
+			if (activeObj && this.layerManager?.commandManager) {
+				// 使用新的轻量级 TransformCommand 替代完整状态保存
+				// 检查对象是否有初始变换状态记录
+				if (activeObj._initialTransformState) {
+					// 创建并执行 TransformCommand，只记录变换属性的变化
+					const transformCmd = new TransformCommand({
+						canvas: this.canvas,
+						objectId: activeObj.id,
+						initialState: activeObj._initialTransformState,
+						finalState: TransformCommand.captureTransformState(activeObj),
+						objectType: activeObj.type,
+						name: `变换 ${activeObj.type || "对象"}`,
+						layerManager: this.layerManager,
+						layers: this.layers,
+						lastSelectLayerId: this.lastSelectLayerId,
+					});
+
+					// 执行并将命令添加到历史栈
+					this.layerManager.commandManager.execute(transformCmd, {
+						name: "对象修改",
+					});
+					// 清除临时状态记录
+					delete activeObj._initialTransformState;
+				}
+			} else {
+				this.canvasManager.changeCanvas();
+			}
+
+			if (this.thumbnailManager && e.target) {
+				if (e.target.id) {
+					this.updateLayerThumbnail(e.target.id, e.target);
+
+					// 如果该元素是分组图层的一部分，也更新分组图层的缩略图
+					if (e.target.parentId) {
+						this.updateLayerThumbnail(e.target.parentId);
+					}
+				}
+			}
+		});
+
+		this.canvas.on("object:removed", (e) => {
+			if (this.thumbnailManager && e.target) {
+				if (e.target.id) {
+					// 如果该元素是分组图层的一部分，也更新分组图层的缩略图
+					if (e.target.parentId) {
+						// setTimeout(() => this.updateLayerThumbnail(e.target.parentId), 50);
+						this.thumbnailManager.generateLayerThumbnail(e.target.parentId);
+					}
+				}
+			}
+		});
+
+		// // 鼠标抬起时，检查是否需要保存状态
+		// this.canvas.on("mouse:up", (e) => {
+		//   // 只在选择模式下处理对象变换的状态保存
+		//   if (this.toolManager.currentTool.value !== OperationType.SELECT) {
+		//     // 绘画、擦除等模式通过各自的命令管理状态，不需要在这里保存
+		//     return;
+		//   }
+
+		//   const activeObj = this.canvas.getActiveObject();
+		//   if (
+		//     activeObj &&
+		//     activeObj._stateRecord &&
+		//     activeObj._stateRecord.isModifying
+		//   ) {
+		//     const original = activeObj._stateRecord.originalState;
+
+		//     // 检查是否是真正的变换操作（移动、缩放、旋转）
+		//     const hasTransformChanged =
+		//       original.left !== activeObj.left ||
+		//       original.top !== activeObj.top ||
+		//       original.scaleX !== activeObj.scaleX ||
+		//       original.scaleY !== activeObj.scaleY ||
+		//       original.angle !== activeObj.angle;
+
+		//     // 只有在对象发生变换且不是命令执行过程中时才保存状态
+		//     if (hasTransformChanged && this.layerManager) {
+		//       // 立即保存状态，而不是延迟执行
+		//       this.layerManager.saveCanvasState();
+		//       delete activeObj._stateRecord;
+		//     } else {
+		//       // 清理状态记录，即使没有保存状态
+		//       delete activeObj._stateRecord;
+		//     }
+		//   }
+		// });
+	}
+
+	setupDoubleClickEvents() {
+		// 双击处理
+		this.canvas.on("mouse:dblclick", (opt) => {
+			if (opt.target) {
+				// 双击对象的特殊处理
+			} else {
+				// 双击空白处重置缩放
+				if (this.animationManager) {
+					this.animationManager.resetZoom(true);
+				}
+			}
+		});
+	}
+
+	setupLongPress(callback) {
+		this.canvas.on("mouse:down", (opt) => {
+			if (!opt.target) return;
+
+			this.longPressTimer = setTimeout(() => {
+				callback(opt);
+			}, this.longPressThreshold);
+		});
+
+		this.canvas.on("mouse:up", () => {
+			clearTimeout(this.longPressTimer);
+		});
+
+		this.canvas.on("mouse:move", () => {
+			clearTimeout(this.longPressTimer);
+		});
+	}
+
+	// 设置路径创建事件
+	setupHandlePathCreated() {
+		// 在 CanvasEventManager 的构造函数或初始化方法中
+		// this.canvas.on("path:created", this._handlePathCreated.bind(this));
+	}
+
+	_handlePathCreated(e) {
+		// // 获取新创建的路径对象
+		// const path = e.path;
+		// // 设置路径的ID和其他属性
+		// path.id = generateId(); // 生成唯一ID
+		// // 获取当前活动图层
+		// const activeLayer = this.layerManager.getActiveLayer();
+		// // 将路径对象绑定到当前活动图层
+		// if (activeLayer) {
+		//   // 设置路径的图层ID
+		//   path.layerId = activeLayer.id;
+		//   // 更新图层对象列表
+		//   if (!activeLayer.fabricObjects) activeLayer.fabricObjects = [];
+		//   activeLayer.fabricObjects.push(path);
+		//   // 更新图层缩略图
+		//   if (this.thumbnailManager) {
+		//     this.thumbnailManager.generateLayerThumbnail(activeLayer.id);
+		//   }
+		// }
+	}
+
+	/**
+	 * 合并图层中的对象为组以提高性能
+	 * @param {Object} options 合并选项
+	 * @param {fabric.Image} options.fabricImage 新的图像对象
+	 * @param {Object} options.activeLayer 当前活动图层
+	 * @private
+	 */
+	async mergeLayerObjectsForPerformance({ fabricImage, activeLayer, options }) {
+		// 确保有命令管理器
+		if (!this.layerManager || !this.layerManager.commandManager) {
+			console.warn("合并对象失败：没有命令管理器");
+			return;
+		}
+
+		// 确保有活动图层
+		if (!activeLayer) {
+			console.warn("合并对象失败：没有活动图层");
+			return;
+		}
+		// 验证是否需要合并
+		const hasExistingObjects =
+			Array.isArray(activeLayer.fabricObjects) &&
+			activeLayer.fabricObjects.length > 0;
+		const hasNewImage = !!fabricImage;
+
+		if (!hasExistingObjects && !hasNewImage) {
+			//   console.log("没有对象需要合并");
+			return;
+		}
+
+		// 如果只有一个新图像且图层为空，直接添加到图层
+		if (hasNewImage && !hasExistingObjects) {
+			this.layerManager.addObjectToLayer(fabricImage, activeLayer.id, options);
+			return;
+		}
+
+		// 执行高保真合并操作
+		try {
+			//   console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`);
+
+			const command = await this.layerManager.LayerObjectsToGroup(
+				activeLayer,
+				fabricImage
+			);
+
+			// 设置命令的撤销状态
+			if (isBoolean(options.undoable)) command.undoable = options.undoable; // 是否撤销
+
+			this.layerManager?.commandManager?.execute?.(command, {
+				name: `合并图层 ${activeLayer.name} 中的对象为组`,
+			});
+		} catch (error) {
+			console.error("合并图层对象时发生错误:", error);
+
+			// 降级处理：如果合并失败，至少保证新图像能添加到图层
+			if (fabricImage && this.layerManager) {
+				// console.log("执行降级处理：直接添加图像到图层");
+				this.layerManager.addObjectToLayer(fabricImage, activeLayer.id);
+			}
+		}
+	}
+
+	updateSelectedLayer(opt) {
+		const selected = opt.selected[0];
+		if (selected) {
+			this.layerManager.activeLayerId.value = selected.layerId;
+		}
+	}
+
+	// clearSelectedElements() {
+	//   this.activeElementId.value = null;
+	// }
+
+	// 更新图层缩略图
+	updateLayerThumbnail(layerId) {
+		if (!this.thumbnailManager || !layerId || !this.layers) return;
+
+		const layer = this.layers.value.find((l) => l.id === layerId);
+		if (layer) {
+			this.thumbnailManager.generateLayerThumbnail(layer);
+		}
+	}
+
+	// 更新子元素组合缩略图
+	updateLayerChidrenThumbnail(layerId, fabricObject) {
+		if (!this.thumbnailManager || !fabricObject || !this.layers) return;
+
+		// 查找对应的图层(现在元素就是图层)
+		const layer = this.layers.value.find(
+			(l) => l.fabricObjects && l.fabricObjects?.[0]?.id === layerId
+		);
+
+		if (layer) {
+			// 生成图层缩略图
+			this.thumbnailManager.generateLayerThumbnail(layer);
+		}
+	}
+
+	dispose() {
+		// 移除所有事件监听
+		this.canvas.off();
+
+		// 清理 Mac 专用的原生事件监听器
+		if (this.deviceInfo.isMac && this.canvas.upperCanvasEl) {
+			const upperCanvas = this.canvas.upperCanvasEl;
+
+			// 移除手势事件监听器
+			upperCanvas.removeEventListener("gesturestart", null);
+			upperCanvas.removeEventListener("gesturechange", null);
+			upperCanvas.removeEventListener("gestureend", null);
+			upperCanvas.removeEventListener("wheel", null);
+		}
+
+		// 清除计时器
+		if (this.longPressTimer) {
+			clearTimeout(this.longPressTimer);
+			this.longPressTimer = null;
+		}
+
+		// 停止所有动画
+		this.stopInertiaAnimation();
+	}
+
+	/**
+	 * 捕获对象开始变换时的初始状态
+	 * @private
+	 * @param {Object} e 事件对象
+	 */
+	_captureInitialTransformState(e) {
+		const obj = e.target;
+
+		// 只在首次触发变换事件时记录初始状态
+		if (obj && !obj._initialTransformState && obj.id) {
+			// 捕获对象的初始变换状态
+			obj._initialTransformState = TransformCommand.captureTransformState(obj);
+
+			// 添加调试日志(可选)
+			// console.log(`捕获对象 ${obj.id} (${obj.type}) 的初始变换状态`);
+		}
+		const arrs = [];
+		if (e.target._objects) {
+			e.target._objects.forEach((v) => arrs.push(v));
+		} else {
+			arrs.push(e.target);
+		}
+		this.canvasManager.beforeChangeCanvas(arrs);
+	}
+
+	/**
+	 * 精确检测设备类型，区分 PC、Mac、平板和移动设备
+	 * @private
+	 * @returns {Object} 设备信息对象
+	 */
+	_detectDeviceType() {
+		const userAgent = navigator.userAgent.toLowerCase();
+		const platform = navigator.platform.toLowerCase();
+		const hasTouchSupport =
+			"ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+		// 检测操作系统
+		const isMac = /mac|darwin/.test(platform) || /macintosh/.test(userAgent);
+		const isWindows = /win/.test(platform);
+		const isLinux = /linux/.test(platform) && !/android/.test(userAgent);
+
+		// 检测设备类型 - 修复iPad检测逻辑
+		const isMobile = /mobile|phone|android.*mobile|iphone/.test(userAgent);
+		// 修复iPad检测：包括iOS iPad和Android平板
+		const isTablet =
+			/tablet|ipad|android(?!.*mobile)/.test(userAgent) ||
+			/ipad/.test(userAgent) ||
+			(navigator.maxTouchPoints &&
+				navigator.maxTouchPoints > 1 &&
+				/mac/.test(userAgent));
+		const isDesktop = !isMobile && !isTablet;
+
+		// 检测浏览器类型（用于特定优化）
+		const isSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
+		const isChrome = /chrome/.test(userAgent);
+		const isFirefox = /firefox/.test(userAgent);
+
+		// 调试日志 - 仅在开发环境输出
+		if (process.env.NODE_ENV === "development") {
+			//   console.log("设备检测结果:", {
+			//     userAgent,
+			//     platform,
+			//     isMobile,
+			//     isTablet,
+			//     isDesktop,
+			//     hasTouchSupport,
+			//     maxTouchPoints: navigator.maxTouchPoints,
+			//   });
+		}
+
+		return {
+			isMac,
+			isWindows,
+			isLinux,
+			isMobile,
+			isTablet,
+			isDesktop,
+			isSafari,
+			isChrome,
+			isFirefox,
+			hasTouchSupport,
+			// 判断是否应该使用触摸事件作为主要交互方式
+			preferTouchEvents: (isMobile || isTablet) && !isDesktop,
+			// 判断是否需要特殊的 Mac 触控板处理
+			needsMacTrackpadOptimization: isMac && isDesktop && hasTouchSupport,
+		};
+	}
+
+	/**
+	 * 设置 Mac 专用的触摸手势处理
+	 * 主要用于处理触控板的多指手势，但不干扰双指滚动的缩放功能
+	 */
+	setupMacTouchGestures() {
+		// Mac 触控板专用：三指拖拽进行画布平移
+		let macGestureState = {
+			isThreeFingerDrag: false,
+			startX: 0,
+			startY: 0,
+		};
+
+		// 监听 Mac 专用的手势事件
+		this.canvas.upperCanvasEl.addEventListener(
+			"gesturestart",
+			(e) => {
+				// 阻止浏览器默认的手势行为，但保留双指缩放
+				if (e.scale !== 1) {
+					e.preventDefault();
+				}
+			},
+			{ passive: false }
+		);
+
+		this.canvas.upperCanvasEl.addEventListener(
+			"gesturechange",
+			(e) => {
+				// 只处理三指以上的手势，保留双指缩放给 mouse:wheel 事件
+				if (e.touches && e.touches.length >= 3) {
+					e.preventDefault();
+
+					if (!macGestureState.isThreeFingerDrag) {
+						macGestureState.isThreeFingerDrag = true;
+						macGestureState.startX = e.pageX;
+						macGestureState.startY = e.pageY;
+						this.canvas.isDragging = true;
+						this.canvas.lastPosX = e.pageX;
+						this.canvas.lastPosY = e.pageY;
+						this.stopInertiaAnimation(true);
+					} else {
+						// 执行三指拖拽平移
+						const vpt = this.canvas.viewportTransform;
+						vpt[4] += e.pageX - this.canvas.lastPosX;
+						vpt[5] += e.pageY - this.canvas.lastPosY;
+
+						this.canvas.renderAll();
+						this.canvas.lastPosX = e.pageX;
+						this.canvas.lastPosY = e.pageY;
+					}
+				}
+			},
+			{ passive: false }
+		);
+
+		this.canvas.upperCanvasEl.addEventListener(
+			"gestureend",
+			(e) => {
+				if (macGestureState.isThreeFingerDrag) {
+					macGestureState.isThreeFingerDrag = false;
+					this.canvas.isDragging = false;
+
+					if (this.toolManager) {
+						this.toolManager.restoreSelectionState();
+					}
+
+					this.canvas.renderAll();
+				}
+			},
+			{ passive: false }
+		);
+
+		// 添加 Mac 专用的鼠标滚轮优化，确保双指滚动正常工作
+		this.setupMacScrollOptimization();
+	}
+
+	/**
+	 * Mac 滚轮优化：确保双指滚动正确触发缩放
+	 */
+	setupMacScrollOptimization() {
+		if (!this.deviceInfo.isMac) return;
+
+		// Mac 下的滚轮事件优化
+		let macScrollState = {
+			lastWheelTime: 0,
+			wheelTimeout: null,
+		};
+
+		// 监听原生滚轮事件，确保 Mac 双指滚动正确处理
+		this.canvas.upperCanvasEl.addEventListener(
+			"wheel",
+			(e) => {
+				const now = Date.now();
+
+				// Mac 双指滚动的特征：通常有较高的 deltaY 精度和连续性
+				const isMacTrackpadScroll =
+					this.deviceInfo.isMac &&
+					Math.abs(e.deltaY) < 100 && // 像素模式
+					e.deltaMode === 0; // 像素模式
+
+				if (isMacTrackpadScroll) {
+					// 清除之前的超时
+					if (macScrollState.wheelTimeout) {
+						clearTimeout(macScrollState.wheelTimeout);
+					}
+
+					// 确保这个事件会被 Fabric.js 的 mouse:wheel 正确处理
+					macScrollState.lastWheelTime = now;
+
+					// 设置短暂延迟，防止与触摸事件冲突
+					macScrollState.wheelTimeout = setTimeout(() => {
+						// 滚轮事件处理完成
+					}, 16); // 约一帧的时间
+				}
+			},
+			{ passive: true }
+		);
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js b/src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js
new file mode 100644
index 0000000..3e711f3
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js
@@ -0,0 +1,762 @@
+/**
+ * 键盘管理器
+ * 负责处理编辑器中的键盘事件和快捷键
+ * 支持PC、Mac和iPad三端适配
+ */
+export class KeyboardManager {
+	/**
+	 * 创建键盘管理器
+	 * @param {Object} options 配置选项
+	 * @param {Object} options.toolManager 工具管理器实例
+	 * @param {Object} options.commandManager 命令管理器实例
+	 * @param {Object} options.layerManager 图层管理器实例
+	 * @param {Object} options.canvasManager 画布管理器实例
+	 * @param {Function} options.pasteText 粘贴文本回调函数
+	 * @param {Function} options.pasteImage 粘贴图片回调函数
+	 * @param {Ref<Boolean>} options.isRedGreenMode 是否为红绿模式
+	 * @param {HTMLElement} options.container 容器元素，用于添加事件监听
+	 */
+	constructor(options = {}) {
+		this.toolManager = options.toolManager;
+		this.commandManager = options.commandManager;
+		this.layerManager = options.layerManager;
+		this.canvasManager = options.canvasManager;
+		this.container = options.container || document;
+		this.pasteText = options.pasteText || (() => { });
+		this.pasteImage = options.pasteImage || (() => { });
+		this.isRedGreenMode = options.isRedGreenMode;
+
+		// 检测平台类型
+		this.platform = this.detectPlatform();
+		this.isTouchDevice = this.detectTouchDevice();
+
+		// 快捷键的平台特定键名
+		this.modifierKeys = {
+			ctrl: this.platform === "mac" ? "meta" : "ctrl",
+			cmdOrCtrl: this.platform === "mac" ? "meta" : "ctrl",
+			alt: "alt",
+			shift: "shift",
+			option: "alt", // Mac 特有，等同于 alt
+			cmd: "meta", // Mac 特有，等同于 Command
+		};
+
+		// 快捷键显示的平台特定符号
+		this.keySymbols = {
+			ctrl: this.platform === "mac" ? "⌃" : "Ctrl",
+			meta: this.platform === "mac" ? "⌘" : "Win",
+			alt: this.platform === "mac" ? "⌥" : "Alt",
+			shift: this.platform === "mac" ? "⇧" : "Shift",
+			escape: "Esc",
+			space: "空格",
+		};
+
+		// 快捷键映射表 - 可通过配置进行扩展
+		this.shortcuts = this.initShortcuts();
+
+		// 触摸相关状态
+		this.touchState = {
+			pinchStartDistance: 0,
+			pinchStartBrushSize: 0,
+			touchStartX: 0,
+			touchStartY: 0,
+			isTwoFingerTouch: false,
+		};
+
+		// 临时工具状态
+		this.tempToolState = {
+			active: false,
+			originalTool: null,
+		};
+
+		// 事件绑定
+		this._handleKeyDown = this.handleKeyDown.bind(this);
+		this._handleKeyUp = this.handleKeyUp.bind(this);
+		this._handlePaste = this.handlePaste.bind(this);
+		this._handleTouchStart = this.handleTouchStart.bind(this);
+		this._handleTouchMove = this.handleTouchMove.bind(this);
+		this._handleTouchEnd = this.handleTouchEnd.bind(this);
+
+		// 已注册的自定义事件处理程序
+		this.customHandlers = {};
+	}
+
+	/**
+	 * 检测当前平台
+	 * @returns {'mac'|'windows'|'ios'|'android'|'other'} 平台类型
+	 */
+	detectPlatform() {
+		const userAgent = navigator.userAgent.toLowerCase();
+
+		if (userAgent.indexOf("mac") !== -1) return "mac";
+		if (userAgent.indexOf("win") !== -1) return "windows";
+		if (/(iphone|ipad|ipod)/.test(userAgent)) return "ios";
+		if (userAgent.indexOf("android") !== -1) return "android";
+
+		return "other";
+	}
+
+	/**
+	 * 检测是否为触摸设备
+	 * @returns {boolean} 是否为触摸设备
+	 */
+	detectTouchDevice() {
+		return (
+			"ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+		);
+	}
+
+	/**
+	 * 初始化快捷键配置
+	 * @returns {Object} 快捷键配置
+	 */
+	initShortcuts() {
+		const cmdOrCtrl = this.modifierKeys.cmdOrCtrl;
+
+		// 基本快捷键映射，将在构建时根据平台类型自动调整
+		return {
+			// 撤销/重做
+			[`${cmdOrCtrl}+z`]: { action: "undo", description: "撤销" },
+			[`${cmdOrCtrl}+shift+z`]: { action: "redo", description: "重做" },
+			[`${cmdOrCtrl}+y`]: { action: "redo", description: "重做" },
+
+			// 复制/粘贴
+			[`${cmdOrCtrl}+c`]: { action: "copy", description: "复制" },
+			[`${cmdOrCtrl}+v`]: { action: "paste", description: "粘贴", noStop: true },
+			[`${cmdOrCtrl}+x`]: { action: "cut", description: "剪切" },
+
+			// 删除
+			delete: { action: "delete", description: "删除" },
+			backspace: { action: "delete", description: "删除" },
+			up: { action: "up", description: "上" },
+			down: { action: "down", description: "下" },
+			left: { action: "left", description: "左" },
+			right: { action: "right", description: "右" },
+
+			// 选择
+			[`${cmdOrCtrl}+a`]: { action: "selectAll", description: "全选" },
+			escape: { action: "clearSelection", description: "取消选择" },
+
+			// 保存
+			[`${cmdOrCtrl}+s`]: { action: "save", description: "保存" },
+
+			// 工具切换 (这些会由工具管理器处理)
+			v: { action: "selectTool", param: "select", description: "选择工具" },
+			b: { action: "selectTool", param: "draw", description: "画笔工具" },
+			e: { action: "selectTool", param: "eraser", description: "橡皮擦" },
+			i: { action: "selectTool", param: "eyedropper", description: "吸色工具" },
+			h: { action: "selectTool", param: "pan", description: "移动画布" },
+			l: { action: "selectTool", param: "lasso", description: "套索工具" },
+			m: {
+				action: "selectTool",
+				param: "area_custom",
+				description: "自由选区工具",
+			},
+			w: { action: "selectTool", param: "wave", description: "波浪工具" },
+			j: { action: "selectTool", param: "liquify", description: "液化工具" },
+
+			// 数值调整
+			"shift+[": {
+				action: "decreaseTextureScale",
+				description: "减小材质图片大小",
+			},
+			"shift+]": {
+				action: "increaseTextureScale",
+				description: "增大材质图片大小",
+			},
+			"[": { action: "decreaseBrushSize", param: 1, description: "减小画笔" },
+			"]": { action: "increaseBrushSize", param: 1, description: "增大画笔" },
+
+			",": {
+				action: "decreaseBrushOpacity",
+				param: 0.01,
+				description: "减小透明度",
+			},
+			".": {
+				action: "increaseBrushOpacity",
+				param: 0.01,
+				description: "增大透明度",
+			},
+
+			// 空格 - 临时切换到手型工具
+			space: {
+				action: "toggleTempTool",
+				param: "pan",
+				description: "临时切换到手形工具",
+			},
+
+			// 图层操作
+			[`${cmdOrCtrl}+shift+n`]: { action: "newLayer", description: "新建图层" },
+			[`${cmdOrCtrl}+g`]: { action: "groupLayers", description: "组合图层" },
+			[`${cmdOrCtrl}+o`]: {
+				action: "addImageToNewLayer",
+				description: "上传图片到新图层",
+			},
+			[`${cmdOrCtrl}+shift+g`]: {
+				action: "ungroupLayers",
+				description: "取消组合",
+			},
+			[`${cmdOrCtrl}+j`]: { action: "mergeLayers", description: "合并图层" },
+
+			// iPad特有的快捷键(当无法使用键盘时)
+			...(this.platform === "ios" && {
+				two_finger_tap: {
+					action: "contextMenu",
+					description: "显示上下文菜单",
+				},
+				three_finger_swipe_left: { action: "undo", description: "撤销" },
+				three_finger_swipe_right: { action: "redo", description: "重做" },
+			}),
+		};
+	}
+
+	/**
+	 * 处理粘贴事件
+	 * @param {ClipboardEvent} event 粘贴事件
+	 */
+	handlePaste(event) {
+		event.preventDefault(); // 阻止默认粘贴行为
+		if (this.isRedGreenMode.value) return;
+		const text = event.clipboardData?.getData("text/plain") || "";
+		if (/^aida_copy_canvas_layer/.test(text)) return;
+		const items = event.clipboardData?.items || [];
+		// console.log(this);
+		for (const item of items) {
+			if (item.type.indexOf("text/plain") !== -1) {
+				item.getAsString((text) => {
+					this.pasteText(text);
+				});
+			} else if (item.type.indexOf("image") !== -1) {
+				const blob = item.getAsFile();
+				this.pasteImage(blob);
+			}
+		}
+	}
+
+	/**
+	 * 初始化并开始监听键盘事件
+	 */
+	init() {
+		// 添加键盘事件监听
+		this.container.addEventListener("keydown", this._handleKeyDown);
+		this.container.addEventListener("keyup", this._handleKeyUp);
+		this.container.addEventListener("paste", this._handlePaste);
+
+		// 如果是触摸设备，添加触摸事件监听
+		if (this.isTouchDevice) {
+			this.container.addEventListener("touchstart", this._handleTouchStart);
+			this.container.addEventListener("touchmove", this._handleTouchMove);
+			this.container.addEventListener("touchend", this._handleTouchEnd);
+			this.container.addEventListener("touchcancel", this._handleTouchEnd);
+		}
+
+		// console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`);
+	}
+
+	/**
+	 * hide模式下，关闭快捷键
+	 */
+	removeEvents() {
+		// 移除键盘事件监听
+		this.container.removeEventListener("keydown", this._handleKeyDown);
+		this.container.removeEventListener("keyup", this._handleKeyUp);
+		this.container.removeEventListener("paste", this._handlePaste);
+
+		// 如果是触摸设备，移除触摸事件监听
+		if (this.isTouchDevice) {
+			this.container.removeEventListener("touchstart", this._handleTouchStart);
+			this.container.removeEventListener("touchmove", this._handleTouchMove);
+			this.container.removeEventListener("touchend", this._handleTouchEnd);
+			this.container.removeEventListener("touchcancel", this._handleTouchEnd);
+		}
+	}
+
+
+
+	/**
+	 * 处理键盘按下事件
+	 * @param {KeyboardEvent} event 键盘事件
+	 */
+	handleKeyDown(event) {
+		// 如果当前焦点在输入框内，不处理大部分快捷键
+		if (this.isInputActive() && !["Escape", "Tab"].includes(event.key)) {
+			return;
+		}
+
+		// 构建快捷键标识符
+		const shortcutKey = this.buildShortcutKey(event);
+
+		// 查找并执行快捷键动作
+		const shortcut = this.shortcuts[shortcutKey];
+		if (shortcut) {
+			// 阻止默认行为，例如浏览器的保存对话框等
+			if (shortcutKey.includes(`${this.modifierKeys.cmdOrCtrl}+`) && !shortcut.noStop) {
+				event.preventDefault();
+			}
+
+			this.executeAction(shortcut.action, shortcut.param, event);
+			return;
+		}
+
+		// 工具快捷键处理
+		if (this.toolManager && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			this.toolManager.handleKeyboardShortcut(event);
+		}
+	}
+
+	/**
+	 * 处理键盘释放事件
+	 * @param {KeyboardEvent} event 键盘事件
+	 */
+	handleKeyUp(event) {
+		// 当空格键释放时，如果是临时工具，切回原始工具
+		if (event.key === " " && this.tempToolState.active) {
+			this.restoreTempTool();
+		}
+
+		// 调用自定义处理程序
+		const key = event.key.toLowerCase();
+		if (this.customHandlers[key] && typeof this.customHandlers[key].onKeyUp === "function") {
+			this.customHandlers[key].onKeyUp(event);
+		}
+	}
+
+	/**
+	 * 处理触摸开始事件
+	 * @param {TouchEvent} event 触摸事件
+	 */
+	handleTouchStart(event) {
+		const touches = event.touches;
+
+		// 存储初始状态以便后续计算
+		if (touches.length === 2) {
+			// 双指触摸 - 可用于缩放或调整画笔大小
+			this.touchState.isTwoFingerTouch = true;
+			this.touchState.pinchStartDistance = this.getDistanceBetweenTouches(touches[0], touches[1]);
+
+			// 如果有画笔管理器，记录起始画笔大小
+			if (this.toolManager && this.toolManager.brushManager) {
+				this.touchState.pinchStartBrushSize = this.toolManager.brushManager.brushSize.value;
+			}
+		} else if (touches.length === 3) {
+			// 三指触摸 - 可用于撤销/重做
+			this.touchState.touchStartX = touches[0].clientX;
+		}
+	}
+
+	/**
+	 * 处理触摸移动事件
+	 * @param {TouchEvent} event 触摸事件
+	 */
+	handleTouchMove(event) {
+		const touches = event.touches;
+
+		// 阻止默认行为（例如滚动）
+		if (touches.length >= 2) {
+			event.preventDefault();
+		}
+
+		// 双指缩放处理 - 调整画笔大小
+		if (touches.length === 2 && this.touchState.isTwoFingerTouch) {
+			const currentDistance = this.getDistanceBetweenTouches(touches[0], touches[1]);
+			const scale = currentDistance / this.touchState.pinchStartDistance;
+
+			// 调整画笔大小
+			if (this.toolManager && this.toolManager.brushManager && scale !== 1) {
+				const newSize = this.touchState.pinchStartBrushSize * scale;
+				this.toolManager.brushManager.setBrushSize(newSize);
+			}
+		}
+		// 三指滑动处理 - 撤销/重做
+		else if (touches.length === 3) {
+			const deltaX = touches[0].clientX - this.touchState.touchStartX;
+
+			// 滑动超过50px认为是有效的手势
+			if (Math.abs(deltaX) > 50) {
+				if (deltaX < 0) {
+					// 向左滑动 - 撤销
+					this.executeAction("undo");
+				} else {
+					// 向右滑动 - 重做
+					this.executeAction("redo");
+				}
+
+				// 更新起始位置，防止连续触发
+				this.touchState.touchStartX = touches[0].clientX;
+			}
+		}
+	}
+
+	/**
+	 * 处理触摸结束事件
+	 * @param {TouchEvent} event 触摸事件
+	 */
+	handleTouchEnd(event) {
+		// 检测双指轻拍 (两个手指几乎同时按下，又几乎同时抬起)
+		if (this.touchState.isTwoFingerTouch && event.touches.length === 0) {
+			if (new Date().getTime() - this.touchState.touchStartTime < 300) {
+				// 双指轻拍 - 可以触发上下文菜单
+				this.executeAction("contextMenu");
+			}
+		}
+
+		// 重置触摸状态
+		this.touchState.isTwoFingerTouch = false;
+	}
+
+	/**
+	 * 计算两个触摸点之间的距离
+	 * @param {Touch} touch1 第一个触摸点
+	 * @param {Touch} touch2 第二个触摸点
+	 * @returns {number} 两点间距离
+	 */
+	getDistanceBetweenTouches(touch1, touch2) {
+		const dx = touch1.clientX - touch2.clientX;
+		const dy = touch1.clientY - touch2.clientY;
+		return Math.sqrt(dx * dx + dy * dy);
+	}
+
+	/**
+	 * 执行快捷键对应的动作
+	 * @param {string} action 动作名称
+	 * @param {*} param 动作参数
+	 * @param {Event} event 原始事件
+	 */
+	executeAction(action, param, event) {
+		switch (action) {
+			case "undo":
+				if (this.commandManager) {
+					this.commandManager.undo();
+				}
+				break;
+
+			case "redo":
+				if (this.commandManager) {
+					this.commandManager.redo();
+				}
+				break;
+
+			case "copy":
+				// 复制逻辑
+				// console.log("复制当前选中图层");
+				if (this.isRedGreenMode.value) return;
+				this.layerManager.copyLayer(this.layerManager.activeLayerId.value);
+				break;
+
+			case "paste":
+				// 粘贴逻辑
+				// console.log("粘贴");
+				if (this.isRedGreenMode.value) return;
+				this.layerManager.pasteLayer();
+				break;
+
+			case "cut":
+				// 剪切逻辑
+				// console.log("剪切");
+				if (this.isRedGreenMode.value) return;
+				this.layerManager.cutLayer(this.layerManager.activeLayerId.value);
+				break;
+
+			case "delete":
+				// 删除逻辑
+				// console.log("删除");
+				if (this.isRedGreenMode.value) return;
+				this.layerManager.removeLayer(this.layerManager.activeLayerId.value);
+				break;
+
+			case "selectAll":
+				// 全选逻辑
+				// console.log("全选");
+				if (this.isRedGreenMode.value) return;
+				// 这里需要实现全选逻辑 TODO:  是否在选择模式下才可以全选？
+				if (this.layerManager) {
+					this.layerManager.selectAll();
+				}
+				break;
+
+			case "clearSelection":
+				// 清除选择逻辑
+				// console.log("清除选择");
+				// 这里需要实现清除选择逻辑
+				if (this.layerManager) {
+					this.layerManager.clearSelection();
+				}
+				break;
+
+			case "save":
+				// 保存逻辑
+				// console.log("保存");
+				break;
+
+			case "selectTool":
+				// 选择工具
+				if (this.toolManager && param) {
+					this.toolManager.setToolWithCommand(param);
+				}
+				break;
+
+			case "up":
+			case "down":
+			case "left":
+			case "right":
+				// 方向键逻辑
+				this.canvasManager.moveActiveObject(action);
+				break;
+
+			case "increaseBrushSize":
+				// 增大画笔尺寸
+				if (this.toolManager && this.toolManager.brushManager) {
+					const amount = param || 5;
+					this.toolManager.brushManager.increaseBrushSize(amount);
+				}
+				break;
+
+			case "decreaseBrushSize":
+				// 减小画笔尺寸
+				if (this.toolManager && this.toolManager.brushManager) {
+					const amount = param || 5;
+					this.toolManager.brushManager.decreaseBrushSize(amount);
+				}
+				break;
+
+			case "increaseBrushOpacity":
+				// 增大画笔透明度
+				if (this.toolManager && this.toolManager.brushManager) {
+					const amount = param || 0.01;
+					this.toolManager.brushManager.increaseBrushOpacity(amount);
+				}
+				break;
+
+			case "decreaseTextureScale":
+				// 减小画笔材质图片大小
+				if (this.toolManager && this.toolManager.brushManager) {
+					const amount = param || 5;
+					this.toolManager.brushManager.decreaseBrushSize(amount);
+				}
+				break;
+
+			case "increaseTextureScale":
+				// 增大画笔材质图片大小
+				if (this.toolManager && this.toolManager.brushManager) {
+					const amount = param || 0.01;
+					this.toolManager.brushManager.increaseTextureScale(amount);
+				}
+				break;
+
+			case "decreaseBrushOpacity":
+				// 减小画笔透明度
+				if (this.toolManager && this.toolManager.brushManager) {
+					const amount = param || 0.01;
+					this.toolManager.brushManager.decreaseBrushOpacity(amount);
+				}
+				break;
+
+			case "toggleTempTool":
+				// 临时切换工具
+				if (param && this.toolManager) {
+					this.setTempTool(param);
+				}
+				break;
+
+			case "newLayer":
+				// 创建新图层
+				if (this.layerManager) {
+					this.layerManager.createNewLayer();
+				}
+				break;
+
+			case "addImageToNewLayer":
+				this.toolManager?.openFile?.();
+				break;
+
+			case "groupLayers":
+				// 组合图层
+				if (this.layerManager) {
+					this.layerManager.groupSelectedLayers();
+				}
+				break;
+
+			case "ungroupLayers":
+				// 解组图层
+				if (this.layerManager) {
+					this.layerManager.ungroupSelectedLayer();
+				}
+				break;
+
+			case "mergeLayers":
+				// 合并图层
+				if (this.layerManager) {
+					this.layerManager.mergeSelectedLayers();
+				}
+				break;
+
+			case "contextMenu":
+				// 上下文菜单（通常由右击或触控设备上的特定手势触发）
+				// console.log("显示上下文菜单");
+				// 这里需要实现显示上下文菜单的逻辑
+				break;
+
+			default:
+				// 调用自定义注册的动作处理
+				if (this.customHandlers[action]) {
+					this.customHandlers[action].execute(param, event);
+				}
+		}
+	}
+
+	/**
+	 * 设置临时工具
+	 * @param {string} toolId 临时工具ID
+	 */
+	setTempTool(toolId) {
+		if (!this.toolManager || this.tempToolState.active) return;
+
+		// 保存当前工具
+		this.tempToolState.originalTool = this.toolManager.getCurrentTool();
+		this.tempToolState.active = true;
+
+		// 切换到临时工具
+		this.toolManager.setTool(toolId);
+	}
+
+	/**
+	 * 恢复临时工具切换前的工具
+	 */
+	restoreTempTool() {
+		if (!this.toolManager || !this.tempToolState.active) return;
+
+		// 恢复到原始工具
+		if (this.tempToolState.originalTool) {
+			this.toolManager.setTool(this.tempToolState.originalTool);
+		}
+
+		// 重置状态
+		this.tempToolState.active = false;
+		this.tempToolState.originalTool = null;
+	}
+
+	/**
+	 * 构建快捷键标识符
+	 * @param {KeyboardEvent} event 键盘事件
+	 * @returns {string} 快捷键标识符
+	 */
+	buildShortcutKey(event) {
+		let shortcutKey = "";
+
+		// 统一处理Mac和PC的修饰键
+		if ((this.platform === "mac" && event.metaKey) || (this.platform !== "mac" && event.ctrlKey)) {
+			shortcutKey += `${this.modifierKeys.cmdOrCtrl}+`;
+		} else if (event.ctrlKey) {
+			shortcutKey += "ctrl+";
+		}
+
+		if (event.shiftKey) shortcutKey += "shift+";
+		if (event.altKey) shortcutKey += "alt+";
+
+		const key = event.key.toLowerCase();
+		// 特殊键处理
+		switch (key) {
+			case " ":
+				shortcutKey += "space";
+				break;
+			case "arrowup":
+				shortcutKey += "up";
+				break;
+			case "arrowdown":
+				shortcutKey += "down";
+				break;
+			case "arrowleft":
+				shortcutKey += "left";
+				break;
+			case "arrowright":
+				shortcutKey += "right";
+				break;
+			default:
+				shortcutKey += key;
+		}
+
+		return shortcutKey;
+	}
+
+	/**
+	 * 检查当前是否有输入框处于活动状态
+	 * @returns {boolean} 是否有输入框处于活动状态
+	 */
+	isInputActive() {
+		const activeElement = document.activeElement;
+		const tagName = activeElement.tagName.toLowerCase();
+		return (
+			tagName === "input" ||
+			tagName === "textarea" ||
+			activeElement.getAttribute("contenteditable") === "true"
+		);
+	}
+
+	/**
+	 * 获取所有可用的快捷键
+	 * @returns {Array} 快捷键列表
+	 */
+	getShortcuts() {
+		return Object.entries(this.shortcuts).map(([key, value]) => ({
+			key,
+			displayKey: this.formatShortcutForDisplay(key),
+			...value,
+		}));
+	}
+
+	/**
+	 * 格式化快捷键以便显示
+	 * @param {string} shortcut 快捷键标识符
+	 * @returns {string} 格式化后的快捷键显示
+	 */
+	formatShortcutForDisplay(shortcut) {
+		// 将快捷键格式化为适合当前平台显示的形式
+		return shortcut
+			.split("+")
+			.map((key) => {
+				// 将键名转换为显示符号
+				return this.keySymbols[key.toLowerCase()] || key.toUpperCase();
+			})
+			.join("+");
+	}
+
+	/**
+	 * 注册自定义快捷键处理程序
+	 * @param {string} action 动作名称
+	 * @param {Object} handler 处理程序对象
+	 * @param {Function} handler.execute 执行函数
+	 * @param {Function} handler.onKeyUp 键释放处理函数（可选）
+	 * @param {string} description 描述
+	 */
+	registerCustomHandler(action, handler, description = "") {
+		if (!action || typeof handler.execute !== "function") {
+			console.error("无效的自定义处理程序");
+			return;
+		}
+
+		this.customHandlers[action] = handler;
+
+		// 如果提供了快捷键，添加到快捷键映射
+		if (handler.shortcut) {
+			this.shortcuts[handler.shortcut] = {
+				action,
+				description: description || handler.description || action,
+			};
+		}
+	}
+
+	/**
+	 * 清理资源
+	 */
+	dispose() {
+		// 移除事件监听
+		this.removeEvents();
+		// 清除引用
+		this.toolManager = null;
+		this.commandManager = null;
+		this.layerManager = null;
+		this.container = null;
+		this.customHandlers = {};
+		this.tempToolState = { active: false, originalTool: null };
+		this.touchState = {};
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/tools/canvasFactory.js b/src/components/Canvas/DepthCanvas/tools/canvasFactory.js
new file mode 100644
index 0000000..e894355
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/tools/canvasFactory.js
@@ -0,0 +1,34 @@
+import { fabric } from "fabric-with-all";
+
+/**
+ * Factory for creating optimized fabric canvas instances
+ */
+export const createCanvas = (elementId, options = {}) => {
+	// Create the canvas instance
+	const canvas = new fabric.Canvas(elementId, {
+		enableRetinaScaling: true,
+		renderOnAddRemove: false,
+		preserveObjectStacking: true, // 保持对象堆叠顺序
+		// skipOffscreen: true, // 跳过离屏渲染
+		imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
+		imageSmoothingQuality: "high", // 设置高质量图像平滑
+		...options,
+	});
+
+	return canvas;
+};
+
+/**
+ * Utility to create a static canvas (for improved performance when interaction is not needed)
+ */
+export const createStaticCanvas = (elementId, options = {}) => {
+	const canvas = new fabric.StaticCanvas(elementId, {
+		enableRetinaScaling: true,
+		imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
+		imageSmoothingQuality: "high", // 设置高质量图像平滑
+		skipOffscreen: false, // 不跳过离屏渲染
+		...options,
+	});
+
+	return canvas;
+};
diff --git a/src/components/Canvas/DepthCanvas/tools/index.ts b/src/components/Canvas/DepthCanvas/tools/index.ts
new file mode 100644
index 0000000..a23e5ed
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/tools/index.ts
@@ -0,0 +1,61 @@
+/**
+ * 精确检测设备类型，区分 PC、Mac、平板和移动设备
+ * @private
+ * @returns {Object} 设备信息对象
+ */
+export const detectDeviceType = () => {
+	const userAgent = navigator.userAgent.toLowerCase();
+	const platform = navigator.platform.toLowerCase();
+	const hasTouchSupport =
+		"ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+	// 检测操作系统
+	const isMac = /mac|darwin/.test(platform) || /macintosh/.test(userAgent);
+	const isWindows = /win/.test(platform);
+	const isLinux = /linux/.test(platform) && !/android/.test(userAgent);
+
+	// 检测设备类型 - 修复iPad检测逻辑
+	const isMobile = /mobile|phone|android.*mobile|iphone/.test(userAgent);
+	// 修复iPad检测：包括iOS iPad和Android平板
+	const isTablet =
+		/tablet|ipad|android(?!.*mobile)/.test(userAgent) ||
+		/ipad/.test(userAgent) ||
+		(navigator.maxTouchPoints &&
+			navigator.maxTouchPoints > 1 &&
+			/mac/.test(userAgent));
+	const isDesktop = !isMobile && !isTablet;
+
+	// 检测浏览器类型（用于特定优化）
+	const isSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
+	const isChrome = /chrome/.test(userAgent);
+	const isFirefox = /firefox/.test(userAgent);
+
+	// 调试日志 - 仅在开发环境输出
+	if (process.env.NODE_ENV === "development") {
+		//   console.log("设备检测结果:", {
+		//     userAgent,
+		//     platform,
+		//     isMobile,
+		//     isTablet,
+		//     isDesktop,
+		//     hasTouchSupport,
+		//     maxTouchPoints: navigator.maxTouchPoints,
+		//   });
+	}
+	return {
+		isMac,
+		isWindows,
+		isLinux,
+		isMobile,
+		isTablet,
+		isDesktop,
+		isSafari,
+		isChrome,
+		isFirefox,
+		hasTouchSupport,
+		// 判断是否应该使用触摸事件作为主要交互方式
+		preferTouchEvents: (isMobile || isTablet) && !isDesktop,
+		// 判断是否需要特殊的 Mac 触控板处理
+		needsMacTrackpadOptimization: isMac && isDesktop && hasTouchSupport,
+	};
+}
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/tools/layerHelper.js b/src/components/Canvas/DepthCanvas/tools/layerHelper.js
new file mode 100644
index 0000000..cbead70
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/tools/layerHelper.js
@@ -0,0 +1,66 @@
+
+/**
+ * 图层类型枚举
+ */
+export const LayerType = {
+	EMPTY: "empty", // 空图层
+	BITMAP: "bitmap", // 位图图层
+	VECTOR: "vector", // 矢量图层
+	TEXT: "text", // 文字图层
+	GROUP: "group", // 组图层
+	ADJUSTMENT: "adjustment", // 调整图层
+	SMART_OBJECT: "smartObject", // 智能对象
+	SHAPE: "shape", // 形状图层
+	VIDEO: "video", // 视频图层 (预留)
+	AUDIO: "audio", // 音频图层 (预留)
+	FIXED: "fixed", // 固定图层 - 位于背景图层之上，普通图层之下
+	BACKGROUND: "background", // 背景图层 - 位于固定图层之、普通图层之下
+};
+
+
+/**
+ * 画布操作模式枚举：draw(绘画)、select(选择)、pan(拖拽)....
+ */
+export const OperationType = {
+	// 编辑器模式
+	DISABLED: "disabled", // 禁用
+
+	SELECT: "select",// 选择工具模式
+	PAN: "pan", // 拖拽模式
+	DRAW: "draw", // 绘画模式
+	ERASER: "eraser", // 橡皮擦模式
+	IMAGE: "image",// 图片工具模式
+	SELECTBOX: "selectbox",// 选择框工具模式
+	RECTANGLE: "rectangle",// 矩形工具模式
+	TEXT: "text",// 文字工具模式
+	UNDO: "undo",// 撤销工具模式
+	REDO: "redo",// 重做工具模式
+};
+
+// 所有操作模式类型列表
+export const OperationTypes = Object.values(OperationType);
+
+/**
+ * 混合模式枚举
+ * 与 fabricjs 和 CSS3 的 globalCompositeOperation 对应
+ */
+export const BlendMode = {
+	NORMAL: "source-over", // 正常模式
+	MULTIPLY: "multiply", // 正片叠底
+	SCREEN: "screen", // 滤色
+	OVERLAY: "overlay", // 叠加
+	DARKEN: "darken", // 变暗
+	LIGHTEN: "lighten", // 变亮
+	COLOR_DODGE: "color-dodge", // 颜色减淡
+	COLOR_BURN: "color-burn", // 颜色加深
+	HARD_LIGHT: "hard-light", // 强光
+	SOFT_LIGHT: "soft-light", // 柔光
+	DIFFERENCE: "difference", // 差值
+	EXCLUSION: "exclusion", // 排除
+	HUE: "hue", // 色相
+	SATURATION: "saturation", // 饱和度
+	COLOR: "color", // 颜色
+	LUMINOSITY: "luminosity", // 明度
+	DESTINATION_IN: "destination-in", // 目标内
+	DESTINATION_OUT: "destination-out", // 目标外
+};
diff --git a/src/components/Preview/Preview.vue b/src/components/Preview/Preview.vue
new file mode 100644
index 0000000..a3c3f20
--- /dev/null
+++ b/src/components/Preview/Preview.vue
@@ -0,0 +1,72 @@
+<!-- ImagePreview.vue -->
+<template>
+  <div v-if="modelValue" class="image-preview-modal" @click="closePreview">
+    <div class="image-preview-container" @click.stop>
+      <img :src="url" alt="Preview Image" class="preview-image" />
+      <button class="close-btn" @click="closePreview">×</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  url: string
+  modelValue: boolean
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const closePreview = () => {
+  emits('update:modelValue', false)
+}
+</script>
+
+<style lang="less" scoped>
+.image-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.image-preview-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 90vh;
+  border-radius: 0.8rem;
+  display: block;
+}
+
+.close-btn {
+  position: absolute;
+  top: -2rem;
+  right: -2rem;
+  background: white;
+  border: none;
+  font-size: 3rem;
+  cursor: pointer;
+  color: #606266;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 6ae30eb..0640ebd 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -2,41 +2,26 @@
 	<div class="assist-input-wrapper flex flex-col" :class="{ agent: isAgentMode }">
 		<div class="animate-container flex-1 flex flex-col">
 			<div class="scroll-content flex-col">
-				<!-- 图片预览区域 -->
 				<div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
 					<div
 						v-for="(image, index) in uploadedImages"
 						:key="index"
 						class="image-preview-item"
 					>
-						<img :src="image.url" :alt="image.name" class="preview-image" />
+						<img
+							:src="image.url"
+							:alt="image.name"
+							class="preview-image"
+							@click="previewImage(image.url)"
+						/>
 						<div class="image-remove-btn" @click="removeImage(index)">
 							<SvgIcon name="delete" size="16" />
 						</div>
 					</div>
 				</div>
-				<!-- 编辑区域 -->
 				<div class="editor-wrapper">
 					<!-- 静态占位符 - 当编辑器为空时显示 -->
-					<div
-						v-if="showPlaceholder"
-						class="editor-placeholder"
-						:style="{
-							position: 'absolute',
-							top: '0',
-							left: '0',
-							padding: '0 1.4rem 1.4rem',
-							fontSize: '2rem',
-							fontFamily: 'InterRegular',
-							fontWeight: 400,
-							color: '#999',
-							pointerEvents: 'none',
-							whiteSpace: 'pre-wrap',
-							wordWrap: 'break-word',
-							width: 'calc(100% - 2.8rem)',
-							boxSizing: 'border-box'
-						}"
-					>
+					<div v-if="showPlaceholder" class="editor-placeholder">
 						{{ $t('Input.placeholder') }}
 					</div>
 					<div
@@ -205,6 +190,7 @@
 			<SvgIcon class="light-icon" name="light" size="16" />
 			<span>{{ $t('Input.trendingReport') }}</span>
 		</div>
+		<Preview v-model="showPreview" :url="previewUrl" />
 	</div>
 </template>
 
@@ -222,7 +208,7 @@
 	import { getStyleImage } from './style'
 	import { uploadImage } from '@/api/upload'
 	import MyEvent from '@/utils/myEvent'
-	// import Tag from './Tag.vue'
+	import Preview from '@/components/Preview/Preview.vue'
 
 	const router = useRouter()
 	const agentStore = useAgentStore()
@@ -773,6 +759,13 @@
 		uploadedImages.value = []
 	}
 
+	const showPreview = ref(false)
+	const previewUrl = ref('')
+	const previewImage = (url: string) => {
+		showPreview.value = true
+		previewUrl.value = url
+	}
+
 	// 暴露方法给父组件
 	defineExpose({
 		addReportTag
@@ -840,6 +833,18 @@
 			position: absolute;
 			z-index: 0;
 			pointer-events: none;
+			top: 0;
+			left: 0;
+			padding: 0 1.4rem 1.4rem;
+			font-size: 2rem;
+			font-family: 'InterRegular';
+			font-weight: 400;
+			color: #999;
+			pointer-events: none;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+			width: calc(100% - 2.8rem);
+			box-sizing: border-box;
 		}
 
 		.editor {
@@ -896,29 +901,29 @@
 				.preview-image {
 					width: 100%;
 					height: 100%;
-					object-fit: contain;
+					object-fit: cover;
 					border-radius: 0.8rem;
+					cursor: pointer;
 				}
 
 				.image-remove-btn {
 					position: absolute;
-					top: 0.2rem;
-					right: 0.2rem;
+					top: 0.6rem;
+					right: 0.6rem;
 					width: 1.6rem;
 					height: 1.6rem;
 					color: #fff;
 					border-radius: 50%;
-					display: flex;
+					// display: flex;
 					align-items: center;
 					justify-content: center;
 					font-size: 1.2rem;
 					cursor: pointer;
-					opacity: 0;
-					transition: opacity 0.2s ease;
+					display: none;
 				}
 
 				&:hover .image-remove-btn {
-					opacity: 1;
+					display: flex;
 				}
 			}
 		}
@@ -1028,6 +1033,13 @@
 				padding: 0;
 				height: 100%;
 				min-height: 5rem;
+				line-height: 1.4rem;
+			}
+			.editor-placeholder{
+				font-family: 'Regular';
+				font-size: 1.4rem;
+				padding: 0;
+				line-height: 1.4rem;
 			}
 		}
 		.operate {