fix

src/views/home/index.vue

@@ -16,11 +16,11 @@
 		</div>
 	</div>
 	<setting />
-	<flow-canvas />
+	<flow-canvas ref="flowCanvasRef" />
 </template>
 
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import { computed, onMounted, onUnmounted, ref } from 'vue'
 	import LeftNav from './left-nav.vue'
 	import TopNav from './top-nav.vue'
 	import setting from './setting/index.vue'
@@ -28,6 +28,16 @@
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
 	import FlowCanvas from '@/components/Canvas/FlowCanvas/index.vue'
+	import myEvent from '@/utils/myEvent'
+
+	const flowCanvasRef = ref(null)
+	const openFlowCanvas = () => {
+		flowCanvasRef.value.open()
+	}
+	myEvent.add('openFlowCanvas', openFlowCanvas)
+	onUnmounted(() => {
+		myEvent.remove('openFlowCanvas', openFlowCanvas)
+	})
 </script>
 
 <style lang="less" scoped>

src/views/home/left-nav.vue

@@ -15,10 +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="onCanvas">
-			<!-- <span class="icon"><svg-icon name="home" size="24" /></span> -->
-			<span class="title">画布</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>
@@ -108,9 +104,6 @@
 		router.push({ name: 'mainInput' })
 	}
 	const onHome = () => {}
-	const onCanvas = () => {
-		router.push({ name: 'canvas' })
-	}
 	const onHistory = () => {
 		if (isCollapse.value) {
 			globalStore.setHomeLeftNavCollapse(false)

src/views/home/test.vue

@@ -1,14 +1,22 @@
 <template>
 	<div class="test">
 		<p>Conversation Item - {{ id }}</p>
+		<button @click="openCanvas">打开画布</button>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import myEvent from '@/utils/myEvent'
+	import { computed, onMounted } from 'vue'
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
 	const id = computed(() => route.params.id)
+	const openCanvas = () => {
+		myEvent.emit('openFlowCanvas')
+	}
+	onMounted(() => {
+		openCanvas();
+	})
 </script>
 
 <style lang="less" scoped>
@@ -19,6 +27,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-size: 10rem;
+		flex-direction: column;
+		> p {
+			font-size: 10rem;
+		}
 	}
 </style>