hanye-website/pages/privacy.vue

<template>
  <div class="min-h-screen bg-stone-950">
    <div class="w-full h-[45px] sm:h-[55px] md:h-[65px] lg:h-[72px]"></div>
    <!-- 面包屑导航 -->
    <div class="max-w-screen-2xl mx-auto px-4 pt-8">
      <nav class="flex items-center space-x-2 text-sm text-zinc-400">
        <NuxtLink :to="homepagePath" class="hover:text-white transition">{{
          t("common.breadcrumb.home")
        }}</NuxtLink>
        <span class="text-zinc-600">/</span>
        <span class="text-white">{{ t("common.breadcrumb.privacy") }}</span>
      </nav>
    </div>

    <!-- 主要内容 -->
    <div class="max-w-screen-2xl mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h1 class="text-4xl font-bold text-white mb-4">
          {{ t("common.privacy.title") }}
        </h1>
        <p class="text-zinc-400">{{ t("common.privacy.description") }}</p>
      </div>

      <!-- 内容区域 -->
      <div class="bg-stone-900 rounded-lg p-8 shadow-lg">
        <div class="prose prose-invert max-w-none">
          <ContentRenderer v-if="page" :value="page" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 隐私政策页面
 * 展示网站的隐私政策内容
 */
const { t, locale } = useI18n();

const homepagePath = computed(() => {
  return locale.value === "zh" ? "/" : `/${locale.value}`;
});

// 计算内容路径
const contentPath = computed(() => {
  return `/${locale.value}/privacy`;
});

const { data: page } = await useAsyncData(contentPath.value, () => {
  return queryCollection("content").path(contentPath.value).first();
});

// 设置页面元数据
useHead({
  title: t("common.meta.privacy.title"),
  meta: [
    {
      name: "description",
      content: t("common.meta.privacy.description"),
    },
  ],
});
</script>