Quant Speed 量迹AI科技官网项目

这是量迹AI科技（Quant Speed）的官方网站前端项目，基于React开发的单页应用，展示公司的产品、团队、案例和联系信息。网站采用了现代化的UI设计，包含3D模型展示、流畅的动画效果和响应式布局。

项目概述

Quant Speed 是一家专注于推动线下AI变革的科技公司，通过软硬件一体的整体解决方案，让人工智能技术普惠更多人。本项目是该公司的官方展示网站，用于向用户介绍公司产品、团队和成功案例。

技术栈

• 前端框架: React 18
• 状态管理: React Hooks
• 3D渲染: Three.js, @react-three/fiber, @react-three/drei
• 动画效果: Framer Motion
• 样式: CSS (原生样式)
• 构建工具: Create React App

核心功能特性

1. 现代化UI设计

   • 玻璃态导航栏
   • 渐变背景和动态视觉效果
   • 流畅的过渡动画

2. 3D产品展示

   • 交互式3D模型查看
   • 产品部件标注和说明
   • 多模型切换（小量V3、小量mini、小量V2）

3. 全屏滚动体验

   • 分页滚动效果
   • 滚动触发动画
   • 移动端响应式设计

4. 完整的页面结构

   • 英雄区域（Hero Section）
   • 产品展示（Product Section）
   • 团队介绍（Team Section）
   • 成功案例（Case Section）
   • 联系我们（Contact Section）

项目结构

├── build/            # 构建输出目录
├── public/           # 静态资源
│   ├── 3dV2/         # 3D模型文件（V2版本）
│   ├── 3dmimi/       # 3D模型文件（mini版本）
│   ├── 3dmodo/       # 3D模型文件（V3版本）
│   ├── team_image/   # 团队成员照片
│   └── *.mp4/svg     # 视频和SVG资源
├── src/              # 源代码
│   ├── asset/        # 项目资产
│   ├── components/   # React组件
│   │   ├── CaseSection.js       # 案例展示组件
│   │   ├── ContactSection.js    # 联系我们组件
│   │   ├── HeroSection.js       # 英雄区域组件
│   │   ├── Navigation.js        # 导航组件
│   │   ├── ProductSection.js    # 产品展示组件
│   │   └── TeamSection.js       # 团队介绍组件
│   ├── App.js        # 应用主组件
│   ├── App.css       # 应用样式
│   └── index.js      # 应用入口
├── package.json      # 项目配置和依赖
└── README.md         # 项目说明文档

安装与启动

前提条件

• Node.js 14.0 或更高版本
• npm 6.0 或更高版本
• Docker 和 Docker Compose（可选，用于容器化部署）

安装步骤

1. 克隆项目

git clone <项目仓库地址>
cd quant-speed

2. 安装依赖

npm install

开发模式启动

npm start

启动后，应用将在 http://localhost:3000 上运行。开发服务器支持热重载，修改代码后浏览器会自动刷新。

使用 Docker 启动（推荐）

生产环境部署

# 使用 Docker Compose 构建和启动生产环境
docker-compose up --build

应用将在 http://localhost 上运行。

开发环境部署

# 使用 Docker Compose 启动开发环境（支持热重载）
docker-compose -f docker-compose.dev.yml up

应用将在 http://localhost:3000 上运行，支持代码修改后的热重载。

构建生产版本

npm run build

构建产物将生成在 build 目录中，可用于部署到生产环境。

自动化部署

项目包含一个自动化部署脚本 deploy.sh，可以一键完成构建、清理和部署操作：

# 给脚本添加执行权限
chmod +x deploy.sh

# 运行部署脚本
./deploy.sh

该脚本会：

1. 自动构建项目
2. 清理无用文件（如.map文件、.DS_Store等）
3. 将构建结果部署到指定服务器

注意：脚本中使用了密码认证方式进行服务器连接，出于安全考虑，建议在生产环境中使用SSH密钥认证替代密码认证。

运行测试

npm test

开发指南

组件开发

1. 所有组件都放在 src/components/ 目录下
2. 组件命名使用大驼峰命名法（如 ProductSection.js）
3. 每个组件负责一个独立的功能模块

样式说明

• 全局样式在 App.css 中定义
• 组件特定样式可以在组件文件中使用内联样式或单独的CSS文件
• 设计系统使用的主色调为青色系（#00f5d4）

3D模型相关

• 3D模型文件存放在 public/ 目录下对应的子目录中
• 使用Three.js和react-three-fiber库进行3D渲染
• 模型加载使用OBJLoader和MTLLoader

部署指南

构建优化

生产构建已通过Create React App优化，包括：

• 代码压缩和混淆
• 资源哈希命名
• 自动分割代码

部署方式

1. 使用 Docker 部署（推荐）

最简单的部署方式是使用 Docker 和 Docker Compose：

# 构建并启动生产环境容器
docker-compose up --build -d

这将使用 Nginx 服务器部署应用，可通过 http://localhost 访问。

2. 静态网站托管

将 build 目录中的内容部署到任何静态网站托管服务，如：

• GitHub Pages
• Netlify
• Vercel
• AWS S3 + CloudFront

3. 自定义服务器部署

可以使用Nginx等Web服务器部署静态文件：

server {
    listen 80;
    server_name example.com;
    root /path/to/build;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

注意事项

1. 3D模型兼容性

   • 确保浏览器支持WebGL以正确显示3D模型
   • 移动设备上可能需要降低模型质量以提高性能

2. 视频资源

   • 网站使用了自动播放的背景视频，请确保视频文件大小合理
   • 考虑为低带宽环境提供替代方案

3. 响应式设计

   • 网站已适配移动端和桌面端
   • 测试时请在不同尺寸的设备上验证

许可证

© 2023 Quant Speed 量迹AI科技

联系信息

如有任何问题或建议，请联系：

• 邮箱：contact@quantspeed.ai
• 网站：www.quantspeed.ai