优化导航头

app/components/AppHeader.vue

@@ -1,17 +1,34 @@
 <script lang="ts" setup>
 import type {NavigationMenuItem} from '@nuxt/ui'
+import {onMounted, onUnmounted, ref} from 'vue'
+
+const isScrolled = ref(false)
+const headerUI = ref({
+  root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
+})
+
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 10
+  headerUI.value.root = isScrolled.value
+      ? 'fixed top-0 left-0 right-0 z-50 bg-green-700 h-8 lg:h-16' // 不透明
+      : 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16' // 半透明
+}
+
+onMounted(() => window.addEventListener('scroll', handleScroll))
+onUnmounted(() => window.removeEventListener('scroll', handleScroll))
+
 
 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('/product'),
   children: [
     {label: '智慧蜂场建设', to: '/product/beenfactory'},
@@ -22,39 +39,48 @@ const items = computed<NavigationMenuItem[]>(() => [{
   ]
 }, {
   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: '/contact',
-    icon: 'i-lucide-box',
+
     active: route.path.startsWith('/contact')
   },
+  {
+    label: '后台管理',
+    to: '/contact',
+
+    active: route.path.startsWith('/123')
+  },
 ])
 </script>
 
 <template>
-  <UHeader>
+  <UHeader
+      :ui="headerUI"
+
+  >
     <!-- 标题部分 -->
     <template #title>
-      <view class="h-6 w-auto text-primary">
+      <view class="h-6 w-auto text-white">
         创特蜂箱
       </view>
     </template>
@@ -63,16 +89,15 @@ const items = computed<NavigationMenuItem[]>(() => [{
     <UNavigationMenu
         :items="items"
 
+        :ui="{
+          link: 'text-white text-lg font-bold '
+        }"
         highlight
         highlight-color="primary"
     />
 
     <!-- 右侧区域 -->
-    <template #right>
-      <view class="text-primary">
-        商户管理
-      </view>
-    </template>
+    <template #right/>
 
     <!-- 移动端菜单 -->
     <template #body>