ali_ai_learn_web/src/pages/Home/SectionPlatforms.vue

<template>
  <section class="section-platforms relative overflow-hidden bg-white py-24">
    <!-- 背景 -->
    <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, #f8faff 0%, #ffffff 50%, #f0fdf4 100%);"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-14">
        <span class="inline-flex items-center gap-2 bg-indigo-50 border border-indigo-200 text-indigo-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></span>
          {{ $t('platforms.badge') }}
        </span>
        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4">
          {{ $t('platforms.title') }}<span class="bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">{{ $t('platforms.subtitle') }}</span>
        </h2>
        <p class="text-gray-500 text-lg max-w-2xl mx-auto">{{ $t('platforms.description') }}</p>
      </div>

      <!-- 引擎选择器 -->
      <div class="flex justify-center gap-3 mb-10 flex-wrap">
        <button
          v-for="(engine, idx) in engines"
          :key="engine.id"
          @click="activeEngine = idx"
          class="group flex items-center gap-3 px-5 py-3 rounded-2xl border-2 transition-all duration-300 font-semibold text-sm"
          :class="activeEngine === idx
            ? `border-${engine.color}-400 bg-${engine.color}-50 text-${engine.color}-700 shadow-lg`
            : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50'"
        >
          <span class="text-xl">{{ engine.logo }}</span>
          <span>{{ engine.name }}</span>
          <span class="text-xs px-2 py-0.5 rounded-full font-bold"
            :class="activeEngine === idx ? `bg-${engine.color}-100 text-${engine.color}-600` : 'bg-gray-100 text-gray-400'">
            {{ engine.tag }}
          </span>
        </button>
      </div>

      <!-- 主展示区：左侧详情 + 右侧对比矩阵 -->
      <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">

        <!-- 左侧：引擎详情卡片 -->
        <div class="lg:col-span-2">
          <Transition name="engine-slide" mode="out-in">
            <div :key="activeEngine" class="relative rounded-3xl overflow-hidden bg-gray-900 shadow-2xl">
              <!-- 封面图 -->
              <div class="relative h-52 overflow-hidden">
                <img :src="currentEngine.img" :alt="currentEngine.name"
                  class="w-full h-full object-cover opacity-60"/>
                <div class="absolute inset-0" :style="`background: linear-gradient(to bottom, ${currentEngine.gradientFrom}, ${currentEngine.gradientTo});`"></div>
                <!-- Logo -->
                <div class="absolute top-5 left-5 flex items-center gap-3">
                  <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl bg-white/10 backdrop-blur-sm border border-white/20">
                    {{ currentEngine.logo }}
                  </div>
                  <div>
                    <div class="text-white font-black text-xl">{{ currentEngine.name }}</div>
                    <div class="text-white/60 text-xs">{{ currentEngine.subtitle }}</div>
                  </div>
                </div>
                <!-- 适用标签 -->
                <div class="absolute bottom-4 left-5 right-5 flex flex-wrap gap-1.5">
                  <span v-for="use in currentEngine.useCases" :key="use"
                    class="text-xs bg-white/15 backdrop-blur-sm text-white border border-white/20 px-2.5 py-1 rounded-full">
                    {{ use }}
                  </span>
                </div>
              </div>

              <!-- 详情内容 -->
              <div class="p-6">
                <p class="text-gray-300 text-sm leading-relaxed mb-5">{{ currentEngine.desc }}</p>

                <!-- 核心指标 -->
                <div class="grid grid-cols-3 gap-3 mb-5">
                  <div v-for="metric in currentEngine.metrics" :key="metric.label"
                    class="text-center p-3 rounded-2xl bg-white/10 border border-white/20">
                    <div class="font-black text-base mb-0.5" :class="metric.color">{{ metric.value }}</div>
                    <div class="text-gray-500 text-xs">{{ metric.label }}</div>
                  </div>
                </div>

                <!-- 优势列表 -->
                <div class="space-y-2 mb-5">
                  <div v-for="pro in currentEngine.pros" :key="pro"
                    class="flex items-center gap-2 text-sm text-gray-300">
                    <span class="w-4 h-4 rounded-full flex items-center justify-center text-xs flex-shrink-0" :class="currentEngine.checkBg">✓</span>
                    {{ pro }}
                  </div>
                </div>

                <!-- CTA -->
                <button class="w-full py-3 rounded-2xl font-bold text-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
                  :class="currentEngine.btnClass">
                  {{ $t('platforms.cta.learn') }} {{ currentEngine.name }} →
                </button>
              </div>
            </div>
          </Transition>
        </div>

        <!-- 右侧：功能对比矩阵 -->
        <div class="lg:col-span-3">
          <div class="bg-white border border-gray-100 rounded-3xl overflow-hidden shadow-lg">
            <!-- 矩阵标题行 -->
            <div class="grid grid-cols-5 bg-gray-50 border-b border-gray-100">
              <div class="col-span-1 p-4 text-xs font-bold text-gray-400 uppercase">{{ $t('platforms.comparison.featureTitle') }}</div>
              <div v-for="engine in engines" :key="engine.id"
                class="p-4 text-center transition-all duration-300"
                :class="activeEngine === engines.indexOf(engine) ? `bg-${engine.color}-50` : ''">
                <div class="text-lg mb-1">{{ engine.logo }}</div>
                <div class="text-xs font-bold text-gray-700">{{ engine.name }}</div>
              </div>
            </div>

            <!-- 矩阵内容行 -->
            <div v-for="(feature, fIdx) in comparisonFeatures" :key="feature.name"
              class="grid grid-cols-5 border-b border-gray-50 transition-all duration-200 cursor-default"
              :class="[
                fIdx % 2 === 0 ? '' : 'bg-gray-50/30',
                hoveredRow === fIdx ? 'bg-indigo-50/60 shadow-sm' : 'hover:bg-gray-50/50'
              ]"
              @mouseenter="hoveredRow = fIdx"
              @mouseleave="hoveredRow = null">
              <!-- 功能名 -->
              <div class="col-span-1 p-4 flex items-center gap-2 relative group">
                <span class="text-base">{{ feature.icon }}</span>
                <div>
                  <div class="text-sm font-semibold text-gray-700 flex items-center gap-1">
                    {{ feature.name }}
                    <span v-if="feature.tip" class="w-3.5 h-3.5 bg-gray-200 text-gray-500 rounded-full text-xs flex items-center justify-center cursor-help flex-shrink-0">?</span>
                  </div>
                  <div class="text-xs text-gray-400">{{ feature.desc }}</div>
                </div>
                <!-- Tooltip -->
                <div v-if="feature.tip" class="compare-tooltip">
                  {{ feature.tip }}
                </div>
              </div>
              <!-- 各引擎支持情况 -->
              <div v-for="(engine, eIdx) in engines" :key="engine.id"
                class="p-4 flex items-center justify-center transition-all duration-300"
                :class="activeEngine === eIdx ? `bg-${engine.color}-50/50` : ''">
                <div class="flex flex-col items-center gap-1">
                  <span v-if="feature.support[eIdx] === 'full'" class="w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-bold">✓</span>
                  <span v-else-if="feature.support[eIdx] === 'partial'" class="w-6 h-6 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center text-xs font-bold">~</span>
                  <span v-else class="w-6 h-6 bg-gray-100 text-gray-400 rounded-full flex items-center justify-center text-xs">—</span>
                  <span v-if="feature.notes && feature.notes[eIdx]" class="text-xs text-gray-400 text-center leading-tight max-w-[70px]">{{ feature.notes[eIdx] }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部推荐 -->
          <div class="mt-6 p-5 bg-gradient-to-r from-indigo-50 to-violet-50 rounded-2xl border border-indigo-100">
            <div class="flex items-start gap-3">
              <span class="text-2xl flex-shrink-0">💡</span>
              <div>
                <div class="font-bold text-gray-800 mb-1 text-sm">{{ $t('platforms.engineSelection.title') }}</div>
                <div class="text-gray-500 text-xs leading-relaxed">
                  <span class="font-semibold text-gray-700">n8n</span> {{ $t('platforms.engineSelection.n8n') }}
                  <span class="font-semibold text-gray-700">Coze</span>  {{ $t('platforms.engineSelection.coze') }}；
                  <span class="font-semibold text-gray-700">Dify</span>  {{ $t('platforms.engineSelection.dify') }}；
                  <span class="font-semibold text-gray-700">FastGPT</span> {{ $t('platforms.engineSelection.fastgpt') }}。
                  <a href="#" class="text-indigo-600 font-semibold ml-1 hover:underline">{{ $t('platforms.engineSelection.guide') }} →</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const activeEngine = ref(0)
const hoveredRow = ref(null)

const engines = [
  {
    id: 'n8n', name: 'n8n', logo: '🔧', tag: t('platforms.engines.n8n.tag'), subtitle: t('platforms.engines.n8n.subtitle'),
    color: 'red',
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(239,68,68,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: t('platforms.engines.n8n.desc'),
    useCases: [t('platforms.engines.n8n.useCases.0'), t('platforms.engines.n8n.useCases.1'), t('platforms.engines.n8n.useCases.2')],
    metrics: [
      { value: '400+', label: t('platforms.engines.n8n.metrics.0.label'), color: 'text-red-400' },
      { value: t('platforms.engines.n8n.metrics.1.value'), label: t('platforms.engines.n8n.metrics.1.label'), color: 'text-green-400' },
      { value: '99.9%', label: t('platforms.engines.n8n.metrics.2.label'), color: 'text-blue-400' }
    ],
    pros: [t('platforms.engines.n8n.pros.0'), t('platforms.engines.n8n.pros.1'), t('platforms.engines.n8n.pros.2'), t('platforms.engines.n8n.pros.3')],
    checkBg: 'bg-red-100 text-red-600',
    btnClass: 'bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-lg shadow-red-200/50'
  },
  {
    id: 'coze', name: 'Coze', logo: '🤖', tag: t('platforms.engines.coze.tag'), subtitle: t('platforms.engines.coze.subtitle'),
    color: 'blue',
    img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(59,130,246,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc:t('platforms.engines.coze.desc'),
    useCases: [t('platforms.engines.coze.useCases.0'), t('platforms.engines.coze.useCases.1'), t('platforms.engines.coze.useCases.2')],
    metrics: [
      { value: '零代码', label: '快速搭建', color: 'text-blue-400' },
      { value: '10+', label: '接入渠道', color: 'text-green-400' },
      { value: '多模态', label: '能力支持', color: 'text-violet-400' }
    ],
    pros: [t('platforms.engines.coze.pros.0'), t('platforms.engines.coze.pros.1'),t('platforms.engines.coze.pros.2'), t('platforms.engines.coze.pros.3')],
    checkBg: 'bg-blue-100 text-blue-600',
    btnClass: 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-blue-200/50'
  },
  {
    id: 'dify', name: 'Dify', logo: '🧠', tag: t('platforms.engines.dify.tag'), subtitle: t('platforms.engines.dify.subtitle'),
    color: 'emerald',
    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(16,185,129,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: t('platforms.engines.dify.desc'),
    useCases: [t('platforms.engines.dify.useCases.0'),t('platforms.engines.dify.useCases.1'), t('platforms.engines.dify.useCases.2')],
    metrics: [
      { value: 'RAG', label: t('platforms.engines.dify.metrics.0.label'), color: 'text-emerald-400' },
      { value: 'Agent', label: t('platforms.engines.dify.metrics.1.label'), color: 'text-green-400' },
      { value: '开源', label: t('platforms.engines.dify.metrics.2.value'), color: 'text-blue-400' }
    ],
    pros: [t('platforms.engines.dify.pros.0'), t('platforms.engines.dify.pros.1'), t('platforms.engines.dify.pros.2'), t('platforms.engines.dify.pros.3')],
    checkBg: 'bg-emerald-100 text-emerald-600',
    btnClass: 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg shadow-emerald-200/50'
  },
  {
    id: 'fastgpt', name: 'FastGPT', logo: '⚡', tag: t('platforms.engines.fastgpt.tag'), subtitle: t('platforms.engines.fastgpt.subtitle'),
    color: 'amber',
    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(245,158,11,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: t('platforms.engines.fastgpt.desc'),
    useCases: [t('platforms.engines.fastgpt.useCases.0'), t('platforms.engines.fastgpt.useCases.1'), t('platforms.engines.fastgpt.useCases.2')],
    metrics: [
      { value: '95%+', label: t('platforms.engines.fastgpt.metrics.0.label'), color: 'text-amber-400' },
      { value: t('platforms.engines.fastgpt.metrics.1.value'), label: t('platforms.engines.fastgpt.metrics.1.label'), color: 'text-green-400' },
      { value: t('platforms.engines.fastgpt.metrics.2.value'), label: t('platforms.engines.fastgpt.metrics.2.label'), color: 'text-blue-400' }
    ],
    pros: [t('platforms.engines.fastgpt.pros.0'), t('platforms.engines.fastgpt.pros.1'),t('platforms.engines.fastgpt.pros.2'), t('platforms.engines.fastgpt.pros.3')],
    checkBg: 'bg-amber-100 text-amber-600',
    btnClass: 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg shadow-amber-200/50'
  }
]

const currentEngine = computed(() => engines[activeEngine.value])

const comparisonFeatures = [
  {
    icon: '🎨', name: t('platforms.comparison.features.0.name'), desc: t('platforms.comparison.features.0.desc'),
    tip: t('platforms.comparison.features.0.tip'),
    support: ['full', 'full', 'full', 'partial'],
    notes: ['', '', '', t('platforms.comparison.notes.basic')]
  },
  {
    icon: '🔌', name: t('platforms.comparison.features.1.name'), desc: t('platforms.comparison.features.1.desc'),
    tip: t('platforms.comparison.features.1.tip'),
    support: ['full', 'partial', 'partial', 'partial'],
    notes: ['400+', '50+', '100+', '30+']
  },
  {
    icon: '🧠', name: t('platforms.comparison.features.2.name'), desc: t('platforms.comparison.features.2.desc'),
    tip: t('platforms.comparison.features.2.tip'),
    support: ['partial', 'partial', 'full', 'full'],
    notes: [t('platforms.comparison.notes.basic'), t('platforms.comparison.notes.basic'), t('platforms.comparison.notes.complete'), t('platforms.comparison.notes.complete')]
  },
  {
    icon: '🤖', name: t('platforms.comparison.features.3.name'), desc: '智能体工作流',
    tip: t('platforms.comparison.features.3.tip'),
    support: ['full', 'full', 'full', 'partial'],
    notes: ['', '', '', t('platforms.comparison.notes.basic')]
  },
  {
    icon: '🏠', name: t('platforms.comparison.features.4.name'), desc: t('platforms.comparison.features.4.desc'),
    tip: t('platforms.comparison.features.4.tip'),
    support: ['full', 'none', 'full', 'full'],
    notes: ['', t('platforms.comparison.notes.cloudOnly'), '', '']
  },
  {
    icon: '📱', name: t('platforms.comparison.features.5.name'), desc: t('platforms.comparison.features.5.desc'),
    tip: t('platforms.comparison.features.5.tip'),
    support: ['partial', 'full', 'partial', 'partial'],
    notes: [t('platforms.comparison.notes.needConfig'), t('platforms.comparison.notes.nativeSupport'), t('platforms.comparison.notes.needConfig'), t('platforms.comparison.notes.needConfig')]
  },
  {
    icon: '💰', name: t('platforms.comparison.features.6.name'), desc: t('platforms.comparison.features.6.desc'),
    tip: t('platforms.comparison.features.6.tip'),
    support: ['full', 'full', 'full', 'full'],
    notes: [t('platforms.comparison.notes.openSourceFree'), t('platforms.comparison.notes.freeQuota'), t('platforms.comparison.notes.openSourceFree'), t('platforms.comparison.notes.openSourceFree')]
  }
]
</script>

<style scoped>
.engine-slide-enter-active, .engine-slide-leave-active {
  transition: all 0.3s ease;
}
.engine-slide-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}
.engine-slide-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* ===== 响应式 ===== */

/* 标题自适应 */
.section-platforms h2 {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
}
.section-platforms p {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}

/* 平板（≤1024px）*/
@media (max-width: 1024px) {
  .section-platforms { padding-top: 4rem; padding-bottom: 4rem; }
  .section-platforms .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
}

/* 手机横屏 / 小平板（≤768px）*/
@media (max-width: 768px) {
  .section-platforms { padding-top: 3rem; padding-bottom: 3rem; }
  /* 引擎选择器按钮 */
  .section-platforms button.group { padding: 8px 14px; font-size: 12px; gap: 8px; }
  /* 对比矩阵改为可滚动 */
  .section-platforms .lg\:col-span-3 > .bg-white {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .section-platforms .grid-cols-5 {
    min-width: 480px;
  }
  /* 封面图高度缩小 */
  .section-platforms .h-52 { height: 10rem; }
  /* 内容区域内边距 */
  .section-platforms .p-6 { padding: 1rem; }
  /* 指标卡片 */
  .section-platforms .grid-cols-3 { gap: 0.5rem; }
}

/* 手机竖屏（≤480px）*/
@media (max-width: 480px) {
  .section-platforms { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* 引擎选择器按钮隐藏 tag */
  .section-platforms button.group span:last-child { display: none; }
  .section-platforms button.group { padding: 7px 12px; font-size: 11px; gap: 6px; }
  /* 封面图 */
  .section-platforms .h-52 { height: 8rem; }
  /* 底部推荐框 */
  .section-platforms .mt-6.p-5 { padding: 0.75rem; }
  /* 对比矩阵单元格内边距 */
  .section-platforms .p-4 { padding: 0.5rem; }
  .section-platforms .text-sm { font-size: 0.75rem; }
  .section-platforms .text-xs { font-size: 0.65rem; }
}

/* 极小屏（≤360px）*/
@media (max-width: 360px) {
  .section-platforms button.group span:nth-child(2) { display: none; }
  .section-platforms button.group { padding: 6px 10px; }
}

/* 对比表格 Tooltip */
.compare-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: rgba(15, 10, 35, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 220px;
  white-space: normal;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.group:hover .compare-tooltip {
  opacity: 1;
}
</style>