ali_ai_learn_web/src/pages/Home/SectionHotWorkflows.vue

<template>
  <section class="section-hot">
    <div class="hot-header">
      <div class="section-badge">
        <span class="badge-dot"></span>
        <span>{{ $t('hotWorkflows.badge') }}</span>
      </div>
      <h2 class="section-title">{{ $t('hotWorkflows.title') }}<span class="gradient-text">{{ $t('hotWorkflows.subtitle') }}</span></h2>
      <p class="section-desc">{{ $t('hotWorkflows.description') }}</p>
    </div>

    <!-- 无限滚动带 - 第一行 -->
    <div class="scroll-track-wrapper">
      <div class="scroll-track track-forward" ref="track1" @mouseenter="pauseTrack1 = true" @mouseleave="pauseTrack1 = false">
        <div
          v-for="(wf, i) in [...workflows, ...workflows]"
          :key="'a' + i"
          class="workflow-card"
          @mouseenter="hoveredCard = 'a' + i"
          @mouseleave="hoveredCard = null"
        >
          <!-- 封面图 -->
          <div class="card-cover">
            <img :src="wf.coverImage" :alt="wf.title" class="cover-img" />
            <div class="cover-overlay"></div>
            <!-- 平台标签 -->
            <div class="platform-chip" :style="{ background: wf.platformColor }">{{ wf.platform }}</div>
            <!-- 播放量 -->
            <div class="view-count">▶ {{ wf.views }}</div>
          </div>
          <!-- 卡片内容 -->
          <div class="card-info">
            <div class="card-title-row">
              <h4 class="card-title">{{ wf.title }}</h4>
              <div class="card-rating">⭐{{ wf.rating }}</div>
            </div>
            <p class="card-desc">{{ wf.desc }}</p>
            <div class="card-footer">
              <div class="author-info">
                <img :src="wf.authorAvatar" :alt="wf.author" class="author-avatar" />
                <span class="author-name">{{ wf.author }}</span>
              </div>
              <span class="card-category">{{ wf.category }}</span>
            </div>
          </div>
          <!-- 悬停操作 -->
          <div class="card-hover-actions" :class="{ visible: hoveredCard === 'a' + i }">
            <button class="action-btn primary">立即使用</button>
            <button class="action-btn secondary">预览</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 无限滚动带 - 第二行（反向） -->
    <div class="scroll-track-wrapper">
      <div class="scroll-track track-reverse" ref="track2" @mouseenter="pauseTrack2 = true" @mouseleave="pauseTrack2 = false">
        <div
          v-for="(wf, i) in [...workflowsB, ...workflowsB]"
          :key="'b' + i"
          class="workflow-card"
          @mouseenter="hoveredCard = 'b' + i"
          @mouseleave="hoveredCard = null"
        >
          <div class="card-cover">
            <img :src="wf.coverImage" :alt="wf.title" class="cover-img" />
            <div class="cover-overlay"></div>
            <div class="platform-chip" :style="{ background: wf.platformColor }">{{ wf.platform }}</div>
            <div class="view-count">▶ {{ wf.views }}</div>
          </div>
          <div class="card-info">
            <div class="card-title-row">
              <h4 class="card-title">{{ wf.title }}</h4>
              <div class="card-rating">⭐{{ wf.rating }}</div>
            </div>
            <p class="card-desc">{{ wf.desc }}</p>
            <div class="card-footer">
              <div class="author-info">
                <img :src="wf.authorAvatar" :alt="wf.author" class="author-avatar" />
                <span class="author-name">{{ wf.author }}</span>
              </div>
              <span class="card-category">{{ wf.category }}</span>
            </div>
          </div>
          <div class="card-hover-actions" :class="{ visible: hoveredCard === 'b' + i }">
            <button class="action-btn primary">{{ $t('hotWorkflows.cta.use') }}</button>
            <button class="action-btn secondary">{{ $t('hotWorkflows.cta.preview') }}</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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

const { t } = useI18n()
const hoveredCard = ref(null)
const pauseTrack1 = ref(false)
const pauseTrack2 = ref(false)

