script.js

// TechStudio - 交互脚本

// 自定义光标效果
const cursor = document.querySelector('.cursor');
const cursorFollower = document.querySelector('.cursor-follower');
const links = document.querySelectorAll('a, button, .tech-item, .project-card');

document.addEventListener('mousemove', (e) => {
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
  
  // 光标跟随效果有轻微延迟，增加平滑感
  setTimeout(() => {
    cursorFollower.style.left = e.clientX + 'px';
    cursorFollower.style.top = e.clientY + 'px';
  }, 50);
});

// 鼠标悬停在可点击元素上时的光标效果
links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    cursor.style.transform = 'translate(-50%, -50%) scale(1.5)';
    cursorFollower.style.width = '40px';
    cursorFollower.style.height = '40px';
    cursorFollower.style.borderColor = 'var(--secondary-color)';
  });
  
  link.addEventListener('mouseleave', () => {
    cursor.style.transform = 'translate(-50%, -50%) scale(1)';
    cursorFollower.style.width = '30px';
    cursorFollower.style.height = '30px';
    cursorFollower.style.borderColor = 'var(--primary-color)';
  });
});

// 滚动时导航栏效果
const header = document.querySelector('header');
window.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

// 滚动动画效果
function initScrollAnimations() {
  const elements = document.querySelectorAll('[data-aos]');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('aos-animate');
      } else {
        // 可选：离开视口时移除动画类
        // entry.target.classList.remove('aos-animate');
      }
    });
  }, {
    threshold: 0.1 // 元素10%进入视口时触发
  });
  
  elements.forEach(element => {
    observer.observe(element);
  });
}

// 技术栈项目悬停效果
function initTechItemsEffect() {
  const techItems = document.querySelectorAll('.tech-item');
  
  techItems.forEach(item => {
    item.addEventListener('mouseenter', () => {
      const tech = item.getAttribute('data-tech');
      item.innerHTML = `<span>${tech}</span>`;
      item.style.transform = 'translateY(-5px)';
    });
    
    item.addEventListener('mouseleave', () => {
      const tech = item.getAttribute('data-tech');
      item.innerHTML = tech;
      item.style.transform = 'translateY(0)';
    });
  });
}

// Three.js 3D背景效果
function initThreeBackground() {
  const canvas = document.getElementById('hero-canvas');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true,
    antialias: true
  });
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // 创建粒子系统
  const particlesGeometry = new THREE.BufferGeometry();
  const particlesCount = 1500;
  
  const posArray = new Float32Array(particlesCount * 3);
  const colorsArray = new Float32Array(particlesCount * 3);
  
  // 设置粒子位置和颜色
  for (let i = 0; i < particlesCount * 3; i += 3) {
    // 位置 - 创建一个分布在3D空间的点云
    posArray[i] = (Math.random() - 0.5) * 5;
    posArray[i + 1] = (Math.random() - 0.5) * 5;
    posArray[i + 2] = (Math.random() - 0.5) * 5;
    
    // 颜色 - 主要使用蓝色和青色色调
    colorsArray[i] = Math.random() * 0.2;      // R - 较低
    colorsArray[i + 1] = Math.random() * 0.5;  // G - 中等
    colorsArray[i + 2] = Math.random() * 0.8 + 0.2; // B - 较高
  }
  
  particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
  particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorsArray, 3));
  
  // 粒子材质
  const particlesMaterial = new THREE.PointsMaterial({
    size: 0.02,
    vertexColors: true,
    transparent: true,
    opacity: 0.8,
    sizeAttenuation: true
  });
  
  // 创建粒子系统
  const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
  scene.add(particlesMesh);
  
  // 设置相机位置
  camera.position.z = 2;
  
  // 鼠标移动效果
  let mouseX = 0;
  let mouseY = 0;
  
  document.addEventListener('mousemove', (event) => {
    mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
  });
  
  // 动画循环
  const animate = () => {
    requestAnimationFrame(animate);
    
    // 粒子系统旋转
    particlesMesh.rotation.x += 0.0005;
    particlesMesh.rotation.y += 0.0005;
    
    // 根据鼠标位置调整粒子系统
    particlesMesh.rotation.x += mouseY * 0.0005;
    particlesMesh.rotation.y += mouseX * 0.0005;
    
    renderer.render(scene, camera);
  };
  
  animate();
  
  // 窗口大小调整
  window.addEventListener('resize', () => {
    // 更新相机
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  });
}

