ct/app/components/AppHeader.vue

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: '首页',
    to: '/',

  },
  {
    label: '共享解决方案',

    active: route.path.startsWith('/sharedSolutions'),
    children: [
      {
        label: '共享电动车',
        icon: 'i-lucide-file-text',
        description: '通过扫码开锁，循环共享',
        to: '/sharedSolutions/eBike',
      }, {
        label: '共享电动车',
        icon: 'i-lucide-file-text',
        description: '通过扫码开锁，循环共享',
        to: '/sharedSolutions/eBike',
      }, {
        label: '共享电动车',
        icon: 'i-lucide-file-text',
        description: '通过扫码开锁，循环共享',
        to: '/sharedSolutions/eBike',
      },

    ]
  },
  {
    label: '行业解决方案',
    to: 'https://go.nuxt.com/figma-ui',
    target: '_blank'
  },
  {
    label: '软件应用开发',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  },
  {
    label: '物联网解决方案',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  },
  {
    label: '关于创特',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }, {
    label: '后台管理',
    to: 'https://ele.ccttiot.com/login',
    target: '_blank'
  }

])
</script>

<template>
  <UHeader class="min-w-full">
    <template #title>
      <IndexLogo class="h-6 w-auto"/>
    </template>

    <UNavigationMenu :items="items" color="primary"/>

    <template #right>
      <ColorModeButton/>
    </template>
    <template #body>
      <div class="px-4 py-2">
        <UNavigationMenu
            :items="items"
            class="-mx-2.5"
            color="primary"
            orientation="vertical"
        />
      </div>
    </template>
  </UHeader>
</template>