Quant-Speed-AI/Quant-Speed_page

Fork 0

Files

jeremygan2021 9f55f4ef75 sh脚本

2025-10-21 16:57:13 +08:00

6.2 KiB

Raw Permalink Blame History

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

核心功能特性

现代化UI设计
- 玻璃态导航栏
- 渐变背景和动态视觉效果
- 流畅的过渡动画
3D产品展示
- 交互式3D模型查看
- 产品部件标注和说明
- 多模型切换（小量V3、小量mini、小量V2）
全屏滚动体验
- 分页滚动效果
- 滚动触发动画
- 移动端响应式设计
完整的页面结构
- 英雄区域（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（可选，用于容器化部署）

安装步骤

克隆项目

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

安装依赖

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

该脚本会：

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

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

运行测试

npm test

开发指南

组件开发

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

样式说明

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

3D模型相关

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

部署指南

构建优化

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

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

部署方式

使用 Docker 部署（推荐）

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

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

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

静态网站托管

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

GitHub Pages
Netlify
Vercel
AWS S3 + CloudFront

自定义服务器部署

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

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

注意事项

3D模型兼容性
- 确保浏览器支持WebGL以正确显示3D模型
- 移动设备上可能需要降低模型质量以提高性能
视频资源
- 网站使用了自动播放的背景视频，请确保视频文件大小合理
- 考虑为低带宽环境提供替代方案
响应式设计
- 网站已适配移动端和桌面端
- 测试时请在不同尺寸的设备上验证

许可证

联系信息

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

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

6.2 KiB Raw Permalink Blame History Unescape Escape