From 06ad58a9b3fbb8feff0a544eedb2cd227a61b5b7 Mon Sep 17 00:00:00 2001 From: jeremygan2021 Date: Mon, 13 Oct 2025 15:26:54 +0800 Subject: [PATCH] readme --- README.md | 191 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..53e9c5f --- /dev/null +++ b/README.md @@ -0,0 +1,191 @@ +# 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 或更高版本 + +### 安装步骤 + +1. **克隆项目** + +```bash +git clone <项目仓库地址> +cd quant-speed +``` + +2. **安装依赖** + +```bash +npm install +``` + +### 开发模式启动 + +```bash +npm start +``` + +启动后，应用将在 http://localhost:3000 上运行。开发服务器支持热重载，修改代码后浏览器会自动刷新。 + +### 构建生产版本 + +```bash +npm run build +``` + +构建产物将生成在 `build` 目录中，可用于部署到生产环境。 + +### 运行测试 + +```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. **静态网站托管** + +将 `build` 目录中的内容部署到任何静态网站托管服务，如： +- GitHub Pages +- Netlify +- Vercel +- AWS S3 + CloudFront + +2. **自定义服务器部署** + +可以使用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) \ No newline at end of file