125 lines
3.2 KiB
Vue
125 lines
3.2 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>
|