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

<template>
  <div class="min-h-screen bg-white pb-16">
    <div class="t9-container">
      <h1 class="t9-section-title">{{ pageTitle }}</h1>

      <div v-if="pending" class="flex justify-center py-12">
        <SiteLoading />
      </div>
      <SiteError v-else-if="error" message="获取列表失败" />

      <!-- 图书封面墙（对齐原站「作品集」板块，5 列书籍封面） -->
      <div v-else class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-5 lg:gap-6">
        <NuxtLink
          v-for="item in cases"
          :key="item.id"
          :to="`/case/${item.id}`"
          class="group"
        >
          <div class="w-full aspect-[19/23] overflow-hidden bg-[var(--t9-bg-gray)]">
            <img
              :src="itemImage(item)"
              :alt="item.title"
              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
              loading="lazy"
              @error="onImgError"
            >
          </div>
          <p
            class="mt-2.5 text-sm text-center leading-snug t9-clamp-2 transition-colors group-hover:text-[var(--t9-primary)]"
            style="color: var(--t9-muted-2)"
          >{{ item.title }}</p>
        </NuxtLink>
      </div>

      <!-- 空状态 -->
      <div v-if="!pending && !error && cases.length === 0" class="text-center py-20">
        <svg class="w-16 h-16 mx-auto mb-4" style="color: var(--t9-muted-light)" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
        <p style="color: var(--t9-text-secondary)">暂无内容</p>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="flex justify-center mt-12">
        <nav class="flex items-center gap-1.5 flex-wrap justify-center">
          <button
            v-for="p in totalPages"
            :key="p"
            class="min-w-[36px] h-9 px-2 text-sm border transition-colors"
            :style="p === currentPage
              ? 'background-color: var(--t9-primary); border-color: var(--t9-primary); color: #fff'
              : 'background-color: #fff; border-color: var(--t9-border); color: var(--t9-text)'"
            @click="currentPage = p"
          >
            {{ p }}
          </button>
        </nav>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CaseItem, PageResult } from '~/types'
import { collectDescendantNavIds } from '~/utils/nav-tree'
import { getCompressedImageUrl } from '~/utils/image'

/**
 * 模板 9 - 案例列表页（墨绿文化出版风）
 */
const route = useRoute()
const { allNavigations, fetchSiteInfo } = useSite()

// 确保导航数据已加载（用于栏目标题与分类判定）
await fetchSiteInfo()

// 列表（栏目）入口 /case/{navigationId} 时按分类过滤；/case 根目录展示全部案例
const navigationId = computed<number | undefined>(() => {
  const id = route.params.id
  return id ? Number(id) : undefined
})

// 聚合：父栏目访问时递归收集自身 + 所有后代栏目 navigationId，交给后端 IN 查询
const categoryIds = computed<string | undefined>(() => {
  const ids = collectDescendantNavIds(navigationId.value, allNavigations.value || [])
  return ids.length ? ids.join(',') : undefined
})

const currentPage = ref(1)
const limit = 12

const { data, pending, error } = await useFetch<PageResult<CaseItem>>('/api/case/list', {
  key: `case-list-${categoryIds.value ?? navigationId.value ?? 'all'}-p${currentPage.value}`,
  query: {
    page: currentPage,
    limit,
    ...(categoryIds.value
      ? { categoryIds: categoryIds.value }
      : (navigationId.value ? { navigationId: navigationId.value } : {}))
  },
  watch: [currentPage, categoryIds, navigationId]
})

const cases = computed(() => data.value?.list || [])

const totalCount = computed(() => data.value?.count ?? 0)
const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / limit)))

// 切换栏目时回到第 1 页
watch([categoryIds, navigationId], () => {
  currentPage.value = 1
})

// 栏目标题：命中导航取导航标题，否则用模块默认名
const pageTitle = computed(() => {
  const id = navigationId.value
  if (id == null) return '图书速递'
  const navs = (allNavigations.value || []) as any[]
  const find = (items: any[]): any => {
    for (const it of items) {
      if (it.navigationId === id) return it
      if (it.children?.length) {
        const f = find(it.children)
        if (f) return f
      }
    }
    return undefined
  }
  return find(navs)?.title || '图书速递'
})

/** 封面图：兼容 cover / image / photo / images[0] */
const FALLBACK_IMAGE = '/images/template-09/news-default.jpg'
function itemImage(item: CaseItem): string {
  const anyItem = item as Record<string, unknown>
  const raw = (anyItem.cover || anyItem.image || anyItem.photo
    || (Array.isArray(anyItem.images) ? (anyItem.images as string[])[0] : '')) as string
  return raw ? getCompressedImageUrl(raw, { width: 800 }) : FALLBACK_IMAGE
}
function onImgError(e: Event) {
  const el = e.target as HTMLImageElement
  if (el && !el.src.endsWith(FALLBACK_IMAGE)) el.src = FALLBACK_IMAGE
}

</script>