MOSE-Official-Website-20250712/src/components/layout/NavBar.vue

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';


const { t, locale } = useI18n();
const isMenuOpen = ref(false);

// 切换菜单
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 切换语言
const changeLanguage = (lang: string) => {
  emit('changeLanguage', lang);
};

// 语言选项
const languages = [
  { code: 'en', name: t('language.en') },
  { code: 'zh', name: t('language.zh') },
  { code: 'ja', name: t('language.ja') },
  { code: 'ar', name: t('language.ar') },
  { code: 'fr', name: t('language.fr') },
  { code: 'ko', name: t('language.ko') },
  { code: 'ms', name: t('language.ms') },
  { code: 'pt', name: t('language.pt') },
  { code: 'ru', name: t('language.ru') },
  { code: 'th', name: t('language.th') },
  { code: 'vi', name: t('language.vi') },
];

// 当前语言
const currentLanguage = computed(() => {
  return languages.find(lang => lang.code === locale.value)?.name || t('language.en');
});

// 语言下拉菜单
const isLangDropdownOpen = ref(false);
const toggleLangDropdown = () => {
  isLangDropdownOpen.value = !isLangDropdownOpen.value;
};

// 定义emit
const emit = defineEmits(['changeLanguage']);
</script>

<template>
  <header class="bg-background-dark text-text py-4 px-6 md:px-12 lg:px-24 fixed w-full z-50">
    <div class="container mx-auto flex justify-between items-center">
      <!-- Logo -->
      <router-link to="/" class="flex items-center animate__animated animate__fadeIn animate__duration-fast">
        <img src="/public/real_logo.png" alt="MOSE Logo" class="h-8 w-auto mr-2" />
        <!-- <span class="text-xl font-bold text-primary-light">MOSE</span> -->
      </router-link>

      <!-- Desktop Navigation -->
      <nav class="hidden md:flex items-center space-x-6">
        <!-- 首页 -->
        <router-link 
          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 === '/' }"
        >
          {{ 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="/technology"
          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 === '/technology' }"
        >
          {{ t('nav.technology') }}
        </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="/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>
        
        <!-- 动画演示 -->
        <!-- <router-link 
          to="/animations"
          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 === '/animations' }"
        >
          动画演示
        </router-link> -->
        
        <!-- Language Selector -->
        <div class="relative animate__animated animate__fadeInDown animate__delay-lg animate__duration-fast">
          <button 
            @click="toggleLangDropdown" 
            class="flex items-center text-text-secondary hover:text-text"
          >
            {{ currentLanguage }}
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          
          <div 
            v-show="isLangDropdownOpen" 
            class="absolute right-0 mt-2 w-40 bg-background-light rounded-md shadow-lg py-1 z-10 animate__animated animate__fadeIn animate__duration-very-fast"
          >
            <button 
              v-for="lang in languages" 
              :key="lang.code"
              @click="changeLanguage(lang.code); toggleLangDropdown()"
              class="block w-full text-left px-4 py-2 text-text-secondary hover:bg-background hover:text-text"
              :class="{ 'text-primary-light': locale === lang.code }"
            >
              {{ lang.name }}
            </button>
          </div>
        </div>
      </nav>

      <!-- Mobile Menu Button -->
      <button 
        @click="toggleMenu" 
        class="md:hidden text-text-secondary hover:text-text focus:outline-none animate__animated animate__fadeIn animate__duration-fast"
      >
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          class="h-6 w-6" 
          fill="none" 
          viewBox="0 0 24 24" 
          stroke="currentColor"
        >
          <path 
            v-if="!isMenuOpen" 
            stroke-linecap="round" 
            stroke-linejoin="round" 
            stroke-width="2" 
            d="M4 6h16M4 12h16M4 18h16" 
          />
          <path 
            v-else 
            stroke-linecap="round" 
            stroke-linejoin="round" 
            stroke-width="2" 
            d="M6 18L18 6M6 6l12 12" 
          />
        </svg>
      </button>
    </div>

    <!-- Mobile Menu -->
    <div 
      v-show="isMenuOpen" 
      class="md:hidden bg-background-light mt-4 rounded-lg py-4 px-6 shadow-lg animate__animated animate__duration-fast"
      :class="{'animate__fadeIn': isMenuOpen, 'animate__fadeOut': !isMenuOpen}"
    >
      <div class="flex flex-col space-y-4">
        <!-- 首页 -->
        <router-link 
          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 === '/' }"
          @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="/technology"
          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 === '/technology' }"
          @click="isMenuOpen = false"
        >
          {{ t('nav.technology') }}
        </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="/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"
        >
          {{ t('nav.contact') }}
        </router-link>
        
        <!-- 动画演示 -->
        <!-- <router-link 
          to="/animations"
          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 === '/animations' }"
          @click="isMenuOpen = false"
        >
          动画演示
        </router-link> -->
        
        <!-- 翻译工具 -->
        <!-- <router-link 
          to="/translate"
          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 === '/translate' }"
          @click="isMenuOpen = false"
        >
          翻译工具
        </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> -->
          <div class="flex flex-col space-y-2">
            <button 
              v-for="lang in languages" 
              :key="lang.code"
              @click="changeLanguage(lang.code); isMenuOpen = false"
              class="text-left text-text-secondary hover:text-text"
              :class="{ 'text-primary-light': locale === lang.code }"
            >
              {{ lang.name }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
  
  <!-- Spacer to prevent content from hiding under fixed header -->
  <div class="h-16"></div>
</template>