深度画布框架

src/views/home/test.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="test">
 		<button @click="openCanvas">打开画布</button>
+		<button @click="openDepthCanvas">打开深度画布</button>
 	</div>
 </template>
 
@@ -9,13 +10,20 @@
 	import { computed, onMounted } from 'vue'
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
+	const url =
+		'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
 	const openCanvas = () => {
-		myEvent.emit('openFlowCanvas', {
-			url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
-		})
+		myEvent.emit('openFlowCanvas', { url })
+	}
+	const openDepthCanvas = () => {
+		myEvent.emit('openDepthCanvas', { url })
 	}
 	onMounted(() => {
-		openCanvas()
+		if (route.query.depth) {
+			openDepthCanvas()
+		} else {
+			openCanvas()
+		}
 	})
 </script>
 
@@ -28,7 +36,8 @@
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
-		> p {
+		gap: 2rem;
+		> button {
 			font-size: 10rem;
 		}
 	}