<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>