做了一个离线健身动作库——Exercises Player
去健身房的时候，经常遇到这种情况：想练某个部位，但不知道该做什么动作；或者看到一个动作名字，不知道标准姿势是什么样的。虽然有各种健身 App，但大多需要付费会员，而且动作库质量参差不齐。
所以我做了 Exercises Player——一个离线的健身动作库应用，收录 1300+ 动作，支持按身体部位、器械、目标肌肉多维度查找，还能创建自定义训练计划。
在线体验：exercises-player.vercel.app 源码地址：github.com/boby4/exercises-player
为什么叫「离线」动作库
所有动作数据都打包在应用里，不需要联网请求。这意味着：
- 加载快：打开就能用，不用等接口返回
- 省流量：健身房信号差也不怕
- 稳定：不依赖第三方 API，不会因为接口挂了就用不了
数据来源是 ExerciseDB 数据集，我做了清洗和中文翻译，最终得到 1324 个高质量动作，每个动作都包含 GIF 演示图、目标肌肉、器械要求等信息。
功能一览
首页：快速找到想练的
- 搜索：支持关键词实时搜索，比如搜「哑铃弯举」直接出结果
- 多维度筛选：按身体部位（上臂、大腿、背部...）、器械（自重、哑铃、杠铃...）筛选
- 今日推荐：每天推荐几个动作，不知道练什么的时候看看推荐
- 统计信息：快速了解动作库的规模
动作详情：看懂每个动作
- GIF 动画演示，直观看到动作过程
- 目标肌肉、辅助肌肉、器械类型标注
- 中文指令说明（支持 6 种语言切换）
训练计划：规划你的训练
- 创建自定义训练计划，支持 Push/Pull/Leg/Upper/Lower/Full Body 等常见分化
- 弹窗式添加/管理动作，操作流畅
- 计划完成状态追踪，知道自己练了哪些
- 计划详情页，一目了然今天的训练内容
训练模式：开练！
- 倒计时训练计时器
- 训练过程中显示 GIF 动作图，随时对照
- 动作缩略图导航条，快速切换
- 训练记录自动保存
个人中心
- 收藏喜欢的动作，方便下次找到
- 训练历史记录
- 训练统计数据
技术选型：Taro 4 + Vue 3
| 分类 | 技术 | 选型理由 |
|---|---|---|
| 框架 | Taro 4.2.0 | 一套代码多端运行（H5 + 微信小程序） |
| UI 库 | Vue 3 | Composition API 写起来更舒服 |
| 状态管理 | Pinia | Vue 官方推荐，轻量好用 |
| 构建工具 | Vite 4 | 快，热更新体验好 |
| 样式 | UnoCSS + SCSS | 原子化 CSS + 传统预处理器结合 |
| 数据 | 离线 JSON | ExerciseDB 数据集清洗后内置 |
选 Taro 的核心原因是多端。我希望这个应用既能在浏览器里用（H5），也能在微信里用（小程序）。Taro 一套代码编译两端的方案，对个人项目来说性价比很高。
UnoCSS + SCSS 的组合也值得一提。UnoCSS 负责日常布局的原子化类名（flex、p-4、text-center），SCSS 负责复杂的样式逻辑（渐变、动画、嵌套）。两者互补，写起来很顺手。
数据量：1300+ 动作意味着什么
1324 个动作，覆盖了：
- 身体部位：上臂 292 个、大腿 227 个、背部 203 个、胸部 133 个、肩部 117 个...
- 器械类型：自重 325 个、哑铃 294 个、绳索 157 个、杠铃 140 个...
- 6 种语言：中文、英文、日语、韩语等指令说明
这个数据量基本覆盖了健身房里能用到的绝大多数动作。不管你是新手还是老手，都能找到需要的。
开发中踩的坑
分享几个开发过程中遇到的问题：
GIF 图片加载：1300+ 个 GIF 如果全部预加载，首屏会非常慢。最后的方案是按需加载——只有在动作详情页才加载对应的 GIF，列表页只展示文字信息。
离线数据打包：JSON 数据直接放在项目里会导致构建产物很大。我做了数据压缩和按需加载，只在进入对应页面时才解析需要的数据。
Taro 的跨端兼容：H5 和小程序的 API 有差异，比如导航、存储等。Taro 虽然抹平了大部分差异，但细节上还是需要单独处理。
后续想法
- 训练社区：分享自己的训练计划，参考别人的方案
- AI 训练建议：根据你的身体情况和目标，AI 生成训练计划
- 动作视频：用视频替代 GIF，展示更清晰
- 体重记录：追踪体重变化曲线
写在最后
健身这件事，动作标准比重量重要。有一个靠谱的动作库随时查阅，比盲目跟着视频练高效得多。
这个项目的代码和数据都是开源的，如果你也在健身，或者对 Taro 跨端开发感兴趣，欢迎来玩。