arcticnewone/app/pages/work/index.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"
    >
      <h1 ref="titleRef" class="text-3xl md:text-5xl font-bold mb-4 md:mb-6 tracking-tight text-black">{{ t('work.title') }}</h1>
      <p ref="descRef" class="text-base md:text-lg text-gray-600 max-w-2xl">{{ t('work.description') }}</p>
    </div>

    <div
      ref="filterWrapRef"
      class="flex justify-center gap-3 md:gap-4 mb-10 md:mb-14 flex-wrap"
    >
      <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(`work.categories.${category}`) }}
      </button>
    </div>

    <div
      ref="projectsWrapRef"
      class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"
    >
      <NuxtLink
        v-for="project in filteredWorkData"
        :key="project.id"
        :to="`/work/${project.id}`"
        class="work-card group relative block rounded-2xl md:rounded-3xl overflow-hidden cursor-pointer hover:shadow-2xl transition-all duration-500"
      >
        <div class="relative aspect-[4/3] overflow-hidden bg-gray-100">
          <img
            :src="project.image"
            :alt="project.title"
            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </div>

        <div class="p-6 md:p-8 bg-white">
          <div class="flex items-start justify-between mb-3">
            <h3 class="text-xl md:text-2xl font-bold text-black group-hover:text-gray-700 transition-colors duration-300">{{ project.title }}</h3>
            <div class="w-9 h-9 md:w-10 md:h-10 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 flex-shrink-0 ml-3">
              <Icon name="ph:arrow-up-right" class="w-4 h-4 md:w-5 md:h-5" />
            </div>
          </div>
          <p class="text-sm md:text-base text-gray-600 mb-4">{{ project.description }}</p>
          <div class="flex flex-wrap gap-2">
            <span
              v-for="tag in project.tags"
              :key="tag"
              class="px-3 py-1 text-xs md:text-sm bg-gray-50 text-gray-700 rounded-full"
            >
              {{ tag }}
            </span>
          </div>
        </div>
      </NuxtLink>
    </div>
  </main>
</template>

<script setup lang="ts">
import { nextTick, 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 projectsWrapRef = ref<HTMLElement | null>(null)
const activeCategory = ref('all')

const categories = ['all', 'webDesign', 'branding', 'development']

const filteredWorkData = computed(() => {
  if (activeCategory.value === 'all') {
    return workData
  }
  return workData.filter(item => item.category === activeCategory.value)
})

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

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

  const filterButtons = gsap.utils.toArray<HTMLElement>('button', filterWrapRef.value!)
  const projectCards = gsap.utils.toArray<HTMLElement>('.work-card', projectsWrapRef.value!)

  // 先设置初始状态，防止闪现
  gsap.set([titleRef.value, descRef.value, ...filterButtons, ...projectCards], {
    autoAlpha: 0, y: 30
  })

  // 然后播放动画
  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })

  tl.to(titleRef.value, { autoAlpha: 1, y: 0, duration: 0.5 })
  tl.to(descRef.value, { autoAlpha: 1, y: 0, duration: 0.4 }, '-=0.3')
  tl.to(filterButtons, { autoAlpha: 1, y: 0, duration: 0.4, stagger: 0.05 }, '-=0.2')
  tl.to(projectCards, { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.08 }, '-=0.2')
}

onMounted(() => {
  if (!appStore.isAppLoading) {
    playPageIntro()
  } else {
    window.addEventListener('app-loading-done', playPageIntro, { once: true })
  }
})

interface WorkItem {
  id: string
  title: string
  description: string
  image: string
  tags: string[]
  category: string
}

const workData: WorkItem[] = [
  {
    id: 'forma-digital',
    title: 'Forma Digital',
    description: 'A modern e-commerce platform with seamless user experience and dynamic product showcases.',
    image: 'https://picsum.photos/id/201/800/600',
    tags: ['Web Design', 'E-commerce', 'React'],
    category: 'webDesign'
  },
  {
    id: 'one-step',
    title: 'One Step',
    description: 'Brand identity and marketing campaign for a fitness app focused on sustainable habits.',
    image: 'https://picsum.photos/id/180/800/600',
    tags: ['Branding', 'Marketing', 'UI/UX'],
    category: 'branding'
  },
  {
    id: 'nero-vision',
    title: 'Nero Vision',
    description: 'Full-stack web application for creative professionals to manage their portfolios.',
    image: 'https://picsum.photos/id/119/800/600',
    tags: ['Development', 'Vue.js', 'Node.js'],
    category: 'development'
  },
  {
    id: 'bold-moves',
    title: 'Bold Moves',
    description: 'Interactive website showcasing innovative architectural designs with 3D visualizations.',
    image: 'https://picsum.photos/id/164/800/600',
    tags: ['Web Design', '3D', 'Three.js'],
    category: 'webDesign'
  },
  {
    id: 'echo-labs',
    title: 'Echo Labs',
    description: 'Corporate branding and visual identity for a tech startup in the AI space.',
    image: 'https://picsum.photos/id/101/800/600',
    tags: ['Branding', 'Visual Identity', 'Corporate'],
    category: 'branding'
  },
  {
    id: 'flux-api',
    title: 'Flux API',
    description: 'Scalable REST API with comprehensive documentation and developer tools.',
    image: 'https://picsum.photos/id/326/800/600',
    tags: ['Development', 'API', 'Python'],
    category: 'development'
  }
]
</script>

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