116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
|
|
|
defineProps({
|
|
hideTrigger: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
nav: {
|
|
type: Array as () => TopbarNavItem[],
|
|
default: () => topbarNavDefaults,
|
|
},
|
|
});
|
|
|
|
const colorMode = useColorMode();
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export interface TopbarNavItem {
|
|
title: string;
|
|
to: string;
|
|
icon?: string;
|
|
}
|
|
|
|
export const topbarNavDefaults = [
|
|
{
|
|
title: "课程中心",
|
|
to: "/course",
|
|
icon: "tabler:home",
|
|
},
|
|
{
|
|
title: "AI 备课",
|
|
to: "/course/prepare",
|
|
icon: "tabler:clipboard-list",
|
|
},
|
|
{
|
|
title: "AI 教科研",
|
|
to: "/course/research",
|
|
icon: "tabler:report-search",
|
|
},
|
|
{
|
|
title: "课程资源库",
|
|
to: "/course/resources",
|
|
icon: "tabler:books",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear border-b sticky top-0 z-30 bg-background"
|
|
>
|
|
<!-- group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 -->
|
|
<div class="flex items-center gap-2 px-4 w-full">
|
|
<SidebarTrigger v-if="!hideTrigger" class="-ml-1" />
|
|
<slot name="title-area" />
|
|
<div class="flex-1 flex justify-center">
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem v-for="item in nav" :key="item.title">
|
|
<NuxtLink
|
|
v-slot="{ isActive, href, navigate }"
|
|
:to="item.to"
|
|
custom
|
|
>
|
|
<NavigationMenuLink
|
|
:active="isActive"
|
|
:href
|
|
:class="navigationMenuTriggerStyle()"
|
|
@click="navigate"
|
|
>
|
|
<Icon
|
|
v-if="item.icon"
|
|
:name="item.icon"
|
|
class="mr-1.5"
|
|
size="16px"
|
|
/>
|
|
<span>{{ item.title }}</span>
|
|
</NavigationMenuLink>
|
|
</NuxtLink>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="icon">
|
|
<Icon
|
|
name="tabler:moon"
|
|
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
|
|
/>
|
|
<Icon
|
|
name="tabler:sun"
|
|
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
|
|
/>
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="colorMode.preference = 'light'">
|
|
亮色
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="colorMode.preference = 'dark'">
|
|
暗色
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="colorMode.preference = 'system'">
|
|
跟随系统
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped></style>
|