From e42b95c67b407ac3362f4877fd01c78bc68e4aa3 Mon Sep 17 00:00:00 2001
From: hflllll <violeteverdack@gmail.com>
Date: Sun, 13 Jul 2025 12:14:04 +0800
Subject: [PATCH] =?UTF-8?q?'=E4=BF=AE=E6=94=B9tab=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=97=AE=E9=A2=98'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/NavBar.vue | 157 ++++++++++++++++++++++++++++++---------
 1 file changed, 123 insertions(+), 34 deletions(-)

diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 9a2b2e3..85f9a11 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -29,17 +29,6 @@ const currentLanguage = computed(() => {
   return languages.find(lang => lang.code === locale.value)?.name || t('language.en');
 });
 
-// 导航菜单
-const navItems = [
-  { name: t('nav.home'), path: '/' },
-  { name: t('nav.ecosystem'), path: '/ecosystem' },
-  { name: t('nav.about'), path: '/about' },
-  { name: t('nav.resources'), path: '/resources' },
-  { name: t('nav.community'), path: '/community' },
-  { name: t('nav.faq'), path: '/faq' },
-  { name: t('nav.contact'), path: '/contact' }
-];
-
 // 语言下拉菜单
 const isLangDropdownOpen = ref(false);
 const toggleLangDropdown = () => {
@@ -61,20 +50,67 @@ const emit = defineEmits(['changeLanguage']);
 
       <!-- Desktop Navigation -->
       <nav class="hidden md:flex items-center space-x-6">
+        <!-- 首页 -->
         <router-link 
-          v-for="(item, index) in navItems" 
-          :key="item.path" 
-          :to="item.path"
+          to="/"
           class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast"
-          :class="{ 
-            'text-primary-light font-medium': $route.path === item.path,
-            'animate__delay-xs': index === 1,
-            'animate__delay-sm': index === 2,
-            'animate__delay-md': index === 3,
-            'animate__delay-lg': index === 4
-          }"
+          :class="{ 'text-primary-light font-medium': $route.path === '/' }"
+        >
+          {{ t('nav.home') }}
+        </router-link>
+        
+        <!-- 生态系统 -->
+        <router-link 
+          to="/ecosystem"
+          class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-xs"
+          :class="{ 'text-primary-light font-medium': $route.path === '/ecosystem' }"
+        >
+          {{ t('nav.ecosystem') }}
+        </router-link>
+        
+        <!-- 关于我们 -->
+        <router-link 
+          to="/about"
+          class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-sm"
+          :class="{ 'text-primary-light font-medium': $route.path === '/about' }"
+        >
+          {{ t('nav.about') }}
+        </router-link>
+        
+        <!-- 资源 -->
+        <router-link 
+          to="/resources"
+          class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-md"
+          :class="{ 'text-primary-light font-medium': $route.path === '/resources' }"
         >
-          {{ item.name }}
+          {{ t('nav.resources') }}
+        </router-link>
+        
+        <!-- 社区 -->
+        <router-link 
+          to="/community"
+          class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-lg"
+          :class="{ 'text-primary-light font-medium': $route.path === '/community' }"
+        >
+          {{ t('nav.community') }}
+        </router-link>
+        
+        <!-- 常见问题 -->
+        <router-link 
+          to="/faq"
+          class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-lg"
+          :class="{ 'text-primary-light font-medium': $route.path === '/faq' }"
+        >
+          {{ t('nav.faq') }}
+        </router-link>
+        
+        <!-- 联系我们 -->
+        <router-link 
+          to="/contact"
+          class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-lg"
+          :class="{ 'text-primary-light font-medium': $route.path === '/contact' }"
+        >
+          {{ t('nav.contact') }}
         </router-link>
         
         <!-- Language Selector -->
@@ -143,26 +179,79 @@ const emit = defineEmits(['changeLanguage']);
       :class="{'animate__fadeIn': isMenuOpen, 'animate__fadeOut': !isMenuOpen}"
     >
       <div class="flex flex-col space-y-4">
+        <!-- 首页 -->
         <router-link 
-          v-for="(item, index) in navItems" 
-          :key="item.path" 
-          :to="item.path"
+          to="/"
           class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast"
-          :class="{ 
-            'text-primary-light font-medium': $route.path === item.path,
-            'animate__delay-xs': index === 1,
-            'animate__delay-sm': index === 2,
-            'animate__delay-md': index === 3,
-            'animate__delay-lg': index === 4
-          }"
+          :class="{ 'text-primary-light font-medium': $route.path === '/' }"
+          @click="isMenuOpen = false"
+        >
+          {{ t('nav.home') }}
+        </router-link>
+        
+        <!-- 生态系统 -->
+        <router-link 
+          to="/ecosystem"
+          class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-xs"
+          :class="{ 'text-primary-light font-medium': $route.path === '/ecosystem' }"
+          @click="isMenuOpen = false"
+        >
+          {{ t('nav.ecosystem') }}
+        </router-link>
+        
+        <!-- 关于我们 -->
+        <router-link 
+          to="/about"
+          class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-sm"
+          :class="{ 'text-primary-light font-medium': $route.path === '/about' }"
+          @click="isMenuOpen = false"
+        >
+          {{ t('nav.about') }}
+        </router-link>
+        
+        <!-- 资源 -->
+        <router-link 
+          to="/resources"
+          class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-md"
+          :class="{ 'text-primary-light font-medium': $route.path === '/resources' }"
+          @click="isMenuOpen = false"
+        >
+          {{ t('nav.resources') }}
+        </router-link>
+        
+        <!-- 社区 -->
+        <router-link 
+          to="/community"
+          class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-md"
+          :class="{ 'text-primary-light font-medium': $route.path === '/community' }"
+          @click="isMenuOpen = false"
+        >
+          {{ t('nav.community') }}
+        </router-link>
+        
+        <!-- 常见问题 -->
+        <router-link 
+          to="/faq"
+          class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-lg"
+          :class="{ 'text-primary-light font-medium': $route.path === '/faq' }"
+          @click="isMenuOpen = false"
+        >
+          {{ t('nav.faq') }}
+        </router-link>
+        
+        <!-- 联系我们 -->
+        <router-link 
+          to="/contact"
+          class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-lg"
+          :class="{ 'text-primary-light font-medium': $route.path === '/contact' }"
           @click="isMenuOpen = false"
         >
-          {{ item.name }}
+          {{ t('nav.contact') }}
         </router-link>
         
         <!-- Mobile Language Selector -->
         <div class="py-2 border-t border-background animate__animated animate__fadeInUp animate__delay-lg animate__duration-fast">
-          <p class="text-text-secondary mb-2">{{ t('language.en') }}</p>
+          <!-- <p class="text-text-secondary mb-2">{{ t('language.en') }}</p> -->
           <div class="flex flex-col space-y-2">
             <button 
               v-for="lang in languages"