<template>
  <div class="app-shell">
    <header class="topbar">
      <strong>Happy Up</strong>
      <span class="stage">Sprint 6 H5</span>
    </header>
    <div class="page">
      <RouterView />
    </div>
    <nav v-if="showNav" class="bottom-nav">
      <RouterLink to="/" :class="{ active: route.path === '/' }">
        <span class="dot"></span>
        首页
      </RouterLink>
      <RouterLink to="/screening" :class="{ active: route.path === '/screening' }">
        <span class="dot"></span>
        筛查
      </RouterLink>
      <RouterLink to="/reports" :class="{ active: route.path === '/reports' }">
        <span class="dot"></span>
        报告
      </RouterLink>
      <RouterLink to="/practice" :class="{ active: route.path === '/practice' }">
        <span class="dot"></span>
        跟练
      </RouterLink>
      <RouterLink to="/training" :class="{ active: route.path === '/training' }">
        <span class="dot"></span>
        训练
      </RouterLink>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const showNav = computed(() => route.path !== '/login')
</script>
