242 lines
6.2 KiB
Markdown
242 lines
6.2 KiB
Markdown
# 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) |