hanye-website/components/TheFooter.vue

<template>
  <footer
    class="text-white py-8 w-full relative bg-stone-950 border-t border-zinc-800 overflow-hidden"
  >
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10">
      <div
        class="grid grid-cols-1 md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-4 gap-8 lg:py-14"
      >
        <!-- Logo & 描述 -->
        <div
          class="flex flex-col lg:items-start :lg:justify-start sm:items-center text-center lg:text-left col-span-2 lg:col-span-1"
        >
          <h3 class="mb-4">
            <i class="icon-brand text-white text-2xl"></i>
          </h3>
          <LanguageSwitcher class="mb-8 hidden lg:block" />
          <p class="text-white opacity-60 text-xs">
            &copy; {{ new Date().getFullYear() }} Hanye. All rights reserved.
          </p>
        </div>

        <!-- 产品分类链接 -->
        <div class="hidden lg:block">
          <h3
            class="w-36 justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ $t("common.footer.productsLinks.title") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuProductsItems" :key="item.path">
              <NuxtLink
                :to="item.path"
                class="text-zinc-500 text-sm font-normal hover:text-white transition"
              >
                {{ $t(item.label) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        <!-- 网站快捷链接 -->
        <div class="hidden lg:block">
          <h3
            class="w-36 justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ $t("common.footer.websiteLinks.title") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuWebsiteItems" :key="item.path">
              <NuxtLink
                :to="item.path"
                class="text-zinc-500 text-sm font-normal hover:text-white transition"
              >
                {{ $t(item.label) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        <!-- 网站快捷链接 -->
        <div class="hidden lg:block">
          <h3
            class="w-36 justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ $t("common.footer.quickLinks.title") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuHomeItems" :key="item.path">
              <NuxtLink
                :to="item.path"
                class="text-zinc-500 text-sm font-normal hover:text-white transition"
              >
                {{ $t(item.label) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
/**
 * 页脚组件
 * 包含网站导航、联系信息和版权信息
 */
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const config = useRuntimeConfig();
const defaultLocale = config.public.i18n?.defaultLocale || "en";

// 获取产品分类数据
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;
});

// 导航菜单项
const menuProductsItems = computed(() => {
  // 构建路径前缀
  const prefix = locale.value === defaultLocale ? "" : `/${locale.value}`;
  
  // 使用API获取的产品分类数据
  return productCategories.value.map((category: any) => ({
    label: category.title,
    path: `${prefix}/products?category=${category.id}`
  }));
});

const menuWebsiteItems = computed(() => [
  {
    label: "common.footer.websiteLinks.home",
    path: locale.value === defaultLocale ? "/" : `/${locale.value}`,
  },
  {
    label: "common.footer.websiteLinks.products",
    path:
      locale.value === defaultLocale
        ? "/products"
        : `/${locale.value}/products`,
  },
  {
    label: "common.footer.websiteLinks.faq",
    path: locale.value === defaultLocale ? "/faq" : `/${locale.value}/faq`,
  },
  {
    label: "common.footer.websiteLinks.about",
    path: locale.value === defaultLocale ? "/about" : `/${locale.value}/about`,
  },
  {
    label: "common.footer.websiteLinks.contact",
    path:
      locale.value === defaultLocale ? "/contact" : `/${locale.value}/contact`,
  },
]);

const menuHomeItems = computed(() => [
  // 这里可以根据需要添加首页快捷链接
  {
    label: "common.footer.quickLinks.support",
    path: locale.value === defaultLocale ? "/support" : `/${locale.value}/support`,
  },
  {
    label: "common.footer.quickLinks.privacy",
    path: locale.value === defaultLocale ? "/privacy" : `/${locale.value}/privacy`,
  },
  {
    label: "common.footer.quickLinks.terms",
    path: locale.value === defaultLocale ? "/terms" : `/${locale.value}/terms`,
  }
]);
</script>