arcticnewone/app/components/home/HomeUpdates.vue

<template>
  <section ref="rootRef" class="relative bg-white min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
    <div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
      <!-- 标题 -->
      <div ref="headerRef" class="text-center mb-16 md:mb-20">
        <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
          {{ t('home.updates.title') }}
        </h2>
        <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
          {{ t('home.updates.subtitle') }}
        </p>
      </div>

      <!-- Bento 网格 -->
      <div class="grid grid-cols-12 gap-4 md:gap-6 auto-rows-[200px]">
        <div
          v-for="(item, index) in updates"
          :key="item.id"
          :ref="el => setCardRef(el, index)"
          class="update-card group relative overflow-hidden rounded-3xl cursor-pointer"
          :class="item.gridClass"
          :style="{ opacity: 0 }"
          @mouseenter="() => handleCardHover(index, true)"
          @mouseleave="() => handleCardHover(index, false)"
        >
          <!-- 背景渐变 -->
          <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110" :class="item.gradient"></div>

          <!-- 内容 -->
          <div class="relative z-10 h-full p-6 md:p-8 flex flex-col justify-between text-white">
            <div>
              <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-sm text-xs md:text-sm font-semibold mb-4">
                <Icon :name="item.categoryIcon" class="w-4 h-4" />
                {{ t(`home.updates.categories.${item.category}`) }}
              </div>

              <h3 class="text-xl md:text-3xl font-bold mb-3 line-clamp-2">
                {{ t(`home.updates.items.${item.id}.title`) }}
              </h3>

              <p v-if="item.showDescription" class="text-white/90 text-sm md:text-base line-clamp-3">
                {{ t(`home.updates.items.${item.id}.description`) }}
              </p>
            </div>

            <div class="flex items-center justify-between">
              <span class="text-xs md:text-sm text-white/80">{{ item.date }}</span>
              <Icon name="ph:arrow-up-right" class="w-5 h-5 md:w-6 md:h-6 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
            </div>
          </div>

          <!-- 悬浮效果 -->
          <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
        </div>
      </div>

      <!-- 查看更多 -->
      <div class="flex justify-center mt-12 md:mt-16">
        <NuxtLink
          to="/news"
          class="inline-flex items-center gap-3 px-8 py-4 rounded-full bg-black text-white font-semibold hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
        >
          {{ t('home.updates.viewAll') }}
          <Icon name="ph:arrow-right" class="w-5 h-5" />
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const { t } = useI18n()

const rootRef = ref<HTMLElement | null>(null)
const headerRef = ref<HTMLElement | null>(null)
const cardElements = ref<(HTMLElement | null)[]>([])
let ctx: gsap.Context | null = null

const setCardRef = (el: any, index: number) => {
  if (el) cardElements.value[index] = el
}

const updates = [
  {
    id: 'project1',
    category: 'project',
    categoryIcon: 'ph:briefcase',
    gradient: 'bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500',
    gridClass: 'col-span-12 md:col-span-6 md:row-span-2',
    showDescription: true,
    date: '2026-06-01'
  },
  {
    id: 'blog1',
    category: 'blog',
    categoryIcon: 'ph:article',
    gradient: 'bg-gradient-to-br from-orange-500 to-red-500',
    gridClass: 'col-span-12 md:col-span-3 md:row-span-1',
    showDescription: false,
    date: '2026-05-28'
  },
  {
    id: 'news1',
    category: 'news',
    categoryIcon: 'ph:newspaper',
    gradient: 'bg-gradient-to-br from-green-500 to-emerald-500',
    gridClass: 'col-span-12 md:col-span-3 md:row-span-1',
    showDescription: false,
    date: '2026-05-25'
  },
  {
    id: 'project2',
    category: 'project',
    categoryIcon: 'ph:briefcase',
    gradient: 'bg-gradient-to-br from-indigo-500 to-blue-500',
    gridClass: 'col-span-12 md:col-span-3 md:row-span-2',
    showDescription: true,
    date: '2026-05-20'
  },
  {
    id: 'blog2',
    category: 'blog',
    categoryIcon: 'ph:article',
    gradient: 'bg-gradient-to-br from-pink-500 to-rose-500',
    gridClass: 'col-span-12 md:col-span-6 md:row-span-1',
    showDescription: false,
    date: '2026-05-15'
  },
  {
    id: 'news2',
    category: 'news',
    categoryIcon: 'ph:newspaper',
    gradient: 'bg-gradient-to-br from-amber-500 to-orange-500',
    gridClass: 'col-span-12 md:col-span-3 md:row-span-1',
    showDescription: false,
    date: '2026-05-10'
  }
]

// 卡片悬浮效果
const handleCardHover = (index: number, isHover: boolean) => {
  const card = cardElements.value[index]
  if (!card) return

  gsap.to(card, {
    y: isHover ? -8 : 0,
    boxShadow: isHover
      ? '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
      : '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
    duration: 0.3,
    ease: 'power2.out'
  })
}

onMounted(async () => {
  await nextTick()
  if (!rootRef.value || !headerRef.value) return

  ctx = gsap.context(() => {
    // 标题动画
    gsap.fromTo(headerRef.value,
      { autoAlpha: 0, y: 50 },
      {
        scrollTrigger: {
          trigger: headerRef.value,
          start: 'top 80%',
          toggleActions: 'play none none reverse'
        },
        autoAlpha: 1,
        y: 0,
        duration: 1,
        ease: 'power3.out'
      }
    )

    // Pin 效果：固定板块，逐行展示卡片
    const totalCards = updates.length
    const timeline = gsap.timeline()

    // 初始隐藏所有卡片
    cardElements.value.forEach((card) => {
      if (!card) return
      gsap.set(card, { autoAlpha: 0, y: 60, scale: 0.9 })
    })

    // 分批展示：每批展示一行（按顺序，每行 2-3 个）
    const batchSize = 3
    const batches = Math.ceil(totalCards / batchSize)

    for (let batch = 0; batch < batches; batch++) {
      timeline.addLabel(`batch-${batch}`)

      const start = batch * batchSize
      const end = Math.min(start + batchSize, totalCards)

      for (let i = start; i < end; i++) {
        if (!cardElements.value[i]) continue

        timeline.to(cardElements.value[i], {
          autoAlpha: 1,
          y: 0,
          scale: 1,
          duration: 0.8,
          ease: 'power3.out',
        }, `batch-${batch}+=${(i - start) * 0.15}`)
      }
    }

    ScrollTrigger.create({
      trigger: rootRef.value,
      start: 'top top',
      end: () => `+=${batches * window.innerHeight}`,
      pin: true,
      scrub: true,
      anticipatePin: 1,
      animation: timeline,
    })
  }, rootRef.value)
})

onUnmounted(() => {
  ctx?.revert()
})
</script>

<style scoped>
.update-card {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  will-change: transform, box-shadow, opacity;
}
</style>