You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
12 KiB
309 lines
12 KiB
<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>
|