<template>
  <div class="min-h-screen bg-gray-100">
    <header class="bg-white shadow">
      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
        <h1 class="text-xl font-bold text-gray-800">📚 学生数据管理系统</h1>
        <nav class="flex gap-4">
          <NuxtLink 
            to="/" 
            class="px-4 py-2 rounded-lg hover:bg-gray-100"
            :class="$route.path === '/' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'"
          >
            📊 数据概览
          </NuxtLink>
          <NuxtLink 
            to="/students" 
            class="px-4 py-2 rounded-lg hover:bg-gray-100"
            :class="$route.path === '/students' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'"
          >
            👨‍🎓 学生列表
          </NuxtLink>
        </nav>
      </div>
    </header>
    <main class="max-w-7xl mx-auto px-4 py-6">
      <slot />
    </main>
  </div>
</template>

<style>
* {
  box-sizing: border-box;
}
</style>
