深度画布框架

src/views/home/index.vue

@@ -17,6 +17,7 @@
 	</div>
 	<setting />
 	<flow-canvas ref="flowCanvasRef" />
+	<depth-canvas ref="depthCanvasRef" />
 </template>
 
 <script setup lang="ts">
@@ -26,16 +27,21 @@
 	import setting from './setting/index.vue'
 	import { useUserInfoStore, useGlobalStore } from '@/stores'
 	import FlowCanvas from '@/components/Canvas/FlowCanvas/index.vue'
+	import DepthCanvas from '@/components/Canvas/DepthCanvas/index.vue'
 	import myEvent from '@/utils/myEvent'
 	const userInfoStore = useUserInfoStore()
 	const globalStore = useGlobalStore()
 	userInfoStore.getUserInfo()
 	const isAnimation = computed(() => globalStore.state.homeAnimation)
+
 	const flowCanvasRef = ref(null)
-	const openFlowCanvas = (config) => {
-		flowCanvasRef.value.open(config)
-	}
+	const openFlowCanvas = (config) => flowCanvasRef.value.open(config)
 	myEvent.add('openFlowCanvas', openFlowCanvas)
+
+	const depthCanvasRef = ref(null)
+	const openDepthCanvas = (config) => depthCanvasRef.value.open(config)
+	myEvent.add('openDepthCanvas', openDepthCanvas)
+
 	onMounted(() => {
 		setTimeout(() => {
 			globalStore.setHomeAnimation(false)
@@ -43,6 +49,7 @@
 	})
 	onUnmounted(() => {
 		myEvent.remove('openFlowCanvas', openFlowCanvas)
+		myEvent.remove('openDepthCanvas', openDepthCanvas)
 	})
 </script>