https://autowhisper.xyz/assets/controllers/homepage_controller-a4801227.js

1import { Controller } from "@hotwired/stimulus"
2import { showToast } from "utils/toast"
3
4// 主页交互控制器
5export default class extends Controller {
6  static targets = ["ctaButton", "pricingButton", "backgroundVideo"]
7  static values = { 
8    teamContactMessage: String, 
9    loadingText: String
10  }
11  
12  connect() {
13    console.log("Homepage controller connected")
14    this.setupSmoothScrolling()
15    this.setupButtonAnimations()
16    this.initializeBackgroundVideo()
17  }
18
19  // 初始化背景视频 - 延迟加载以提升页面加载速度
20  initializeBackgroundVideo() {
21    const heroVideo = this.element.querySelector('[data-video-src]')
22
23    if (heroVideo) {
24      // 等待页面加载完成后再加载视频
25      if (document.readyState === 'complete') {
26        this.loadHeroVideo(heroVideo)
27      } else {
28        window.addEventListener('load', () => {
29          // 页面加载完成后再等待1秒，确保关键内容已渲染
30          setTimeout(() => {
31            this.loadHeroVideo(heroVideo)
32          }, 1000)
33        })
34      }
35    }
36  }
37
38  loadHeroVideo(video) {
39    const videoSrc = video.dataset.videoSrc
40    if (!videoSrc) return
41
42    // 设置视频源
43    const source = document.createElement('source')
44    source.src = videoSrc
45    source.type = 'video/mp4'
46    video.appendChild(source)
47
48    // 确保视频属性正确设置
49    video.muted = true
50    video.playsInline = true
51    video.loop = true
52
53    // 加载并播放视频
54    video.load()
55    video.play().catch(error => {
56      console.log('背景视频播放失败:', error)
57    })
58  }
59  
60  // 设置平滑滚动
61  setupSmoothScrolling() {
62    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
63      anchor.addEventListener('click', function (e) {
64        e.preventDefault()
65        const target = document.querySelector(this.getAttribute('href'))
66        if (target) {
67          target.scrollIntoView({
68            behavior: 'smooth',
69            block: 'start'
70          })
71        }
72      })
73    })
74  }
75  
76  // 设置按钮动画
77  setupButtonAnimations() {
78    // 为所有 CTA 按钮添加点击效果
79    document.querySelectorAll('.cta-button, .bg-info-600, .bg-ink-900').forEach(button => {
80      button.addEventListener('click', function(e) {
81        // 添加按钮点击动画
82        this.style.transform = 'scale(0.95)'
83        setTimeout(() => {
84          this.style.transform = 'scale(1)'
85        }, 150)
86      })
87    })
88  }
89  
90  // 团队版销售联系
91  contactSales(event) {
92    event.preventDefault()
93
94    // 文案由服务端通过 data-value 注入（已本地化）
95    const customMessage = event.currentTarget.dataset.homepageSalesMessage
96    showToast('success', customMessage || this.teamContactMessageValue)
97  }
98  
99  // 处理注册按钮点击
100  handleSignup(event) {
101    // 可以在这里添加分析跟踪
102    console.log("User clicked signup button")
103    
104    // 如果需要，可以在这里添加加载状态
105    const button = event.currentTarget
106    const originalText = button.textContent
107
108    // 加载文案由服务端通过 data-value 注入（已本地化）
109    button.textContent = this.loadingTextValue
110    button.style.opacity = "0.8"
111    
112    // 恢复按钮状态（以防导航失败）
113    setTimeout(() => {
114      button.textContent = originalText
115      button.style.opacity = "1"
116    }, 2000)
117  }
118
119}