深度画布框架

src/views/home/left-nav.vue

@@ -15,9 +15,6 @@
 			<span class="icon"><svg-icon name="home" size="24" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
 		</div> -->
-		<div class="menu-item" @click="onTest">
-			<span class="title">TEST</span>
-		</div>
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
 			<span class="icon"><svg-icon name="history" size="24" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
@@ -81,6 +78,13 @@
 				</div>
 			</div>
 		</div>
+
+		<div class="menu-item" @click="onCanvas(false)">
+			<span class="title">画布</span>
+		</div>
+		<div class="menu-item" @click="onCanvas(true)">
+			<span class="title">深度画布</span>
+		</div>
 	</div>
 </template>
 
@@ -108,8 +112,10 @@
 		router.push({ name: 'mainInput' })
 	}
 	const onHome = () => {}
-	const onTest = () => {
-		router.push({ name: 'test' })
+	const onCanvas = (depth: boolean) => {
+		const query = {}
+		if (depth) query['depth'] = '1'
+		router.push({ name: 'test', query })
 	}
 	const onHistory = () => {
 		if (isCollapse.value) {
@@ -353,14 +359,14 @@
 	}
 	.history-item-menu {
 		user-select: none;
-		
+
 		> div {
 			cursor: pointer;
-			padding: 0.6rem .7rem;
+			padding: 0.6rem 0.7rem;
 			display: flex;
 			font-size: 1.3rem;
-			> .icon{
-				margin-right: .8rem;
+			> .icon {
+				margin-right: 0.8rem;
 			}
 			&:hover {
 				background-color: rgba(0, 0, 0, 0.06);