MotionAI (智动AI) - 智能动作分析平台

一个基于React + Vite的智能运动动作分析平台Mock版本，支持多语言（中英文），提供完整的用户交互界面。

功能特性

🌐 全球化支持

• 完整的中英文双语支持
• 一键切换语言
• 本地化存储用户语言偏好

📹 录制与分析

• 多运动项目支持（跑步、篮球、网球、高尔夫等）
• 实时录制模拟
• 实时分析反馈
• 视频上传功能

📊 数据可视化

• 历史记录管理
• 数据报告生成
• 趋势图表展示（Chart.js）
• 得分分布分析

🎯 智能分析

• 动作评分系统
• 关键指标分析
• 个性化改进建议
• 问题点标注

技术栈

• 前端框架: React 18
• 构建工具: Vite 5
• 路由: React Router v6
• 图表: Chart.js + react-chartjs-2
• 样式: 自定义CSS，响应式设计
• 图标: Font Awesome 6.4.0
• 架构: 单页应用 (SPA)

项目结构

motion-ai/
├── index.html              # HTML入口
├── vite.config.js          # Vite配置
├── package.json            # 项目配置
├── src/
│   ├── main.jsx           # React入口
│   ├── App.jsx            # 主应用组件
│   ├── components/        # 组件目录
│   │   ├── Navbar.jsx    # 导航栏
│   │   └── AnalysisResult.jsx  # 分析结果模态框
│   ├── pages/            # 页面组件
│   │   ├── Home.jsx      # 首页
│   │   ├── Record.jsx    # 录制分析
│   │   ├── History.jsx   # 历史记录
│   │   └── Reports.jsx   # 数据报告
│   ├── contexts/         # Context API
│   │   └── I18nContext.jsx  # 国际化Context
│   ├── utils/           # 工具函数
│   │   └── mockData.js   # Mock数据
│   └── styles/          # 样式文件
│       └── main.css     # 主样式
└── README.md            # 项目说明

快速开始

安装依赖

npm install

开发模式

npm run dev

开发服务器会在 http://localhost:8000 启动，并自动打开浏览器。

构建生产版本

npm run build

构建产物会在 dist/ 目录。

预览生产构建

npm run preview

使用说明

导航

• 首页: 查看平台概览和核心功能
• 录制分析: 选择运动项目并开始录制/分析
• 历史记录: 查看所有历史分析记录
• 数据报告: 查看数据统计和趋势分析

录制分析流程

1. 进入"录制分析"页面
2. 选择运动项目（跑步、篮球、网球、高尔夫）
3. 点击"开始录制"按钮
4. 系统会模拟录制过程并实时显示分析数据
5. 录制完成后自动进行分析
6. 查看详细分析结果

语言切换

点击导航栏右上角的语言切换按钮，可在中文和英文之间切换。

核心功能模块

1. 首页 (Home)

• 平台介绍
• 核心功能展示
• 支持的运动项目
• 统计数据展示

2. 录制分析 (Record)

• 运动项目选择
• 视频预览区域（Mock）
• 实时分析面板
• 录制控制按钮

3. 历史记录 (History)

• 记录列表展示
• 按运动项目筛选
• 按时间筛选
• 查看详细结果

4. 数据报告 (Reports)

• 数据摘要卡片
• 趋势分析图表
• 得分分布图表
• 详细数据表格

Mock数据说明

所有数据都是模拟数据，包括：

• 历史记录数据
• 分析结果数据
• 图表数据
• 实时分析指标

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge

未来扩展方向

• 真实视频处理
• 后端API集成
• 用户认证系统
• 数据持久化
• 更多运动项目支持
• 移动端适配优化
• 3D可视化
• 实时视频流处理

开发说明

添加新语言

在 js/i18n.js 的 translations 对象中添加新的语言翻译。

添加新运动项目

1. 在 js/mockData.js 的 getAnalysisResult 函数中添加新项目
2. 在 HTML 中添加对应的运动卡片
3. 更新语言文件中的运动名称

自定义样式

修改 styles/main.css 中的 CSS 变量来调整主题颜色。

许可证

本项目为演示项目，仅供学习和参考使用。

联系方式

如有问题或建议，欢迎反馈。

---

MotionAI (智动AI) - 让每一次训练都更精准 🚀