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

<template>
  <div>
    <HeroSection />
    <FeatureSection />

    <!-- 关于我们 -->
    <AboutSection
      title-color="text-gray-900"
      accent-color="var(--t2-primary)"
      summary-color="text-gray-600"
      link-color="text-[var(--t2-primary)]"
      container-class="container mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center"
      image-bg-color="bg-gray-100"
    />

    <!-- 最新动态 -->
    <section v-if="latestArticles.length > 0" class="py-16 lg:py-20 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4" data-reveal>最新动态</h2>
          <p class="text-gray-600 max-w-2xl mx-auto" data-reveal data-reveal-delay="100">了解企业最新资讯与行业动态</p>
        </div>
        <div class="grid md:grid-cols-3 gap-6">
          <article
            v-for="(item, index) in latestArticles"
            :key="item.id || item.articleId"
            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow anim-card"
            data-reveal
            :data-reveal-delay="index * 100"
          >
            <NuxtLink :to="`/article/${item.id || item.articleId}`">
              <div class="aspect-video bg-gray-100 flex items-center justify-center anim-card-media">
                <img
                  v-if="item.image || item.cover || item.photo"
                  :src="fileUrl(item.image || item.cover || item.photo || '')"
                  :alt="item.title"
                  class="w-full h-full object-cover"
                >
                <span v-else class="text-gray-400">暂无图片</span>
              </div>
            </NuxtLink>
            <div class="p-5">
              <div class="text-xs text-gray-500 mb-2">
                {{ formatDate(item.publishTime) }}
                <span v-if="item.categoryName" class="ml-2 text-[var(--t2-primary)]">{{ item.categoryName }}</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-[var(--t2-primary)] transition-colors">
                <NuxtLink :to="`/article/${item.id || item.articleId}`">{{ item.title }}</NuxtLink>
              </h3>
              <p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
            </div>
          </article>
        </div>
        <div v-if="newsNav" class="text-center mt-10">
          <NuxtLink
            :to="newsNav.path || '/news'"
            class="inline-flex items-center text-[var(--t2-primary)] font-semibold hover:text-[var(--t2-primary-dark)] transition-colors"
          >
            查看更多
            <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-16 lg:py-20 bg-[var(--t2-primary-light)]">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4" data-reveal>
          准备好开始了吗？
        </h2>
        <p class="text-gray-600 max-w-2xl mx-auto mb-8" data-reveal data-reveal-delay="100">
          立即联系我们，获取专属企业官网解决方案
        </p>
        <button
          type="button"
          class="inline-flex items-center justify-center px-8 py-3 bg-[var(--t2-primary)] text-white font-semibold rounded-lg hover:bg-[var(--t2-primary-dark)] transition-colors anim-shimmer"
          @click="openConsult()"
        >
          立即咨询
        </button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
/**
 * 模板 1 - 首页
 * 使用 getSiteInfo 站点信息 + cms-article/page 文章数据
 */
import dayjs from 'dayjs'
import HeroSection from '../components/HeroSection.vue'
import FeatureSection from '../components/FeatureSection.vue'
import type { CmsNavigation, Article, PageResult, ApiEnvelope } from '~/types'

const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
const { openConsult } = useConsult()

// 获取站点信息（含导航）
await fetchSiteInfo()

/** 从导航中找到"新闻/动态"相关的导航项 */
const newsNav = computed<CmsNavigation | undefined>(() => {
  const navs = navigations.value || []
  return navs.find((n) => n.model === 'article')
})

/** 获取最新文章（取新闻导航下的文章） */
const latestArticles = ref<Article[]>([])

if (newsNav.value) {
  try {
    const res = await $fetch<ApiEnvelope<PageResult<Article>> | PageResult<Article>>(
      '/api/article/list',
      {
        query: {
          navigationId: newsNav.value.navigationId,
          page: 1,
          limit: 3
        }
      }
    )
    const envelope = res as ApiEnvelope<PageResult<Article>>
    latestArticles.value = envelope?.data?.list || (res as PageResult<Article>)?.list || []
  } catch {
    latestArticles.value = []
  }
}

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