hjc-web/app/templates/template-09/pages/About.vue

<template>
  <div class="bg-white">
    <!-- 页头：墨绿渐变色块（不使用单页配图作背景） -->
    <section
      class="relative overflow-hidden"
      style="background-image: linear-gradient(120deg, #008960 0%, #00a878 100%)"
    >
      <div class="absolute -top-20 -right-16 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
      <div class="absolute -bottom-24 left-10 w-64 h-64 rounded-full bg-black/10 blur-3xl" />
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 relative z-10">
        <nav class="text-xs text-white/70 mb-3" aria-label="面包屑">
          <NuxtLink to="/" class="hover:text-white transition-colors">首页</NuxtLink>
          <span class="mx-2">/</span>
          <span class="text-white">{{ pageTitle }}</span>
        </nav>
        <h1 class="text-3xl sm:text-4xl font-bold text-white">{{ pageTitle }}</h1>
        <p v-if="subTitle" class="text-white/75 mt-3 max-w-2xl leading-relaxed line-clamp-2">
          {{ subTitle }}
        </p>
      </div>
    </section>

    <!-- 正文 -->
    <section class="py-12 lg:py-16">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
          <div class="bg-white rounded-none shadow-sm border border-[var(--t9-border)] overflow-hidden">
            <!-- 单页配图（cms_page.image）：作为正文顶部插图 -->
            <img
              v-if="coverImage"
              :src="coverImage"
              :alt="pageTitle"
              class="w-full h-56 sm:h-72 lg:h-80 object-cover"
            >

            <div class="p-6 sm:p-10">
              <template v-if="hasContent">
                <div class="flex flex-wrap items-center gap-3 mb-6 pb-6 border-b border-[var(--t9-border)]">
                  <span class="w-1.5 h-6 rounded-full bg-[var(--t9-primary)]" />
                  <h2 class="text-xl sm:text-2xl font-bold text-[var(--t9-text)]">{{ pageTitle }}</h2>
                  <span v-if="updateTimeText" class="sm:ml-auto text-sm text-[var(--t9-text-secondary)]">
                    更新于 {{ updateTimeText }}
                  </span>
                </div>
                <RichText :content="pageData?.content" />
                <PageAttachments
                  v-if="pageData?.attachments?.length"
                  :attachments="pageData.attachments"
                />
              </template>

              <!-- 空态 / 错误态 -->
              <div v-else class="text-center py-16">
                <svg class="w-16 h-16 mx-auto text-[var(--t9-muted-light)] mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                </svg>
                <p class="text-[var(--t9-text)] font-medium mb-2">{{ emptyState.title }}</p>
                <p class="text-[var(--t9-muted-2)] text-sm leading-relaxed mb-6">{{ emptyState.desc }}</p>
                <NuxtLink to="/" class="text-[var(--t9-primary)] hover:underline">返回首页</NuxtLink>
              </div>
            </div>
          </div>

          <!-- 底部 CTA -->
          <div class="mt-10 rounded-none border border-[var(--t9-border)] bg-[var(--t9-primary-faint)] p-8 sm:p-10 text-center">
            <h3 class="text-xl sm:text-2xl font-bold text-[var(--t9-text)] mb-3">想进一步了解我们？</h3>
            <p class="text-[var(--t9-text-secondary)] mb-6">
              欢迎来电咨询或在线留言，我们将安排专业顾问与您对接
            </p>
            <div class="flex flex-wrap items-center justify-center gap-4">
              <NuxtLink
                to="/contact"
                class="inline-flex items-center px-6 py-3 bg-[var(--t9-primary)] text-white font-semibold rounded-sm hover:bg-[var(--t9-primary-dark)] transition-colors shadow-sm"
              >
                联系我们
              </NuxtLink>
              <a
                v-if="siteInfo?.phone"
                :href="`tel:${siteInfo.phone}`"
                class="inline-flex items-center px-6 py-3 border border-[var(--t9-primary)] text-[var(--t9-primary)] font-semibold rounded-sm hover:bg-[var(--t9-primary-soft)] transition-colors"
              >
                {{ siteInfo.phone }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
/**
 * 模板 9 - 关于我们（墨绿文化出版风）
 *
 * 数据源：后台「单页管理」cms_page 表中 path=about 的记录。
 * 链路：useFetch('/api/page/detail', { path: 'about' })
 *       → server/api/page/detail.get.ts 的 path 分支
 *       → 上游 /cms/cms-page/getByPath/about（带 TenantId）
 *
 * 内容全部由后台维护：title / content（富文本）/ image（正文顶部插图）
 * / keywords / description（SEO）。后台未录入时展示空态引导。
 */
import dayjs from 'dayjs'
import type { PageDetail } from '~/types'

const { siteInfo, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()

await fetchSiteInfo()

/** 单页详情：静态 key + 静态 query，保证 SSR 直出 */
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
  key: 'page-about',
  query: { path: 'about' }
})

const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')

/** 正文顶部插图（cms_page.image） */
const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))

/** 正文是否可渲染 */
const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))

/** 页头副标题：优先单页 SEO 描述，其次站点简介 */
const subTitle = computed(() => {
  const desc = pageData.value?.description?.trim()
  if (desc) return desc
  return (siteInfo.value?.comments || '').trim()
})

const updateTimeText = computed(() => {
  const t = pageData.value?.updateTime
  return t ? dayjs(t).format('YYYY-MM-DD') : ''
})

/** 空内容兜底文案，区分「未录入」与「接口异常」 */
const emptyState = computed(() => {
  if (pageData.value?.status === 'error') {
    return { title: '内容暂时无法加载', desc: '内容接口暂时不可用，请稍后再试。' }
  }
  return {
    title: '内容尚未录入',
    desc: '请前往管理后台「单页管理」补充 path 为 about 的页面正文。'
  }
})

/** 用单页的 TDK 覆盖外层路由壳的默认 SEO（字段为空时自动回落站点信息） */
usePageSeo(
  {
    title: pageTitle.value,
    path: '/about',
    keywords: pageData.value?.keywords || undefined,
    description: pageData.value?.description || undefined,
    image: coverImage.value || undefined
  },
  siteInfo.value
)
</script>