# 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. **克隆项目**

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

2. **安装依赖**

```bash
npm install
```

### 开发模式启动

```bash
npm start
```

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

### 使用 Docker 启动（推荐）

#### 生产环境部署

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

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

#### 开发环境部署

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

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

### 构建生产版本

```bash
npm run build
```

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

### 自动化部署

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

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

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

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

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

### 运行测试

```bash
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：

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

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

2. **静态网站托管**

将 `build` 目录中的内容部署到任何静态网站托管服务，如：
- GitHub Pages
- Netlify
- Vercel
- AWS S3 + CloudFront

3. **自定义服务器部署**

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

```nginx
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](mailto:contact@quantspeed.ai)
- 网站：[www.quantspeed.ai](http://www.quantspeed.ai)