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="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="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="justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ t("common.footer.legalAndSupport.title") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuLegalAndSupportItems" :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, t } = useI18n();
const config = useRuntimeConfig();
const defaultLocale = config.public.i18n?.defaultLocale || "zh";

// 获取产品分类数据
const { data: categoryResponse } = await useAsyncData(
  `footer-categories-${locale.value}`,
  async () => {
    try {
      // 使用queryCollection从content目录获取数据
      const content = await queryCollection("content")
        .where("path", "LIKE", `/categories/${locale.value}/%`)
        .all();

      if (!content || !Array.isArray(content)) {
        console.log("No category content found for footer");
        return [];
      }

      // 转换为需要的格式
      return content
        .map((item: any) => {
          // 从路径中提取ID - 文件名就是ID
          const pathParts = item.path?.split("/");
          const idFile = pathParts?.[pathParts.length - 1] || "";
          // 如果ID在元数据中有提供，优先使用元数据中的ID
          const id = item.id
            ? parseInt(item.id)
            : parseInt(idFile.replace(".md", "")) || 0;

          return {
            title: item.title || "",
            id: id,
          };
        })
        .sort((a, b) => (a.id || 0) - (b.id || 0));
    } catch (error) {
      console.error("Error loading category data for footer:", error);
      return [];
    }
  }
);

// 使用计算属性处理产品分类数据
const productCategories = computed(() => {
  return categoryResponse.value || [];
});

// 导航菜单项
const menuProductsItems = computed(() => {
  // 构建路径前缀
  const prefix = locale.value === defaultLocale ? "" : `/${locale.value}`;

  // 使用修改后的产品分类数据
  return productCategories.value.map((category: any) => ({
    label: category.title,
    path: `${prefix}/products?category=${encodeURIComponent(category.title)}`,
  }));
});

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 menuLegalAndSupportItems = computed(() => [
  {
    label: "common.footer.legalAndSupport.support",
    path:
      locale.value === defaultLocale ? "/support" : `/${locale.value}/support`,
  },
  {
    label: "common.footer.legalAndSupport.privacy",
    path:
      locale.value === defaultLocale ? "/privacy" : `/${locale.value}/privacy`,
  },
  {
    label: "common.footer.legalAndSupport.terms",
    path: locale.value === defaultLocale ? "/terms" : `/${locale.value}/terms`,
  },
]);
</script>