80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<!-- app/components/layout/AppHeader.vue - 顶部导航和页面切换入口 -->
|
|
<script lang="ts" setup>
|
|
import {
|
|
Activity,
|
|
BookOpenText,
|
|
LayoutDashboard,
|
|
Search
|
|
} from "lucide-vue-next";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
/** 顶部导航项，icon 使用 lucide，和项目里 shadcn 的图标体系保持一致 */
|
|
const navItems = [
|
|
{
|
|
label: "答题",
|
|
to: "/",
|
|
icon: Search
|
|
},
|
|
{
|
|
label: "Dashboard",
|
|
to: "/dashboard",
|
|
icon: LayoutDashboard
|
|
},
|
|
{
|
|
label: "文档",
|
|
to: "/docs",
|
|
icon: BookOpenText
|
|
}
|
|
];
|
|
|
|
const route = useRoute();
|
|
|
|
/** 当前路由高亮，Dashboard 的子路径也归到 Dashboard 导航项 */
|
|
const isActive = (to: string) => {
|
|
if (to === "/") return route.path === "/";
|
|
return route.path.startsWith(to);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80"
|
|
>
|
|
<div
|
|
class="mx-auto flex min-h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 md:px-6"
|
|
>
|
|
<NuxtLink to="/" class="flex min-w-0 items-center gap-3">
|
|
<span
|
|
class="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-primary text-primary-foreground"
|
|
>
|
|
<Activity class="size-5" />
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block truncate text-base font-semibold text-foreground">
|
|
OCS AI 答题服务
|
|
</span>
|
|
<span class="block truncate text-xs text-muted-foreground">
|
|
Nuxt API Runtime
|
|
</span>
|
|
</span>
|
|
</NuxtLink>
|
|
|
|
<nav class="flex shrink-0 items-center gap-1 overflow-x-auto">
|
|
<Button
|
|
v-for="item in navItems"
|
|
:key="item.to"
|
|
as-child
|
|
:variant="isActive(item.to) ? 'secondary' : 'ghost'"
|
|
size="sm"
|
|
>
|
|
<NuxtLink :to="item.to" class="gap-2">
|
|
<component :is="item.icon" class="size-4" />
|
|
<span>{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|