beehive/app/components/AppHeader.vue
2025-10-22 16:05:07 +08:00

71 lines
1.7 KiB
Vue

<script lang="ts" setup>
import type {NavigationMenuItem} from '@nuxt/ui'
const route = useRoute()
const items = computed<NavigationMenuItem[]>(() => [{
label: '首页',
to: '/docs/getting-started',
icon: 'i-lucide-book-open',
active: route.path.startsWith('/docs/getting-started')
}, {
label: '产品与服务',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components'),
children: [
{label: '智慧蜂场建设', to: '/hive'},
{label: '智能蜂箱研制', to: '/hive'},
{label: '质量安全溯源', to: '/hive'},
{label: '蜂产业大数据', to: '/sensors'},
{label: '知识服务中心', to: '/sensors'},
]
}, {
label: '应用实例',
icon: 'i-simple-icons-figma',
to: 'https://go.nuxt.com/figma-ui',
target: '_blank'
}, {
label: '典型案例',
icon: 'i-lucide-rocket',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}, {
label: '新闻资讯',
to: '/docs/components',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components')
}, {
label: '关于我们',
to: '/docs/components',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components')
}, {
label: '联系我们',
to: '/docs/components',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components')
},])
</script>
<template>
<UHeader>
<template #title>
<Logo class="h-6 w-auto"/>
</template>
<UNavigationMenu :items="items"/>
<!-- <template #right>-->
<!-- <view>-->
<!-- -->
<!-- </view>-->
<!-- </template>-->
<template #body>
<UNavigationMenu :items="items" class="-mx-2.5" orientation="vertical"/>
</template>
</UHeader>
</template>