hjc-web/app/templates/template-03/pages/Page.vue

<template>
  <div class="min-h-[60vh] flex items-center py-20 bg-[#faf6ef]">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 顶部：栏目标题 + 自身内容 -->
      <div v-if="pageTitle" class="max-w-4xl mx-auto">
        <div class="text-center mb-10">
          <h1 class="text-3xl sm:text-4xl font-bold text-[#4a3f35] mb-4">
            {{ pageTitle }}
          </h1>
          <div class="w-16 h-1 bg-[#8b6f47] rounded-full mx-auto" />
        </div>
        <div v-if="pageData && pageData.hasContent">
          <div v-if="pageData.updateTime" class="text-[#8a7d6b] text-sm text-center mb-10">
            更新时间：{{ formatDate(pageData.updateTime) }}
          </div>
          <RichText :content="pageData.content" />
        </div>
        <PageAttachments
          v-if="pageData?.attachments?.length"
          :attachments="pageData.attachments"
        />
      </div>

      <!-- 子栏目聚合列表 -->
      <div v-if="childCards.length" class="max-w-5xl mx-auto mt-16">
        <h2 class="text-2xl font-bold text-[#4a3f35] mb-8 text-center">子栏目</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <NuxtLink
            v-for="p in childCards"
            :key="p.navigationId"
            :to="`/page/${p.navigationId}`"
            class="block p-6 rounded-xl border border-[#e8dfd0] hover:shadow-lg hover:border-[#8b6f47] transition"
          >
            <h3 class="text-lg font-semibold text-[#4a3f35] mb-2">{{ p.title }}</h3>
            <p class="text-sm text-[#8a7d6b] leading-relaxed line-clamp-3">{{ excerpt(p.content) }}</p>
          </NuxtLink>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!pageData?.hasContent && !childCards.length" class="text-center py-20">
        <h1 class="text-2xl font-bold text-[#4a3f35] mb-4">{{ pageTitle }}</h1>
        <p class="text-[#8a7d6b] mb-2">{{ emptyState.title }}</p>
        <p class="text-[#a99b88] text-sm mb-6 leading-relaxed">
          {{ emptyState.desc }}<br />
          当前导航：{{ currentNav?.title || pageTitle }}（ID：{{ navigationId }}）
        </p>
        <NuxtLink to="/" class="text-[#8b6f47] hover:underline">返回首页</NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 模板 3 - 通用 CMS 页面（暖米轻商风）
 * 支持两种入口：
 *   1. /page/:navigationId → CMS 导航路径（优先）
 *   2. /:slug → 传统路径
 *
 * 父栏目聚合：当当前 page 栏目拥有子栏目时，递归收集其下所有子栏目的单页，
 * 以卡片列表形式聚合展示（每个子页卡片链接到 /page/{childNavId} 详情页）。
 */
import dayjs from 'dayjs'
import type { CmsNavigation, PageDetail } from '~/types'
import { collectDescendantNavIds, isParentNavigation } from '~/utils/nav-tree'

interface ChildPage {
  pageId?: number
  title?: string
  path?: string
  content?: string
  navigationId?: number
  image?: string | null
}

const route = useRoute()
const { allNavigations, fetchSiteInfo } = useSite()

await fetchSiteInfo()

/** 从路由获取 navigationId */
const navigationId = computed(() => {
  const id = route.params.id as string
  if (id) {
    const num = Number(id)
    if (!Number.isNaN(num)) return num
  }
  return undefined
})

/** 当前栏目是否为父栏目（拥有子栏目） */
const hasChildren = computed(() => isParentNavigation(navigationId.value, allNavigations.value || []))

/** 递归收集当前栏目自身 + 所有后代 navigationId */
const descendantNavIds = computed(() =>
  collectDescendantNavIds(navigationId.value, allNavigations.value || [])
)

/** 从导航中查找当前页面信息（使用 allNavigations，已做标题映射） */
const currentNav = computed<CmsNavigation | undefined>(() => {
  if (!navigationId.value) return undefined
  const findNav = (items: CmsNavigation[]): CmsNavigation | undefined => {
    for (const item of items) {
      if (item.navigationId === navigationId.value) return item
      if (item.children?.length) {
        const found = findNav(item.children)
        if (found) return found
      }
    }
    return undefined
  }
  return findNav(allNavigations.value)
})

/** 获取页面内容 */
const navId = navigationId.value
const pagePath = (() => {
  const num = Number(route.params.id)
  return Number.isNaN(num) ? (route.params.id as string) : undefined
})()
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
  key: `page-${navId ?? pagePath ?? 'default'}`,
  query: { navigationId: navId, path: pagePath }
})

/** 父栏目聚合：取其下所有子栏目的单页（不含父栏目自身，避免与顶部内容重复） */
const childPages = ref<ChildPage[]>([])
if (hasChildren.value && descendantNavIds.value.length) {
  const { data: childrenData } = await useFetch<{ list: ChildPage[]; count: number }>('/api/page/children', {
    key: `page-children-${navId}`,
    query: { navigationIds: descendantNavIds.value.join(',') }
  })
  childPages.value = childrenData.value?.list || []
}
const childCards = computed(() => childPages.value.filter(p => p.navigationId !== navId))

const pageTitle = computed(() => {
  return pageData.value?.title || currentNav.value?.title || '页面'
})

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

/** 富文本正文截取纯文本摘要 */
function excerpt(html?: string, len = 80) {
  if (!html) return ''
  const text = (html || '')
    .replace(/<[^>]+>/g, '')
    .replace(/&nbsp;/g, ' ')
    .replace(/\s+/g, ' ')
    .trim()
  return text.length > len ? text.slice(0, len) + '…' : text
}

function formatDate(date?: string) {
  if (!date) return ''
  return dayjs(date).format('YYYY-MM-DD')
}
</script>