const workflows = [
  {
    title: 'AI 文章批量生产流水线', platform: 'n8n', platformColor: '#EA4B71',
    rating: '4.9', views: '12.3K', category: '内容创作',
    desc: '一键生成高质量文章，自动配图排版，多平台发布',
    author: 'Alex Chen',
    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=300&q=80'
  },
  {
    title: 'GPT-4 智能客服机器人', platform: 'Coze', platformColor: '#1B6EF3',
    rating: '4.8', views: '8.7K', category: '客服自动化',
    desc: '基于知识库的智能问答，支持多轮对话和情感识别',
    author: 'Sarah Liu',
    authorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&q=80'
  },
  {
    title: '企业知识库问答系统', platform: 'FastGPT', platformColor: '#059669',
    rating: '5.0', views: '15.2K', category: '知识管理',
    desc: '多格式文档导入，精准语义检索，企业知识管理',
    author: 'Mike Wang',
    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&q=80'
  },
  {
    title: '数据报告自动生成', platform: 'Dify', platformColor: '#7C3AED',
    rating: '4.7', views: '6.4K', category: '数据分析',
    desc: '连接多数据源，自动分析可视化，定时推送报告',
    author: 'Lisa Zhang',
    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&q=80'
  },
  {
    title: '社交媒体内容矩阵', platform: 'n8n', platformColor: '#EA4B71',
    rating: '4.8', views: '9.1K', category: '内容创作',
    desc: '一个主题，自动生成适配各平台的差异化内容',
    author: 'Tom Li',
    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=300&q=80'
  },
  {
    title: 'AI 邮件营销自动化', platform: 'Coze', platformColor: '#1B6EF3',
    rating: '4.6', views: '7.3K', category: '营销运营',
    desc: '个性化邮件生成，智能发送时机，效果追踪分析',
    author: 'Emma Zhou',
    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=300&q=80'
  },
  {
    title: '会议纪要自动整理', platform: 'n8n', platformColor: '#EA4B71',
    rating: '5.0', views: '13.7K', category: '效率工具',
    desc: '语音转文字，AI 提炼要点，自动分配任务到项目管理',
    author: 'Zhang Wei',
    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&q=80'
  },
  {
    title: '电商选品智能分析', platform: 'Dify', platformColor: '#7C3AED',
    rating: '4.7', views: '5.8K', category: '数据分析',
    desc: '多平台数据爬取，AI 分析趋势，自动生成选品报告',
    author: 'Jack Wu',
    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=300&q=80'
  }
]

const workflowsB = [
  {
    title: '多语言翻译工作流', platform: 'Coze', platformColor: '#1B6EF3',
    rating: '4.9', views: '11.5K', category: '内容创作',
    desc: '支持 50+ 语言，保留格式，批量处理文档翻译',
    author: 'Wang Fang',
    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=300&q=80'
  },
  {
    title: 'SEO 内容优化助手', platform: 'Dify', platformColor: '#7C3AED',
    rating: '4.7', views: '6.2K', category: '内容创作',
    desc: '关键词分析，竞品对比，AI 生成 SEO 优化建议',
    author: 'Li Ming',
    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=300&q=80'
  },
  {
    title: '用户反馈情感分析', platform: 'FastGPT', platformColor: '#059669',
    rating: '4.8', views: '8.1K', category: '客服自动化',
    desc: '多渠道收集反馈，AI 情感分类，自动生成改进建议',
    author: 'Liu Yang',
    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&q=80'
  },
  {
    title: 'AI 直播脚本生成', platform: 'Coze', platformColor: '#1B6EF3',
    rating: '4.7', views: '7.8K', category: '内容创作',
    desc: '根据产品信息自动生成直播话术，实时提词',
    author: 'Xu Ming',
    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&q=80'
  },
  {
    title: '供应链风险预警', platform: 'n8n', platformColor: '#EA4B71',
    rating: '4.8', views: '5.3K', category: '数据分析',
    desc: '实时监控供应链数据，AI 预测风险，自动发出预警',
    author: 'Zhang San',
    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&q=80'
  },
  {
    title: '财务数据智能汇总', platform: 'FastGPT', platformColor: '#059669',
    rating: '4.6', views: '4.5K', category: '数据分析',
    desc: '多账户数据整合，自动对账，生成财务分析报告',
    author: 'Zhao Yan',
    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&q=80'
  },
  {
    title: '简历筛选自动化', platform: 'n8n', platformColor: '#EA4B71',
    rating: '4.5', views: '4.2K', category: 'HR自动化',
    desc: 'AI 智能匹配岗位要求，自动评分排序，发送面试邀请',
    author: 'Nina Zhao',
    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=300&q=80'
  },
  {
    title: '竞品监控与分析', platform: 'Dify', platformColor: '#7C3AED',
    rating: '4.6', views: '3.9K', category: '数据分析',
    desc: '自动追踪竞品动态，AI 分析策略变化，生成洞察报告',
    author: 'Chen Jing',
    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=300&q=80'
  }
]
</script>

