hanye-website/pages/terms.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.terms") }}</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.terms.title") }}
        </h1>
        <p class="text-zinc-400">{{ t("common.terms.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">
/**
 * 利用規約ページ
 * ウェブサイトの利用規約を表示
 */
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

const { t, locale } = useI18n()

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

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

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

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