arcticnewone/app/pages/news.vue

<template>
  <main class="page-container min-h-screen pt-32 pb-20 px-4 md:px-8 mx-auto max-w-[1200px]">
    <div
      ref="headerWrapRef"
      class="flex flex-col items-center justify-center text-center mb-10 md:mb-16"
      style="opacity: 0; visibility: hidden;"
    >
      <h1 ref="titleRef" class="text-3xl md:text-5xl font-bold mb-4 md:mb-6 tracking-tight text-black">{{ t('news.title') }}</h1>
      <p ref="descRef" class="text-base md:text-lg text-gray-600 max-w-2xl">{{ t('news.description') }}</p>
    </div>

    <div
      ref="filterWrapRef"
      class="flex justify-center gap-3 md:gap-4 mb-10 md:mb-14 flex-wrap"
      style="opacity: 0; visibility: hidden;"
    >
      <button
        v-for="category in categories"
        :key="category"
        @click="activeCategory = category"
        class="px-5 md:px-6 py-2 md:py-2.5 rounded-full text-sm md:text-base font-semibold transition-all duration-300"
        :class="activeCategory === category
          ? 'bg-black text-white shadow-lg'
          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
      >
        {{ t(`news.categories.${category}`) }}
      </button>
    </div>

    <div
      ref="articlesWrapRef"
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
      style="opacity: 0; visibility: hidden;"
    >
      <article
        v-for="article in filteredNewsData"
        :key="article.id"
        class="news-card group relative flex flex-col rounded-2xl md:rounded-3xl overflow-hidden bg-white border border-gray-100 hover:shadow-xl transition-all duration-500 cursor-pointer hover:-translate-y-2"
      >
        <div class="relative aspect-[16/10] overflow-hidden bg-gray-100">
          <img
            :src="article.image"
            :alt="article.title"
            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div class="absolute top-4 left-4">
            <span
              class="px-3 py-1.5 text-xs md:text-sm font-semibold rounded-full shadow-sm"
              :class="article.badge"
            >
              {{ article.category }}
            </span>
          </div>
        </div>

        <div class="flex flex-col flex-grow p-5 md:p-6">
          <div class="flex items-center gap-3 text-xs md:text-sm text-gray-500 mb-3">
            <span class="flex items-center gap-1.5">
              <Icon name="ph:calendar-blank" class="w-4 h-4" />
              {{ article.date }}
            </span>
            <span class="flex items-center gap-1.5">
              <Icon name="ph:clock" class="w-4 h-4" />
              {{ article.readTime }}
            </span>
          </div>

          <h3 class="text-lg md:text-xl font-bold text-black mb-3 group-hover:text-gray-700 transition-colors duration-300 line-clamp-2">
            {{ article.title }}
          </h3>

          <p class="text-sm md:text-base text-gray-600 mb-4 flex-grow line-clamp-3">
            {{ article.excerpt }}
          </p>

          <div class="flex items-center justify-between pt-3 border-t border-gray-100">
            <span class="text-sm font-semibold text-black group-hover:text-gray-700 transition-colors duration-300">
              {{ t('news.readMore') }}
            </span>
            <div class="w-8 h-8 rounded-full flex items-center justify-center bg-gray-50 text-gray-400 group-hover:bg-black group-hover:text-white transition-all duration-300">
              <Icon name="ph:arrow-right" class="w-4 h-4" />
            </div>
          </div>
        </div>
      </article>
    </div>
  </main>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSeoMeta } from '#imports'
import gsap from 'gsap'
import { useAppStore } from '~/stores/app'

const { t } = useI18n()
const appStore = useAppStore()

const headerWrapRef = ref<HTMLElement | null>(null)
const titleRef = ref<HTMLElement | null>(null)
const descRef = ref<HTMLElement | null>(null)
const filterWrapRef = ref<HTMLElement | null>(null)
const articlesWrapRef = ref<HTMLElement | null>(null)
const activeCategory = ref('all')
let articlesCtx: gsap.Context | null = null

const categories = ['all', 'insights', 'projects', 'announcements']

// 计算属性：根据选中的分类过滤文章
const filteredNewsData = computed(() => {
  if (activeCategory.value === 'all') {
    return newsData
  }
  return newsData.filter(item => item.category.toLowerCase() === activeCategory.value.toLowerCase())
})

useSeoMeta({
  title: () => t('news.title'),
  description: () => t('news.description'),
})

