All files / src App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
 
 
 
 
4x
4x
 
4x
 
 
 
 
 
 
4x
 
 
 
 
 
 
24x
18x
 
 
 
 
4x
 
1x
1x
1x
 
 
 
 
1x
 
 
 
 
 
 
 
1x
12x
 
 
 
 
 
 
 
 
 
12x
 
 
 
 
 
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import LoginBadge from '@/components/feature/LoginBadge.vue'
 
const route = useRoute()
const { t } = useI18n()
 
const tabs = [
  { name: 'home', path: '/', labelKey: 'nav.home' },
  { name: 'statement', path: '/statement', labelKey: 'nav.statement' },
  { name: 'policies', path: '/policies', labelKey: 'nav.policies' },
  { name: 'pipeline', path: '/pipeline', labelKey: 'nav.pipeline' }
]
 
const hideTabBar = computed(() => route.path === '/auth/callback')
 
/**
 * Tab 高亮：精确相等只适用于一级页，进入 /statement/:id 后四个 Tab 会全部变灰。
 * 首页 '/' 必须精确匹配，否则 startsWith 会命中所有路由。
 */
function isActive(path: string): boolean {
  if (path === '/') return route.path === '/'
  return route.path === path || route.path.startsWith(`${path}/`)
}
</script>
 
<template>
  <div class="min-h-screen bg-slate-50 text-slate-900">
    <div class="h-[3px] bg-brand-600"></div>
    <header class="sticky top-0 z-20 border-b border-silver-200/70 bg-white/80 backdrop-blur-lg">
      <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
        <div class="text-[15px] font-semibold tracking-tight text-brand-700">{{ t('app.title') }}</div>
        <LoginBadge />
      </div>
    </header>
 
    <main class="mx-auto max-w-3xl px-4 pb-28 pt-5">
      <RouterView />
    </main>
 
    <nav
      v-if="!hideTabBar"
      class="fixed inset-x-0 bottom-0 z-20 border-t border-silver-200/70 bg-white/90 pb-safe backdrop-blur-lg"
    >
      <div class="mx-auto grid max-w-3xl grid-cols-4 px-2 py-1.5">
        <RouterLink
          v-for="tab in tabs"
          :key="tab.name"
          :to="tab.path"
          class="flex flex-col items-center rounded-xl py-2 text-xs font-medium transition-colors"
          :class="isActive(tab.path) ? 'text-brand-700' : 'text-silver-500 hover:text-silver-700'"
        >
          <span
            class="rounded-full px-3 py-1 transition-colors"
            :class="isActive(tab.path) ? 'bg-brand-50' : 'bg-transparent'"
          >{{ t(tab.labelKey) }}</span>
        </RouterLink>
      </div>
    </nav>
  </div>
</template>