hanye-website/components/TheHeader.vue

<template>
  <!-- Header -->
  <header class="fixed top-0 z-50 w-full bg-slate-900/70 backdrop-blur-[50px]">
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10">
      <div class="h-[55px] flex justify-between items-center sm:h-[72px]">
        <div class="flex justify-start items-center gap-12 lg:gap-24">
          <nuxt-link :to="homePath" class="brand-link mt-[5px] flex-shrink-0">
            <i
              class="icon-brand text-white text-1xl sm:text-2xl block transition-[transform,filter] duration-500 ease-in-out"
            ></i>
          </nuxt-link>
          <!-- Desktop Menu -->
          <nav class="hidden md:flex justify-start items-start gap-7 lg:gap-14">
            <template v-for="item in menuItems" :key="item.label">
              <!-- Regular Link -->
              <nuxt-link
                v-if="!item.isDropdown"
                class="main-nav-link relative inline-block justify-start text-white text-sm opacity-80 hover:opacity-100 transition-opacity py-2 px-3 rounded-md"
                :to="item.path"
                :class="[
                  $route.path === item.path
                    ? 'font-bold opacity-100 bg-white/15'
                    : '',
                ]"
              >
                {{ $t(item.label) }}
              </nuxt-link>

              <!-- Dropdown Container -->
              <div
                v-else-if="item.isDropdown"
                class="relative"
                @mouseleave="handleMouseLeave"
              >
                <!-- Dropdown Trigger -->
                <div
                  @mouseenter="handleMouseEnter(item.label)"
                  class="justify-start text-white text-sm opacity-80 hover:opacity-100 transition-opacity cursor-pointer flex items-center gap-1 py-2 px-3 rounded-md"
                  :class="[
                    $route.path.startsWith(item.pathPrefix)
                      ? 'font-bold opacity-100 bg-white/15'
                      : '',
                  ]"
                >
                  <span>{{ $t(item.label) }}</span>
                </div>

                <!-- Dropdown Panel -->
                <transition name="fade-down">
                  <div
                    v-if="item.isDropdown && openDropdown === item.label"
                    @mouseenter="handleMouseEnter(item.label)"
                    class="absolute left-0 top-full mt-4 w-max min-w-[700px] bg-slate-900 rounded-none border-none shadow-none p-0 z-10 grid grid-cols-2 gap-0 transition-all duration-300"
                  >
                    <div
                      v-for="(section, index) in item.children"
                      :key="index"
                      class="bg-slate-900 rounded-none p-6 flex flex-col gap-1"
                    >
                      <h3 class="text-base font-medium text-white mb-2">
                        {{ $t(section.title) }}
                      </h3>
                      <ul class="flex flex-col gap-1">
                        <li v-for="link in section.items" :key="link.path">
                          <nuxt-link
                            :to="link.path"
                            @click="handleMouseLeave"
                            class="block text-base text-gray-200 rounded-none py-2 transition-all duration-200  hover:text-white/80 hover:font-bold"
                            :class="{
                              'text-white font-bold bg-white/15':
                                $route.path === link.path,
                            }"
                          >
                            {{ $t(link.label) }}
                          </nuxt-link>
                        </li>
                      </ul>
                    </div>
                  </div>
                </transition>
              </div>
            </template>
          </nav>
        </div>

        <div class="flex justify-start items-center gap-4 md:gap-6">
          <!-- Search -->
          <div
            @click="openSearch"
            class="w-auto h-8 relative items-center opacity-40 rounded-2xl pr-4 hover:opacity-100 transition-opacity duration-300 hidden md:flex cursor-pointer"
            style="border: 0.5px solid rgba(255, 255, 255, 0.4)"
          >
            <span
              class="flex items-center justify-center w-8 h-8 opacity-80 hover:opacity-100 text-white"
            >
              <i class="icon-search text-sm"></i>
            </span>
            <span
              class="hidden lg:inline-block ml-1 text-white text-sm opacity-80"
            >
              {{ $t("common.search") }}
            </span>
            <!-- Input overlay could go here if implementing search -->
          </div>

          <!-- Language -->
          <LanguageSwitcher />

          <!-- Mobile Menu Button -->
          <div class="md:hidden">
            <button
              @click="toggleMobileMenu"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 bg-white/10 hover:text-white hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
            >
              <span class="sr-only">Open main menu</span>
              <!-- Icon when menu is closed. -->
              <svg
                v-if="!mobileMenuOpen"
                class="block h-6 w-6"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
              <!-- Icon when menu is open. -->
              <svg
                v-else
                class="block h-6 w-6"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <transition name="slide-fade">
      <div
        v-if="mobileMenuOpen"
        class="md:hidden bg-slate-800/90"
        id="mobile-menu"
      >
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
          <template v-for="item in menuItems" :key="item.label">
            <!-- Mobile Regular Link -->
            <nuxt-link
              v-if="!item.isDropdown"
              :to="item.path"
              @click="closeMobileMenu"
              class="block px-3 py-2 rounded-md text-base font-medium"
              :class="[
                $route.path === item.path
                  ? 'bg-gray-900 text-white'
                  : 'text-gray-300 hover:bg-gray-700 hover:text-white',
              ]"
            >
              {{ $t(item.label) }}
            </nuxt-link>

            <!-- Mobile Dropdown Section -->
            <div v-else class="mt-2">
              <h3
                class="px-3 pt-2 pb-1 text-sm font-semibold text-gray-400 uppercase tracking-wider"
              >
                {{ $t(item.label) }}
              </h3>
              <div
                v-for="section in item.children"
                :key="section.title"
                class="mt-1"
              >
                <!-- Optional: Section title for mobile? -->
                <!-- <h4 class="px-3 pt-1 text-xs font-medium text-gray-500">{{ $t(section.title) }}</h4> -->
                <nuxt-link
                  v-for="link in section.items"
                  :key="link.path"
                  :to="link.path"
                  @click="closeMobileMenu"
                  class="block pl-6 pr-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
                  :class="{
                    'bg-gray-900 text-white': $route.path === link.path,
                  }"
                >
                  {{ $t(link.label) }}
                </nuxt-link>
              </div>
            </div>
          </template>
        </div>
      </div>
    </transition>
  </header>

  <!-- Search Layer (Moved outside header) -->
  <transition name="search-fade-scale">
    <div
      v-if="isSearchOpen"
      class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md flex items-start justify-center pt-20"
      @click.self="closeSearch"
    >
      <div
        class="bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-lg relative w-full max-w-2xl mx-4 search-modal-content shadow-xl"
      >
        <button
          @click="closeSearch"
          class="absolute top-3 right-3 text-gray-500 hover:text-white hover:bg-white/10 rounded-full p-2 transition-colors"
        >
          <svg
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
        <h2 class="text-white text-xl mb-6">{{ $t("common.search") }}</h2>

        <!-- Input with Icon -->
        <div class="relative mb-6">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <i class="icon-search text-gray-400 text-sm"></i>
          </span>
          <input
            ref="searchInputRef"
            type="text"
            :placeholder="
              $t('common.searchPlaceholder') || 'Enter search term...'
            "
            class="w-full p-3 pl-10 pr-10 rounded bg-slate-700 text-white border border-slate-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
          />
          <!-- Enter Icon -->
          <span
            class="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer group"
          >
            <i
              class="icon-enter text-gray-400 group-hover:text-blue-400 transition-colors"
            ></i>
          </span>
        </div>

        <!-- Search results could go here -->
        <!-- Hot Keywords Section -->
        <div class="mt-6">
          <h3 class="text-gray-400 text-sm mb-3">
            {{ $t("common.hotKeywords") || "热门搜索" }}
          </h3>
          <div class="flex flex-wrap gap-3">
            <button
              v-for="keyword in hotKeywords"
              :key="keyword"
              @click="searchHotKeyword(keyword)"
              class="px-4 py-1.5 bg-slate-700 text-white/80 rounded-full text-sm hover:bg-blue-600 hover:text-white transition-colors duration-200"
            >
              {{ keyword }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

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

/**
 * 页面头部组件
 * 包含导航菜单、语言切换和移动端响应式设计
 */
const { t, locale } = useI18n();
const config = useRuntimeConfig();
// 从运行时配置获取默认语言，如果未配置则默认为 'en'
const defaultLocale = config.public.i18n?.defaultLocale || "en";
const mobileMenuOpen = ref(false);
const isSearchOpen = ref(false);
const searchInputRef = ref<HTMLInputElement | null>(null);
const openDropdown = ref<string | null>(null);
let leaveTimeout: ReturnType<typeof setTimeout> | null = null; // Timeout for mouseleave delay

// 添加热门关键字
const hotKeywords = ref(["SSD", "SD", "DDR4"]);

// 获取产品分类数据
const { data: categoryResponse } = useFetch(`/api/products/category?lang=${locale.value}`, {
  key: `category-${locale.value}`
});
const productCategories = computed(() => {
  if (!categoryResponse.value?.data) return [];
  return categoryResponse.value.data.map((category: any) => ({
    label: category.title,
    path: `/products?category=${category.id}`
  }));
});

// 获取产品用途数据
const { data: usageResponse } = useFetch(`/api/products/usage?lang=${locale.value}`, {
  key: `usage-${locale.value}`
});
const productUsages = computed(() => {
  if (!usageResponse.value?.data) return [];
  return usageResponse.value.data.map((usage: any) => ({
    label: usage.name,
    path: `/products?usage=${usage.id}`
  }));
});

// 使用 computed 来定义 homePath，根据是否为默认语言调整路径
const homePath = computed(() => {
  // 如果是默认语言，路径为根路径 '/'
  // 否则，路径为 '/<locale>/'
  return locale.value === defaultLocale ? "/" : `/${locale.value}/`;
});

// 使用 computed 来定义 menuItems，根据是否为默认语言调整路径
const menuItems = computed(() => {
  // 判断当前是否为默认语言
  const isDefaultLocale = locale.value === defaultLocale;
  // 如果是默认语言，路径前缀为空字符串，否则为 '/<locale>'
  const prefix = isDefaultLocale ? "" : `/${locale.value}`;
  return [
    // 首页路径特殊处理：默认语言为 '/', 其他语言为 '/<locale>/'
    { label: "common.home", path: isDefaultLocale ? "/" : `${prefix}/` },
    {
      label: "common.products",
      isDropdown: true,
      pathPrefix: `${prefix}/products`,
      children: [
        {
          title: "common.productCategories",
          items: productCategories.value.map((category: any) => ({
            ...category,
            path: `${prefix}${category.path}`
          }))
        },
        {
          title: "common.byUsage",
          items: productUsages.value.map((usage: any) => ({
            ...usage,
            path: `${prefix}${usage.path}`
          }))
        },
      ],
    },
    { label: "common.faq", path: `${prefix}/faq` },
    { label: "common.about", path: `${prefix}/about` },
    { label: "common.contact", path: `${prefix}/contact` },
  ];
});

/**
 * 切换移动端菜单显示状态
 */
function toggleMobileMenu() {
  mobileMenuOpen.value = !mobileMenuOpen.value;
}

/**
 * 关闭移动端菜单
 */
function closeMobileMenu() {
  mobileMenuOpen.value = false;
}

/**
 * 打开搜索层
 */
function openSearch() {
  isSearchOpen.value = true;
}

/**
 * 关闭搜索层
 */
function closeSearch() {
  isSearchOpen.value = false;
}

/**
 * 搜索热门关键字 (示例)
 * @param keyword
 */
function searchHotKeyword(keyword: string) {
  console.log("Searching for hot keyword:", keyword);
  // 可以在这里实现填充输入框或直接执行搜索的逻辑
  // 例如: searchInputValue.value = keyword;
  closeSearch(); // 点击后可以关闭搜索层
}

// 监听搜索层状态，打开时自动聚焦输入框
watch(isSearchOpen, (newValue: boolean) => {
  if (newValue) {
    nextTick(() => {
      searchInputRef.value?.focus();
    });
  }
});

// --- Dropdown Logic ---
function handleMouseEnter(label: string) {
  if (leaveTimeout) {
    clearTimeout(leaveTimeout);
    leaveTimeout = null;
  }
  openDropdown.value = label;
}

function handleMouseLeave() {
  // Delay closing the dropdown slightly
  leaveTimeout = setTimeout(() => {
    openDropdown.value = null;
  }, 150); // 150ms delay
}
// --- End Dropdown Logic ---
</script>

<style lang="scss" scoped>
header {
  user-select: none;
}

/* Brand icon hover effect */
.brand-link {
  &:hover {
    .icon-brand {
      transform: scale(1.05);
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    }
  }
}

/* Base style for icon to apply will-change */
.icon-brand {
  will-change: transform, filter; /* Hint for browser optimization */
}

/* Transition for mobile menu */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

/* Transition for dropdown */
.fade-down-enter-active,
.fade-down-leave-active {
  transition: all 0.2s ease-out;
}

.fade-down-enter-from,
.fade-down-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Transition for search overlay */
.search-fade-scale-enter-active,
.search-fade-scale-leave-active {
  transition: opacity 0.3s ease-out;
}

.search-fade-scale-enter-from,
.search-fade-scale-leave-to {
  opacity: 0;
}

/* 为搜索框内容添加独立的、稍延迟的动画 */
.search-modal-content {
  transition: transform 0.3s ease-out 0.05s;
}

.search-fade-scale-enter-from .search-modal-content,
.search-fade-scale-leave-to .search-modal-content {
  transform: scale(0.95) translateY(10px);
}

/* Keep the sticky header consistent */
.sticky {
  position: sticky;
}
</style>