<script setup>
import { computed } from 'vue'
import { useAuthStore } from './stores/auth'

const authStore = useAuthStore()

const isAuthenticated = computed(() => authStore.isAuthenticated)

const handleLogout = () => {
  authStore.logout()
}
</script>

<template>
  <v-app>
    <!-- 导航栏 -->
    <v-app-bar v-if="isAuthenticated" app color="primary" dark>
      <v-app-bar-title>学生管理系统</v-app-bar-title>
      <v-spacer />
      <v-btn
        :to="{ name: 'home' }"
        color="white"
        variant="text"
      >
        主页
      </v-btn>
      <v-btn
        :to="{ name: 'profile' }"
        color="white"
        variant="text"
      >
        个人资料
      </v-btn>
      <v-btn color="white" variant="text" @click="handleLogout"> 登出 </v-btn>
    </v-app-bar>

    <!-- 主要内容区域 -->
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<style scoped>
.v-app-bar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