// 表单提交处理
function initContactForm() {
  const form = document.querySelector('.contact-form');
  
  if (form) {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      // 获取表单数据
      const formData = new FormData(form);
      const formDataObj = {};
      
      formData.forEach((value, key) => {
        formDataObj[key] = value;
      });
      
      // 显示加载状态
      const submitBtn = form.querySelector('.submit-btn');
      const originalText = submitBtn.textContent;
      submitBtn.textContent = '提交中...';
      submitBtn.disabled = true;
      
      try {
        // 发送数据到后端API
        const response = await fetch('/api/contact', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formDataObj)
        });
        
        const result = await response.json();
        
        if (result.success) {
          // 显示成功消息
          submitBtn.textContent = '提交成功！';
          submitBtn.style.backgroundColor = 'var(--secondary-color)';
          
          // 创建成功提示元素
          const successMessage = document.createElement('div');
          successMessage.className = 'form-success-message';
          successMessage.textContent = result.message || '您的请求已成功提交，我们将尽快与您联系！';
          
          // 插入到表单后面
          form.parentNode.insertBefore(successMessage, form.nextSibling);
          
          // 重置表单
          form.reset();
          
          // 3秒后移除成功消息
          setTimeout(() => {
            successMessage.remove();
          }, 5000);
        } else {
          // 显示错误消息
          submitBtn.textContent = '提交失败';
          submitBtn.style.backgroundColor = '#e53e3e';
          
          // 创建错误提示元素
          const errorMessage = document.createElement('div');
          errorMessage.className = 'form-error-message';
          errorMessage.textContent = result.message || '提交失败，请稍后再试';
          
          // 插入到表单后面
          form.parentNode.insertBefore(errorMessage, form.nextSibling);
          
          // 3秒后移除错误消息
          setTimeout(() => {
            errorMessage.remove();
          }, 5000);
        }
      } catch (error) {
        console.error('提交表单时出错:', error);
        
        // 显示错误消息
        submitBtn.textContent = '提交失败';
        submitBtn.style.backgroundColor = '#e53e3e';
        
        // 创建错误提示元素
        const errorMessage = document.createElement('div');
        errorMessage.className = 'form-error-message';
        errorMessage.textContent = '网络错误，请稍后再试';
        
        // 插入到表单后面
        form.parentNode.insertBefore(errorMessage, form.nextSibling);
        
        // 3秒后移除错误消息
        setTimeout(() => {
          errorMessage.remove();
        }, 5000);
      }
      
      // 恢复按钮状态
      setTimeout(() => {
        submitBtn.textContent = originalText;
        submitBtn.style.backgroundColor = 'var(--primary-color)';
        submitBtn.disabled = false;
      }, 3000);
    });
  }
}

// 平滑滚动到锚点
function initSmoothScroll() {
  const links = document.querySelectorAll('a[href^="#"]');
  
  links.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      
      const targetId = link.getAttribute('href');
      if (targetId === '#') return;
      
      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        // 计算目标位置，考虑固定导航栏的高度
        const headerHeight = document.querySelector('header').offsetHeight;
        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
        
        // 使用平滑滚动
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
      }
    });
  });
}

// 文字打字效果
function initTypingEffect() {
  const subtitle = document.querySelector('.subtitle');
  if (!subtitle) return;
  
  const text = subtitle.textContent;
  subtitle.textContent = '';
  
  let i = 0;
  const typeInterval = setInterval(() => {
    if (i < text.length) {
      subtitle.textContent += text.charAt(i);
      i++;
    } else {
      clearInterval(typeInterval);
    }
  }, 50);
}

// 页面加载完成后初始化所有功能
window.addEventListener('DOMContentLoaded', () => {
  // 初始化Three.js背景
  initThreeBackground();
  
  // 初始化滚动动画
  initScrollAnimations();
  
  // 初始化技术栈项目效果
  initTechItemsEffect();
  
  // 初始化联系表单
  initContactForm();
  
  // 初始化平滑滚动
  initSmoothScroll();
  
  // 初始化打字效果
  initTypingEffect();
});