From 9189b5387fdb9c0bd297a27eec83e4711bb46c87 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Mon, 9 Mar 2026 16:45:30 +0800
Subject: [PATCH 1/4] 123

---
 src/assets/icons/dc/hide.svg                  |  4 +
 .../components/layer-panel/layer-item.vue     | 62 +++++++++++----
 .../components/layer-panel/layer-list.vue     | 22 +++---
 .../Canvas/DepthCanvas/depth-canvas.vue       | 11 ++-
 .../DepthCanvas/manager/AnimationManager.js   |  2 +-
 .../DepthCanvas/manager/CanvasManager.ts      | 77 +++++++++++++++++--
 .../DepthCanvas/manager/LayerManager.ts       | 46 +++++++++++
 .../DepthCanvas/manager/StateManager.ts       |  4 +-
 .../manager/events/CanvasEventManager.js      | 12 +--
 9 files changed, 199 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/icons/dc/hide.svg
 create mode 100644 src/components/Canvas/DepthCanvas/manager/LayerManager.ts

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/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/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index 0aa775b..4a8c5bd 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -5,7 +5,7 @@
 		</div>
 		<layer-panel />
 		<details-panel />
-		<header-tools />
+		<header-tools @export="exportCanvas" />
 		<zoom
 			:zoom="canvasManager.currentZoom.value / 100"
 			:step="0.1"
@@ -27,6 +27,7 @@
 
 	// 管理器
 	import { StateManager } from './manager/StateManager'
+	import { LayerManager } from './manager/LayerManager'
 	import { EventManager } from './manager/EventManager'
 	import { CanvasManager } from './manager/CanvasManager'
 	import { ToolManager } from './manager/ToolManager'
@@ -50,6 +51,11 @@
 	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 })
@@ -90,6 +96,9 @@
 		})
 		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
