arcticnewone/app/components/home/HomeProcess.vue

<template>
  <section ref="rootRef" class="relative bg-gradient-to-b from-white to-gray-50 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" style="opacity: 0;">
        <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
          {{ t('home.process.title') }}
        </h2>
        <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
          {{ t('home.process.subtitle') }}
        </p>
      </div>

      <!-- 水平滚动容器 -->
      <div ref="scrollContainerRef" class="relative">
        <!-- 连接线 -->
        <svg
          ref="lineRef"
          class="absolute top-1/2 left-0 w-full h-1 -translate-y-1/2 pointer-events-none z-0"
          style="opacity: 0;"
        >
          <path
            ref="linePathRef"
            d=""
            stroke="url(#lineGradient)"
            stroke-width="3"
            fill="none"
            stroke-dasharray="10 10"
            class="line-path"
          />
          <defs>
            <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
              <stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:1" />
              <stop offset="100%" style="stop-color:#EC4899;stop-opacity:1" />
            </linearGradient>
          </defs>
        </svg>

        <!-- 步骤卡片 -->
        <div class="flex gap-8 md:gap-12 pb-10 overflow-x-auto scrollbar-hide">
          <div
            v-for="(step, index) in steps"
            :key="step.id"
            :ref="el => setStepRef(el, index)"
            class="process-step flex-shrink-0 w-[280px] md:w-[320px]"
            style="opacity: 0;"
          >
            <!-- 步骤编号节点 -->
            <div class="relative flex justify-center mb-8">
              <div
                class="w-20 h-20 md:w-24 md:h-24 rounded-full flex items-center justify-center text-white text-2xl md:text-3xl font-bold shadow-xl relative z-10"
                :class="step.gradient"
              >
                {{ index + 1 }}
                <!-- 脉冲动画 -->
                <div class="absolute inset-0 rounded-full animate-ping opacity-20" :class="step.bgColor"></div>
              </div>
            </div>

            <!-- 卡片内容 -->
            <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div class="w-14 h-14 md:w-16 md:h-16 rounded-xl mb-5 flex items-center justify-center" :class="step.iconBg">
                <Icon :name="step.icon" class="w-7 h-7 md:w-8 md:h-8" :class="step.iconColor" />
              </div>

              <h3 class="text-xl md:text-2xl font-bold text-black mb-3">
                {{ t(`home.process.steps.${step.id}.title`) }}
              </h3>

              <p class="text-gray-600 text-sm md:text-base leading-relaxed mb-5">
                {{ t(`home.process.steps.${step.id}.description`) }}
              </p>

              <!-- 关键点 -->
              <ul class="space-y-2">
                <li
                  v-for="(point, i) in step.points"
                  :key="i"
                  class="flex items-center text-sm text-gray-500"
                >
                  <Icon name="ph:check-circle-fill" :class="step.iconColor" class="w-4 h-4 mr-2 flex-shrink-0" />
                  <span>{{ t(`home.process.steps.${step.id}.points.${i}`) }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 滚动提示 -->
        <div class="flex justify-center mt-8">
          <div class="flex items-center gap-2 text-gray-400 text-sm animate-bounce">
            <Icon name="ph:arrow-right" class="w-5 h-5" />
            <span>{{ t('home.process.scrollHint') }}</span>
          </div>
        </div>
      </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 scrollContainerRef = ref<HTMLElement | null>(null)
const lineRef = ref<SVGElement | null>(null)
const linePathRef = ref<SVGPathElement | null>(null)
const stepElements = ref<(HTMLElement | null)[]>([])
let ctx: gsap.Context | null = null

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

const steps = [
  {
    id: 'discovery',
    icon: 'ph:magnifying-glass-duotone',
    gradient: 'bg-gradient-to-br from-blue-500 to-cyan-500',
    bgColor: 'bg-blue-500',
    iconBg: 'bg-blue-50',
    iconColor: 'text-blue-600',
    points: [0, 1, 2]
  },
  {
    id: 'strategy',
    icon: 'ph:strategy-duotone',
    gradient: 'bg-gradient-to-br from-purple-500 to-pink-500',
    bgColor: 'bg-purple-500',
    iconBg: 'bg-purple-50',
    iconColor: 'text-purple-600',
    points: [0, 1, 2]
  },
  {
    id: 'design',
    icon: 'ph:paint-brush-duotone',
    gradient: 'bg-gradient-to-br from-pink-500 to-rose-500',
    bgColor: 'bg-pink-500',
    iconBg: 'bg-pink-50',
    iconColor: 'text-pink-600',
    points: [0, 1, 2]
  },
  {
    id: 'development',
    icon: 'ph:code-duotone',
    gradient: 'bg-gradient-to-br from-orange-500 to-amber-500',
    bgColor: 'bg-orange-500',
    iconBg: 'bg-orange-50',
    iconColor: 'text-orange-600',
    points: [0, 1, 2]
  },
  {
    id: 'testing',
    icon: 'ph:test-tube-duotone',
    gradient: 'bg-gradient-to-br from-green-500 to-emerald-500',
    bgColor: 'bg-green-500',
    iconBg: 'bg-green-50',
    iconColor: 'text-green-600',
    points: [0, 1, 2]
  },
  {
    id: 'launch',
    icon: 'ph:rocket-launch-duotone',
    gradient: 'bg-gradient-to-br from-indigo-500 to-blue-500',
    bgColor: 'bg-indigo-500',
    iconBg: 'bg-indigo-50',
    iconColor: 'text-indigo-600',
    points: [0, 1, 2]
  }
]

// 绘制连接线
const drawLine = () => {
  if (!scrollContainerRef.value || !linePathRef.value) return

  const container = scrollContainerRef.value
  const nodes = stepElements.value.filter(el => el !== null)

  if (nodes.length < 2) return

  let pathData = ''
  nodes.forEach((node, index) => {
    if (!node) return

    const rect = node.getBoundingClientRect()
    const containerRect = container.getBoundingClientRect()
    const x = rect.left - containerRect.left + rect.width / 2
    const y = 60 // 固定高度

    if (index === 0) {
      pathData = `M ${x} ${y}`
    } else {
      pathData += ` L ${x} ${y}`
    }
  })

  linePathRef.value.setAttribute('d', pathData)
}

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

  // 绘制连接线
  setTimeout(() => {
    drawLine()
  }, 100)

  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'
      }
    )

    // 连接线绘制动画
    if (lineRef.value && linePathRef.value) {
      const pathLength = linePathRef.value.getTotalLength()

      gsap.set(linePathRef.value, {
        strokeDasharray: pathLength,
        strokeDashoffset: pathLength
      })

      gsap.fromTo(lineRef.value,
        { autoAlpha: 0 },
        {
          scrollTrigger: {
            trigger: scrollContainerRef.value,
            start: 'top 75%',
            toggleActions: 'play none none reverse'
          },
          autoAlpha: 1,
          duration: 0.5
        }
      )

      gsap.to(linePathRef.value,
        {
          scrollTrigger: {
            trigger: scrollContainerRef.value,
            start: 'top 75%',
            toggleActions: 'play none none reverse'
          },
          strokeDashoffset: 0,
          duration: 2,
          ease: 'power2.inOut'
        }
      )
    }

    // 步骤节点弹跳入场
    stepElements.value.forEach((step, index) => {
      if (!step) return

      gsap.fromTo(step,
        { autoAlpha: 0, y: 100, scale: 0.8 },
        {
          scrollTrigger: {
            trigger: step,
            start: 'top 90%',
            toggleActions: 'play none none reverse'
          },
          autoAlpha: 1,
          y: 0,
          scale: 1,
          duration: 0.8,
          delay: index * 0.15,
          ease: 'back.out(1.5)'
        }
      )
    })
  }, rootRef.value)
})

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

<style scoped>
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.process-step {
  will-change: transform, opacity;
}

.line-path {
  stroke-dasharray: 10 10;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -200;
  }
}
</style>