hjc-web/app/templates/template-10/components/HeroSection.vue

<template>
  <section class="relative overflow-hidden bg-[#050B1F]">
    <!-- 背景图 -->
    <div class="absolute inset-0">
      <img
        v-if="bannerMode && banners.length"
        :src="bannerImg(banners[currentBannerIndex])"
        :alt="banners[currentBannerIndex]?.title || siteName"
        class="w-full h-full object-cover"
      >
      <img
        v-else
        src="/images/template-10/hero-bg.jpg"
        alt=""
        class="w-full h-full object-cover"
      >
      <div class="absolute inset-0 bg-gradient-to-r from-[#050B1F]/85 via-[#050B1F]/50 to-transparent" />
    </div>

    <!-- 内容 -->
    <div class="t10-container relative z-10 py-20 lg:py-28">
      <div class="max-w-2xl">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight mb-5">
          {{ heroTitle }}
        </h1>
        <p class="text-base lg:text-lg text-white/85 leading-relaxed mb-8 max-w-xl">
          {{ heroSubtitle }}
        </p>
        <div class="flex flex-wrap gap-4">
          <NuxtLink v-if="productNav" :to="getNavLink(productNav)" class="t10-btn-primary">
            了解产品
          </NuxtLink>
          <NuxtLink v-if="contactNav" :to="getNavLink(contactNav)" class="t10-btn-outline border-white text-white hover:bg-white hover:text-[var(--t10-primary)]">
            联系我们
          </NuxtLink>
        </div>
      </div>
    </div>

    <!-- 指示点 -->
    <div v-if="bannerMode && banners.length > 1" class="absolute bottom-5 left-0 right-0 flex items-center justify-center gap-2 z-20">
      <button
        v-for="(b, i) in banners"
        :key="'dot-' + (b.id || i)"
        type="button"
        :aria-label="'切换到第 ' + (i + 1) + ' 张'"
        class="w-2.5 h-2.5 rounded-full transition"
        :class="i === currentBannerIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/70'"
        @click="goTo(i)"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
/**
 * 模板 10 - Hero 主视觉区（创芯存储科技蓝风格）
 * 全宽科技背景 + 左对齐大标题 + CTA 按钮
 */
import type { CmsBanner, CmsNavigation, ApiEnvelope, PageResult } from '~/types'
import { ensureFullUrl } from '~/utils/image'

const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()

const { data: bannerRes } = await useFetch<ApiEnvelope<PageResult<CmsBanner>> | PageResult<CmsBanner>>('/api/banner', {
  query: { position: 'home_slider' }
})

const banners = computed<CmsBanner[]>(() => {
  const d = bannerRes.value as (ApiEnvelope<PageResult<CmsBanner>> | PageResult<CmsBanner>) | null
  if (!d) return []
  const list = ((d as ApiEnvelope<PageResult<CmsBanner>>)?.data?.list
    ?? (d as PageResult<CmsBanner>)?.list
    ?? []) as CmsBanner[]
  return list
    .filter((b) => hasImage(b) && b.deleted !== 1 && b.status !== 2)
    .sort((a, b) => (a.sortNum ?? 0) - (b.sortNum ?? 0))
})

const bannerMode = computed(() => banners.value.length > 0)
const currentBannerIndex = ref(0)
let bannerTimer: ReturnType<typeof setInterval> | null = null

function startAuto() {
  if (banners.value.length > 1) {
    bannerTimer = setInterval(() => {
      currentBannerIndex.value = (currentBannerIndex.value + 1) % banners.value.length
    }, 5000)
  }
}
function stopAuto() {
  if (bannerTimer) { clearInterval(bannerTimer); bannerTimer = null }
}
onMounted(() => { startAuto() })
onBeforeUnmount(() => { stopAuto() })
function goTo(i: number) {
  currentBannerIndex.value = i
}

function bannerImg(b: CmsBanner): string {
  const raw = ensureFullUrl(b.image || b.imageUrl || b.pic || b.url || '')
  return raw.replace(/resize,w_\d+/, 'resize,w_1600')
}

function hasImage(b: CmsBanner): boolean {
  return !!(b.image || b.imageUrl || b.pic || b.url)
}

const heroTitle = computed(() => siteInfo.value?.slogan || '专注嵌入式存储解决方案')
const heroSubtitle = computed(() => siteInfo.value?.comments || '为工控、物联网、消费电子、安防设备提供稳定可靠的存储配套，助力智能终端高效运行。')

const productNav = computed<CmsNavigation | undefined>(() => (navigations.value || []).find((n) => n.model === 'product'))
const contactNav = computed<CmsNavigation | undefined>(() => (navigations.value || []).find((n) => n.model === 'contact' || n.title.includes('联系')))
</script>