index 3ebc200..6da5b5d 100644
--- a/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
@@ -13,7 +13,7 @@ export class AnimationManager {
 	constructor(canvas, options = {}) {
 		this.canvasManager = options.canvasManager;
 		this.canvas = canvas;
-		this.currentZoom = options.currentZoom || { value: 100 };
+		this.currentZoom = options.currentZoom;
 
 		// 动画相关属性
 		this._zoomAnimation = null;
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index 3e46d37..9664daf 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -15,6 +15,9 @@ interface CanvasInitOptions {
 }
 export class CanvasManager {
 	stateManager: any
+	layerManager: any
+	animationManager: any
+	eventManager: any
 	deviceInfo: any
 	canvas: any
 	canvasViewWidth: number
@@ -22,8 +25,6 @@ export class CanvasManager {
 	canvasWidth: number
 	canvasHeight: number
 	currentZoom: any
-	animationManager: any
-	eventManager: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
 		this.deviceInfo = detectDeviceType();
@@ -34,6 +35,7 @@ export class CanvasManager {
 		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
@@ -62,7 +64,11 @@ export class CanvasManager {
 			top: 20,
 			width: 100,
 			height: 100,
-			fill: '#f00'
+			fill: '#f00',
+			info: {
+				id: 'rect1',
+				name: 'rect1',
+			}
 		})
 		this.canvas.add(rect)
 		//创建圆形
@@ -70,9 +76,37 @@ export class CanvasManager {
 			left: 200,
 			top: 200,
 			radius: 50,
-			fill: '#0f0'
+			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,
@@ -81,9 +115,9 @@ export class CanvasManager {
 			defaultDuration: 0.3, // 缩短默认动画时间
 		});
 		this.setupCanvasEvents()
-		this.stateManager.toolManager.setTool(OperationType.PAN)
-
-
+		this.stateManager.toolManager.setTool(OperationType.SELECT)
+		this.layerManager.updateLayers()
+		this.layerManager.setActiveID(text2.info.id)
 	}
 	setupCanvasEvents() {
 		// 创建画布事件管理器
@@ -98,7 +132,36 @@ export class CanvasManager {
 	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/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/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index 67fe946..b970261 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -12,13 +12,15 @@ export class StateManager {
 	historyIndex: any
 
 	// 管理器	
-	eventManager: any
 	canvasManager: any
+	layerManager: any
+	eventManager: any
 	toolManager: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
 		options.canvasManager && (this.canvasManager = options.canvasManager)
+		options.layerManager && (this.layerManager = options.layerManager)
 		options.toolManager && (this.toolManager = options.toolManager)
 	}
 	constructor(options) {
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
index d3c85a6..ded2794 100644
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -603,12 +603,12 @@ export class CanvasEventManager {
 	handleDragEnd(opt, isTouch = false) {
 		if (this.canvas.isDragging) {
 			// 使用动画管理器处理惯性效果
-			if (this.lastMousePositions.length > 1 && opt && opt.e) {
-				this.animationManager.applyInertiaEffect(
-					this.lastMousePositions,
-					isTouch
-				);
-			}
+			// if (this.lastMousePositions.length > 1 && opt && opt.e) {
+			// 	this.animationManager.applyInertiaEffect(
+			// 		this.lastMousePositions,
+			// 		isTouch
+			// 	);
+			// }
 		}
 
 		this.canvas.isDragging = false;

From 2f74996d48b08859169998dfe6ce13d7e1831fe1 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Tue, 10 Mar 2026 09:35:40 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E7=A7=AF=E5=88=86=E5=8F=98=E4=B8=BA?=
 =?UTF-8?q?=E5=8F=AF=E6=8E=A7=E8=83=8C=E6=99=AF=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Canvas/components/fullscreen-dialog.vue | 1 +
 src/components/MyInfo.vue                              | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Canvas/components/fullscreen-dialog.vue b/src/components/Canvas/components/fullscreen-dialog.vue
index cca3d74..2d39dc9 100644
--- a/src/components/Canvas/components/fullscreen-dialog.vue
+++ b/src/components/Canvas/components/fullscreen-dialog.vue
@@ -69,6 +69,7 @@
 			position: absolute;
 			top: 3rem;
 			right: 3rem;
+			--bgColor: #fff;
 		}
 		> .close-btn {
 			cursor: pointer;
diff --git a/src/components/MyInfo.vue b/src/components/MyInfo.vue
index d763bdb..6f5bf75 100644
--- a/src/components/MyInfo.vue
+++ b/src/components/MyInfo.vue
@@ -72,9 +72,9 @@
 			min-width: 18rem;
 			height: 4.3rem;
 			margin-right: 1rem;
-			background-color: rgba(255, 252, 244, 1);
 			border: 1px solid #ffcf90;
 			border-radius: 0.8rem;
+			background-color: var(--bgColor, rgba(255, 252, 244, 1));
 			> .credits {
 				flex: 1;
 				font-size: 1.3rem;

From d8f974834474bdf28d3c8de6e4e35f05492d67d9 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Tue, 10 Mar 2026 09:38:51 +0800
Subject: [PATCH 3/4] fix

---
 src/components/Canvas/components/fullscreen-dialog.vue | 2 +-
 src/components/MyInfo.vue                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Canvas/components/fullscreen-dialog.vue b/src/components/Canvas/components/fullscreen-dialog.vue
index 2d39dc9..ae94f3b 100644
--- a/src/components/Canvas/components/fullscreen-dialog.vue
+++ b/src/components/Canvas/components/fullscreen-dialog.vue
@@ -69,7 +69,7 @@
 			position: absolute;
 			top: 3rem;
 			right: 3rem;
-			--bgColor: #fff;
+			--my-info-bgColor: #fff;
 		}
 		> .close-btn {
 			cursor: pointer;
diff --git a/src/components/MyInfo.vue b/src/components/MyInfo.vue
index 6f5bf75..0d7a345 100644
--- a/src/components/MyInfo.vue
+++ b/src/components/MyInfo.vue
@@ -74,7 +74,7 @@
 			margin-right: 1rem;
 			border: 1px solid #ffcf90;
 			border-radius: 0.8rem;
-			background-color: var(--bgColor, rgba(255, 252, 244, 1));
+			background-color: var(--my-info-bgColor, rgba(255, 252, 244, 1));
 			> .credits {
 				flex: 1;
 				font-size: 1.3rem;

From 12e14c56970bf716d487c8d2bdbed88b5dc37196 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Tue, 10 Mar 2026 10:16:19 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=BC=95=E5=85=A5three.js=20=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E9=80=9A=E7=94=A8=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 12 +++++
 package.json                                  |  1 +
 .../Canvas/FlowCanvas/flow-canvas.vue         |  4 ++
 .../Canvas/components/base-modal.vue          | 51 +++++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 src/components/Canvas/components/base-modal.vue

diff --git a/package-lock.json b/package-lock.json
index 8e9f9b4..2f7bd38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "pinia": "^2.0.32",
         "pinia-persistedstate-plugin": "^0.1.0",
         "pinia-plugin-persistedstate": "^3.1.0",
+        "three": "^0.148.0",
         "vue": "^3.2.47",
         "vue-draggable-plus": "^0.6.1",
         "vue-i18n": "^11.2.8",
@@ -8556,6 +8557,12 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/three": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.148.0.tgz",
+      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw==",
+      "license": "MIT"
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@@ -16065,6 +16072,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "three": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.148.0.tgz",
+      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index a89a047..c003462 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "pinia": "^2.0.32",
     "pinia-persistedstate-plugin": "^0.1.0",
     "pinia-plugin-persistedstate": "^3.1.0",
+    "three": "^0.148.0",
     "vue": "^3.2.47",
     "vue-draggable-plus": "^0.6.1",
     "vue-i18n": "^11.2.8",
diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 76c3450..fd24821 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -53,6 +53,9 @@
 		@home="() => fitView({ maxZoom: 1 })"
 	/>
 	<image-preview ref="imagePreviewRef" />
+	<baseModal ref="three">
+
+	</baseModal>
 </template>
 
 <script setup lang="ts">
@@ -64,6 +67,7 @@
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
 	import imagePreview from '../components/image-preview.vue'
+	import baseModal from '../components/base-modal.vue'
 	// 节点
 	import node from './components/node.vue'
 	import resultImage from './components/nodes/result-image.vue'
diff --git a/src/components/Canvas/components/base-modal.vue b/src/components/Canvas/components/base-modal.vue
new file mode 100644
index 0000000..ba6e67d
--- /dev/null
+++ b/src/components/Canvas/components/base-modal.vue
@@ -0,0 +1,51 @@
+<template>
+	<el-dialog
+		class="base-modal"
+		v-model="showDialog"
+		align-center
+		:show-close="false"
+		width="70vw"
+		style="border-radius: 20px; padding: 0; --el-dialog-padding-primary: 0"
+	>
+		<template #header="{ close }">
+			<div class="header-close" @click="close">
+				<svg-icon name="close" size="23" size-unit="px" />
+			</div>
+		</template>
+		<div class="modal-box">
+			<slot></slot>
+		</div>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onBeforeUnmount, shallowRef } from 'vue'
+	const showDialog = ref(false)
+	const open = (url_: any) => {
+		showDialog.value = true
+	}
+	const close = () => {
+		showDialog.value = false
+	}
+
+	defineExpose({
+		open,
+		close
+	})
+</script>
+ 
+<style lang="less" scoped>
+	.header-close {
+		position: absolute;
+		top: 30px;
+		right: 40px;
+		width: 40px;
+		height: 40px;
+		cursor: pointer;
+	}
+	.modal-box {
+		width: 100%;
+		height: 70vh;
+		padding: 67px;
+	}
+</style>