更改头部标题和底部导航

src/views/Workshop/index.vue

@@ -1,10 +1,36 @@
 <script setup lang="ts">
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	import { ref } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import RouteCache from '@/components/RouteCache.vue'
+	import profile from './profile.vue'
 	//const props = defineProps({
 	//})
 	//const emit = defineEmits([
 	//])
+	const profileRef = ref(null)
+	const handleClickProfile = () => {
+		profileRef.value.open()
+	}
 </script>
 <template>
-	<RouteCache />
-</template>
+	<div class="workshop">
+		<header-title @clickProfile="handleClickProfile" />
+		<RouteCache />
+		<footer-navigation />
+	</div>
+	<profile ref="profileRef" />
+</template>
+<style scoped lang="less">
+	.workshop {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .routeCache {
+			flex: 1;
+		}
+	}
+</style>