beehive/app/components/AppHeader.vue

<script lang="ts" setup>
import type {NavigationMenuItem} from '@nuxt/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: '首页',
  to: '/',
  icon: 'i-lucide-book-open',
  active: route.path.startsWith('/')
}, {
  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>
      <view class="h-6 w-auto text-primary">
        创特蜂箱
      </view>
    </template>

    <!-- 导航菜单 -->
    <UNavigationMenu
        :items="items"

        highlight
        highlight-color="primary"
    />

    <!-- 右侧区域 -->
    <template #right>
      <view class="text-primary">
        商户管理
      </view>
    </template>

    <!-- 移动端菜单 -->
    <template #body>
      <UNavigationMenu
          :items="items"
          class="-mx-2.5 bg-teal-50/80"
          orientation="vertical"
      />
    </template>
  </UHeader>
</template>