jinshen-website/app/components/JinshenHeader.vue

<template>
    <div class="header-container">
        <div class="logo-section">
            <NuxtLink :to="$localePath('/')" class="logo-link">
                <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
            </NuxtLink>
        </div>

        <!-- 导航菜单 -->
        <el-menu
:default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
            :persistent="false" router>
            <el-menu-item index="productions" :route="$localePath('/productions')">
                <span class="title">{{ $t('navigation.productions') }}</span>
            </el-menu-item>
            <el-menu-item index="solutions" :route="$localePath('/solutions')">
                <span class="title">{{ $t('navigation.solutions') }}</span>
            </el-menu-item>
            <el-menu-item index="support" :route="$localePath('/support')">
                <span class="title">{{ $t('navigation.support') }}</span>
            </el-menu-item>
            <el-menu-item index="about" :route="$localePath('/about')">
                <span class="title">{{ $t('navigation.about-us') }}</span>
            </el-menu-item>
        </el-menu>

        <!-- 右侧功能区 -->
        <div class="header-actions">
            <el-input
v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
                :prefix-icon="Search" clearable @keyup.enter="handleSearch" />
            <el-dropdown @command="setLocale">
                <el-link type="info" :underline="false">
                    <el-icon class="mdi mdi-translate translate-link" />
                </el-link>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="zh">简体中文</el-dropdown-item>
                        <el-dropdown-item command="en">English</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';

const router = useRouter();

const { setLocale } = useI18n();

const searchQuery = ref('')

const activeName = ref<string | undefined>(undefined)

const handleSearch = () => {
    if (searchQuery.value.trim()) {
        // 这里可以添加搜索逻辑，例如导航到搜索结果页面
        console.log('Searching for:', searchQuery.value);
        // 示例：导航到搜索结果页面
        // router.push({ path: '/search', query: { q: searchQuery.value } });
    }
}

const refreshMenu = () => {
    const path = router.currentRoute.value.path;
    if (path.startsWith('/productions')) {
        activeName.value = 'productions';
    } else if (path.startsWith('/solutions')) {
        activeName.value = 'solutions';
    } else if (path.startsWith('/support')) {
        activeName.value = 'support';
    } else if (path.startsWith('/about')) {
        activeName.value = 'about';
    } else {
        activeName.value = undefined; // 默认不激活任何菜单项
    }
}

onMounted(() => {
    refreshMenu();
    // 监听路由变化以更新激活状态
    router.afterEach(() => {
        refreshMenu();
    });
})
</script>

<style scoped>
.header-container {
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    height: 80px;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.logo-section {
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: 20px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.website-logo {
    height: 64px;
    width: auto;
}

.header-menu {
    margin-right: 40px;
    border-bottom: none !important;
    width: auto;
    --el-menu-horizontal-height: 100%;
}

.header-menu .el-menu-item {
    font-size: 16px;
    background-color: transparent !important;
}

.header-menu .el-menu-item.is-active {
    border-bottom: 2.5px solid var(--el-color-primary-dark-2);
    color: var(--el-color-primary);
}

.header-menu .el-menu-item:hover {
    border-bottom: 2.5px solid var(--el-color-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-input {
    width: 200px;
}

.translate-link {
    font-size: 20px;
}
</style>