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

<template>
  <div class="bg-gray-50">
    <!-- 页头：科技蓝渐变色块 -->
    <section class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-blue-500">
      <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-2xl shadow-sm border border-gray-100 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-gray-100">
                  <span class="w-1.5 h-6 rounded-full bg-blue-600" />
                  <h2 class="text-xl sm:text-2xl font-bold text-gray-900">{{ pageTitle }}</h2>
                  <span v-if="updateTimeText" class="sm:ml-auto text-sm text-gray-500">
                    更新于 {{ 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-gray-300 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-gray-900 font-medium mb-2">{{ emptyState.title }}</p>
                <p class="text-gray-500 text-sm leading-relaxed mb-6">{{ emptyState.desc }}</p>
                <NuxtLink to="/" class="text-blue-600 hover:underline">返回首页</NuxtLink>
              </div>
            </div>
          </div>

          <!-- 底部 CTA -->
          <div class="mt-10 rounded-2xl border border-blue-100 bg-blue-50 p-8 sm:p-10 text-center">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3">想进一步了解我们？</h3>
            <p class="text-gray-600 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-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 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-blue-600 text-blue-600 font-semibold rounded-lg hover:bg-blue-100 transition-colors"
              >
                {{ siteInfo.phone }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
/**
 * 模板 7 - 关于我们（科技蓝）
 *
 * 数据源：后台「单页管理」cms_page 表中 path=about 的记录。
 * 链路：useFetch('/api/page/detail', { path: 'about' })
 *       → server/api/page/detail.get.ts 的 path 分支
 *       → 上游 /cms/cms-page/getByPath/about（带 TenantId）
 */
import dayjs from 'dayjs'
import type { PageDetail } from '~/types'

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

await fetchSiteInfo()

const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
  key: 'page-about',
  query: { path: 'about' }
})

const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')
const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))
const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))

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 的页面正文。'
  }
})

usePageSeo(
  {
    title: pageTitle.value,
    path: '/about',
    keywords: pageData.value?.keywords || undefined,
    description: pageData.value?.description || undefined,
    image: coverImage.value || undefined
  },
  siteInfo.value
)
</script>