165 lines
4.4 KiB
Vue
165 lines
4.4 KiB
Vue
<script lang="ts" setup>
|
|
import type { IBreadcrumbItem } from '~/types'
|
|
|
|
defineProps({
|
|
breadcrumbs: {
|
|
type: Array as () => IBreadcrumbItem[],
|
|
default: () => [],
|
|
},
|
|
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/prep/',
|
|
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 justify-between items-center gap-2 px-4 w-full">
|
|
<div
|
|
class="flex items-center gap-2"
|
|
:class="`${hideTrigger ? 'px-7' : ''}`"
|
|
>
|
|
<SidebarTrigger
|
|
v-if="!hideTrigger"
|
|
class="-ml-1"
|
|
/>
|
|
<img
|
|
v-if="hideTrigger"
|
|
src="/images/xsh_logo.png"
|
|
alt="Logo"
|
|
class="w-10 aspect-square"
|
|
/>
|
|
<Separator
|
|
orientation="vertical"
|
|
class="mr-2 h-4"
|
|
/>
|
|
<Breadcrumb v-if="breadcrumbs.length > 0">
|
|
<BreadcrumbList>
|
|
<template
|
|
v-for="(crumb, i) in breadcrumbs"
|
|
:key="i"
|
|
>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink
|
|
v-if="crumb.path"
|
|
:href="crumb.path"
|
|
>
|
|
{{ crumb.label }}
|
|
</BreadcrumbLink>
|
|
<BreadcrumbPage v-else>
|
|
{{ crumb.label }}
|
|
</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator v-if="i < breadcrumbs.length - 1" />
|
|
</template>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
<slot name="title-area" />
|
|
</div>
|
|
<!-- <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>
|