89 lines
2.5 KiB
Vue
89 lines
2.5 KiB
Vue
<!-- app/components/layout/AppHeader.vue - 顶部导航和页面切换入口 -->
|
||
<script lang="ts" setup>
|
||
import { Activity, LayoutDashboard, Moon, Search, Sun } from "lucide-vue-next";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
/** 使用 VueUse 的 useColorMode 切换 dark/light，class 会挂到 <html> 上 */
|
||
const colorMode = useColorMode();
|
||
const isDark = computed(() => colorMode.value === "dark");
|
||
|
||
function toggleColorMode() {
|
||
colorMode.value = isDark.value ? "light" : "dark";
|
||
}
|
||
|
||
/** 顶部导航项，icon 使用 lucide，和项目里 shadcn 的图标体系保持一致 */
|
||
const navItems = [
|
||
{
|
||
label: "答题",
|
||
to: "/",
|
||
icon: Search
|
||
},
|
||
{
|
||
label: "Dashboard",
|
||
to: "/dashboard",
|
||
icon: LayoutDashboard
|
||
}
|
||
];
|
||
|
||
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>
|
||
|
||
<!-- 深色/浅色主题切换按钮 -->
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
aria-label="切换主题"
|
||
@click="toggleColorMode"
|
||
>
|
||
<Sun v-if="isDark" class="size-4" />
|
||
<Moon v-else class="size-4" />
|
||
</Button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
</template>
|