56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<template>
|
|
<div class="min-h-screen w-full bg-white flex flex-col">
|
|
<!-- 顶部导航栏 - 仅在非框架测试页面显示 -->
|
|
<header v-if="showHeaderFooter" class="bg-blue-600 text-white p-4 shadow-md">
|
|
<div class="container mx-auto flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold">AutoRobot 应用</h1>
|
|
<nav>
|
|
<ul class="flex space-x-6">
|
|
<li>
|
|
<router-link to="/" class="hover:text-blue-200 transition-colors">主页</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/ide" class="hover:text-blue-200 transition-colors">IDE界面</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/home" class="hover:text-blue-200 transition-colors">控制面板</router-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 路由视图容器 -->
|
|
<router-view class="flex-grow"></router-view>
|
|
|
|
<!-- 页脚 - 仅在非框架测试页面显示 -->
|
|
<footer v-if="showHeaderFooter" class="bg-gray-800 text-white py-8">
|
|
<div class="container mx-auto text-center">
|
|
<p>© 2024 AutoRobot. 保留所有权利。</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { RouterLink, RouterView, useRoute } from 'vue-router';
|
|
import { ref, watch } from 'vue';
|
|
|
|
// 获取当前路由
|
|
const route = useRoute();
|
|
// 控制页眉和页脚的显示状态
|
|
const showHeaderFooter = ref(true);
|
|
|
|
// 监听路由变化，当是框架测试页面或停靠面板演示页面时隐藏页眉和页脚
|
|
watch(
|
|
() => route.path,
|
|
(newPath) => {
|
|
showHeaderFooter.value = newPath !== '/framework-test' && newPath !== '/dock-panel-demo' && newPath !== '/dock-layout-test';
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 可以根据需要添加全局样式 */
|
|
</style> |