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>

    <div class="header-menu-section">
      <!-- 导航菜单 -->
      <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>

    <!-- 右侧功能区 -->
    <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 localePath = useLocalePath();

const { setLocale } = useI18n();

const searchQuery = ref("");

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

const handleSearch = () => {
  const trimmed = searchQuery.value.trim();
  if (!trimmed) return;
  navigateTo({
    path: localePath('/search'),
    query: {
      query: trimmed
    }
  })
  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 {
  padding: 0 10px;
  display: flex;
  height: 80px;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
}

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

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

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

.header-menu-section {
  flex: 2;
  display: flex;
  justify-content: center;
  height: 100%;
}

.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 {
  flex: 1;
  justify-content: flex-end;
  display: flex;
  gap: 16px;
}

.search-input {
  width: 200px;
}

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