<style scoped>
.section-hot {
  padding: 100px 0;
  background: linear-gradient(180deg, #fafbff 0%, #f3f0ff 50%, #eef2ff 100%);
  overflow: hidden;
  position: relative;
}
.hot-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 80px;
}
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  color: #6366F1;
  font-weight: 500;
  margin-bottom: 20px;
}
.badge-dot {
  width: 6px; height: 6px;
  background: #6366F1; border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.section-title {
  font-size: 48px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.gradient-text {
  background: linear-gradient(135deg, #6366F1 0%, #8b5cf6 50%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-desc {
  font-size: 17px;
  color: #6B7280;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 滚动轨道 */
.scroll-track-wrapper {
  overflow: hidden;
  margin-bottom: 20px;
  mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
}
.scroll-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 12px 0;
}
.track-forward {
  animation: scrollForward 40s linear infinite;
}
.track-forward:hover {
  animation-play-state: paused;
}
.track-reverse {
  animation: scrollReverse 40s linear infinite;
}
.track-reverse:hover {
  animation-play-state: paused;
}
@keyframes scrollForward {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes scrollReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* 工作流卡片 */
.workflow-card {
  width: 290px;
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(99,102,241,0.08);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex-shrink: 0;
}
.workflow-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.2);
}

/* 封面图 */
.card-cover {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.workflow-card:hover .cover-img { transform: scale(1.05); }
.cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5));
}
.platform-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: white;
}
.view-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

/* 卡片信息 */
.card-info { padding: 16px; }
.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.card-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  flex: 1;
  margin-right: 8px;
}
.card-rating {
  font-size: 12px;
  font-weight: 600;
  color: #F59E0B;
  white-space: nowrap;
}
.card-desc {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 12px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.author-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.author-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.author-name { font-size: 12px; color: #6B7280; }
.card-category {
  font-size: 11px;
  padding: 2px 8px;
  background: #F3F4F6;
  border-radius: 100px;
  color: #6B7280;
}

/* 悬停操作 */
.card-hover-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, white 60%, transparent);
  padding: 20px 16px 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}
.card-hover-actions.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.action-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.action-btn.primary {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.action-btn.primary:hover {
  box-shadow: 0 8px 24px rgba(99,102,241,0.55);
  transform: translateY(-2px) scale(1.04);
}
.action-btn.primary:active {
  transform: scale(0.96);
}
.action-btn.secondary {
  background: rgba(255,255,255,0.9);
  color: #374151;
  border: 1px solid rgba(0,0,0,0.08);
}
.action-btn.secondary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

/* 标题自适应 */
.section-title {
  font-size: clamp(1.75rem, 5vw, 3rem);
}
.section-desc {
  font-size: clamp(0.875rem, 2vw, 1.0625rem);
}

/* 平板（≤1024px）*/
@media (max-width: 1024px) {
  .section-hot { padding: 4rem 0; }
  .hot-header { padding: 0 2rem; }
  .workflow-card { width: 260px; }
}

/* 手机横屏 / 小平板（≤768px）*/
@media (max-width: 768px) {
  .section-hot { padding: 3rem 0; }
  .hot-header { padding: 0 1rem; margin-bottom: 2rem; }
  .workflow-card { width: 230px; }
  .card-cover { height: 130px; }
  .card-info { padding: 12px; }
  .card-title { font-size: 13px; }
  .card-desc { font-size: 11px; }
  /* 遇屏边渐变缩短 */
  .scroll-track-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  }
}

/* 手机竖屏（≤480px）*/
@media (max-width: 480px) {
  .section-hot { padding: 2.5rem 0; }
  .hot-header { padding: 0 0.75rem; margin-bottom: 1.5rem; }
  .workflow-card { width: 200px; }
  .card-cover { height: 110px; }
  .card-info { padding: 10px; }
  .card-title { font-size: 12px; }
  .card-desc { font-size: 10px; margin-bottom: 8px; }
  .card-footer { flex-wrap: wrap; gap: 4px; }
  .author-avatar { width: 20px; height: 20px; }
  .author-name { font-size: 10px; }
  .card-category { font-size: 10px; }
  .platform-chip { font-size: 9px; padding: 2px 7px; }
  .view-count { font-size: 10px; }
  .scroll-track { gap: 12px; }
  .scroll-track-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
  }
}

/* 极小屏（≤360px）*/
@media (max-width: 360px) {
  .workflow-card { width: 175px; }
  .card-cover { height: 95px; }
  .card-info { padding: 8px; }
  .card-title { font-size: 11px; }
}
</style>