const playPageIntro = async () => {
  await nextTick()
  if (!headerWrapRef.value || !titleRef.value || !descRef.value || !filterWrapRef.value || !articlesWrapRef.value) return

  articlesCtx?.revert()

  articlesCtx = gsap.context(() => {
    const filterButtons = gsap.utils.toArray<HTMLElement>('button', filterWrapRef.value!)
    const newsCards = gsap.utils.toArray<HTMLElement>('.news-card', articlesWrapRef.value!)

    gsap.delayedCall(0, () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })

          tl.set(headerWrapRef.value!, { autoAlpha: 1 })
          tl.fromTo(titleRef.value!, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.85, ease: 'power4.out', clearProps: 'transform' })
          tl.fromTo(descRef.value!, { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power4.out', clearProps: 'transform' }, '-=0.45')

          tl.set(filterWrapRef.value!, { autoAlpha: 1 }, '-=0.2')
          tl.fromTo(
            filterButtons,
            { autoAlpha: 0, y: 20 },
            {
              autoAlpha: 1,
              y: 0,
              duration: 0.7,
              ease: 'power4.out',
              stagger: { each: 0.08, from: 'start' },
              clearProps: 'transform',
            },
            '-=0.3'
          )

          tl.set(articlesWrapRef.value!, { autoAlpha: 1 }, '-=0.05')
          tl.fromTo(
            newsCards,
            { autoAlpha: 0, y: 34, scale: 0.965 },
            {
              autoAlpha: 1,
              y: 0,
              scale: 1,
              duration: 0.95,
              ease: 'power4.out',
              stagger: { each: 0.11, from: 'start' },
              clearProps: 'transform',
            },
            '+=0.08'
          )

          tl.set([headerWrapRef.value!, filterWrapRef.value!, articlesWrapRef.value!], { clearProps: 'opacity,visibility' })
        })
      })
    })
  }, headerWrapRef.value)
}

onMounted(() => {
  const handleLoadingDone = () => {
    playPageIntro()
  }

  if (!appStore.isAppLoading) {
    playPageIntro()
    return
  }

  window.addEventListener('app-loading-done', handleLoadingDone, { once: true })
})

onBeforeUnmount(() => {
  articlesCtx?.revert()
})

interface NewsItem {
  id: string
  title: string
  excerpt: string
  image: string
  category: string
  badge: string
  date: string
  readTime: string
  url: string
}

const newsData: NewsItem[] = [
  {
    id: 'design-trends-2026',
    title: 'Design Trends Shaping 2026',
    excerpt: 'Explore the emerging design trends that are defining digital experiences this year, from minimalism to bold typography.',
    image: 'https://picsum.photos/id/1/800/500',
    category: 'Insights',
    badge: 'bg-purple-100 text-purple-700',
    date: 'May 28, 2026',
    readTime: '5 min',
    url: '#'
  },
  {
    id: 'forma-digital-launch',
    title: 'Forma Digital Platform Launch',
    excerpt: 'We are excited to announce the successful launch of Forma Digital, a revolutionary e-commerce experience.',
    image: 'https://picsum.photos/id/201/800/500',
    category: 'Projects',
    badge: 'bg-blue-100 text-blue-700',
    date: 'May 15, 2026',
    readTime: '3 min',
    url: '#'
  },
  {
    id: 'studio-expansion',
    title: 'Studio Expansion Announcement',
    excerpt: 'ArcticNewOne is growing! We are expanding our team and capabilities to serve you better.',
    image: 'https://picsum.photos/id/164/800/500',
    category: 'Announcements',
    badge: 'bg-green-100 text-green-700',
    date: 'May 10, 2026',
    readTime: '2 min',
    url: '#'
  },
  {
    id: 'ux-research-methods',
    title: 'Modern UX Research Methods',
    excerpt: 'Dive into the latest user experience research methodologies that inform our design decisions.',
    image: 'https://picsum.photos/id/180/800/500',
    category: 'Insights',
    badge: 'bg-purple-100 text-purple-700',
    date: 'Apr 28, 2026',
    readTime: '7 min',
    url: '#'
  },
  {
    id: 'bold-moves-case-study',
    title: 'Bold Moves: A Case Study',
    excerpt: 'Behind the scenes of our award-winning architectural visualization project featuring cutting-edge 3D technology.',
    image: 'https://picsum.photos/id/119/800/500',
    category: 'Projects',
    badge: 'bg-blue-100 text-blue-700',
    date: 'Apr 20, 2026',
    readTime: '6 min',
    url: '#'
  },
  {
    id: 'new-tools-integration',
    title: 'New Tools Added to Our Platform',
    excerpt: 'Check out the latest additions to our toolbox, designed to streamline your workflow and boost productivity.',
    image: 'https://picsum.photos/id/326/800/500',
    category: 'Announcements',
    badge: 'bg-green-100 text-green-700',
    date: 'Apr 12, 2026',
    readTime: '4 min',
    url: '#'
  }
]
</script>

<style scoped>
p {
  word-break: break-word;
}
</style>