「我的项目」NextRep 2.0 | 开源健身记录APP

1. NextRep 的困境#

读研的生活总是很枯燥的，只能靠健身缓解身心的疲劳吧，过去的2个半月的时间里，我一直在使用 NextRep 来记录我的日常健身，然后在实际使用中发现了许多问题，后续也不断地修复bug以及改进小细节。

但是直到我开始思考，作为一个纯 vibe coding 的产品，后续随着功能的堆叠，如何才能保持项目的干净整洁呢？好在后端的功能并不复杂，但前端似乎正朝着屎山的方向狂奔，所以是时候做出重大决策了，我要对整个前端进行重构，实现模块化和标准化，为后续的更新升级打好基础。

最让我头疼的就是哪些自定义组件了，一开始在开发的时候为了深度的自定义品牌风格，我设计了大量的自定义组件，但随着页面功能的丰富，这些复杂而难以复用的自定义组件简直是大坑，于是我觉得全面转向标准化组件库，引入了我非常喜欢的shadcn的react native类似物：React Native Reusables作为核心组件库。

2. 全新的组件与配色#

在引入组件库之前，那些靠 AI “手搓“的组件确实很独特，但维护起来真的是非常麻烦，各种圆角、阴影的细节统一，还经常有各种各样的显示bug。每次想改个小样式都要浪费好多tokens，想复用现有的组件也十分的麻烦。于是我这次决心引入 React Native Reusables，彻底将组件标准化。

我非常喜欢shadcn所展现出的设计风格，克制简约的美感，而 React Native Reusables 把 shadcn/ui 那套设计语言搬到了 React Native 上，底层基于 @rn-primitives 构建，指挥 codex 配着 NativeWind 和 Tailwind CSS 写起来特别顺畅。而且自定义程度很高，所有代码都是直接复制到你项目里的，完全可控，想怎么改怎么改。

配色系统也顺手做了重构。以前颜色散落在各个文件里，magic number 满天飞，换个主题色还得全局搜索替换。现在专门写了 themeColors.ts，品牌色和语义化颜色分开管，更便于深浅色模式适配，以及未来可能会添加的主题色更换功能，不过目前主色调还是那个充满活力的橙色（#FF6B2C），原本是绿色与橙色作为主题色，但实际效果不佳，配色复杂了些，于是干脆只保留了橙色。

另外把 Lucide 图标库也全面整合进来了。之前用的图标来源太多了，现在统一用 lucide-react-native，不仅图标设计深得我心，和整体设计语言也更搭了。

3. 全新的页面设计#

这次重构最大的改进是 AI 教练页面和 Dashboard，之前这两个页面的代码我基本没有干预，结果ai写的一个文件动不动就三四百行，逻辑和 UI 都在同一个文件里，而这次我希望实现页面模块化。

2.0.0版本把 AI 教练页面拆成了多个子组件：AiCoachHeader、CoachInsightCard、CoachPlanSection，每个组件职责单一，代码量控制在一百行以内。主文件 ai-coach.tsx从原来臃肿的 349 行直接缩减到各个模块中，可读性提升了不止一个档次。

Dashboard 也是重灾区，对TrainingOverview.tsx 和 BodyMetricsCard.tsx也都进行了大刀阔斧的重构。以前各种状态管理、数据获取、UI渲染全挤在一起，现在该拆分的拆分，配合 BottomSheetModal统一处理弹窗逻辑，整个交互体验得到了很大提升。

设置页面也做了模块化处理，原来的 settings.tsx 太复杂，现在拆分成了ProfileSettings、AiConfigSettings、AppearanceSettings、DataManagementSettings 和 TrainingSettings 五个独立模块。

视觉上也做了不少优化：统一了圆角规范、给背景加上了点阵纹理（dottedbackground）、重新设计了 TabBar的图标和动画。整体观感更现代，也更有品牌识别度。

4. 更详细的动作分析#

数据可视化一直是我很在意的部分，毕竟健身最有成就感的时刻就是看着自己的数据曲线往上涨。这次重构也重点更新了 Dashboard 的分析功能。

ExerciseAnalytics 组件现在能更清晰地展示每个动作的历史数据：最大重量、训练容量、频率分布等等。之前这些图表挤在一起，看起来很乱，现在每个指标都有独立的卡片，还可以展开查看详细记录。

ExerciseDetailModal 也做了优化，现在可以更直观地看到某个动作的完整训练历史，包括每次训练的组数、次数、重量，甚至可以标记出你的突破记录（PR）。这种成就感的可视化真的很爽，看着自己重量突破的进步轨迹，训练的动力又上来了。

身体指标方面，BodyMetricsCard现在支持更灵活的数据录入和趋势查看。体重、体脂率、围度数据都可以按月查看变化曲线，配合训练数据一起看，能更科学地调整训练计划。

5. 未来还会更新什么#

说实话，这次重构之后代码库整洁了许多，后续加新功能也不用提心吊胆怕牵一发而动全身。但要其实我个人觉得，NextRep 虽然目前已经足够我个人使用，但还远远不是完成品。

首先是 iOS 平台的适配，目前主要在 Android 上跑，iOS虽然配置都准备好了，但还没在真机上完整测试过。毕竟手里没iPhone，这事儿得等有条件了再说。

然后是 AI 功能的深化。现在的 AI 教练只是根据你的状态给个训练建议，未来想做得更智能一些：比如分析你的训练数据，提醒你哪些肌群练得少了，哪些动作该加重量了，甚至可以基于历史数据预测你的进步空间。当然，这些都得在保持本地优先的前提下，数据安全和隐私永远是第一位的。

还有社交功能的可能性。虽然定位是本地优先，但不代表完全封闭。可以考虑做个可选的分享功能，让用户可以导出自己的训练总结到社交平台。

数据分析方面也还有很大的优化空间。训练负荷的科学量化、疲劳度监测、周期化训练计划，这些都是健身爱好者很关心的进阶功能。目前的统计还比较基础，等我从健身小白蜕变后再考虑这些复杂功能吧。

总之，NextRep 对我来说不只是个健身记录工具，更像是一个长期的项目。它会随着我的训练经验增长而不断进化，也会在一次次的代码重构中变得更成熟。

如果你也在健身，欢迎来 GitHub看看：Liebesfreud/NextRep。项目是 MIT 协议，随便用，有想法也欢迎提 Issue 或者 PR。