# 健身学习可视化追踪系统
## 项目概述
一个个人成长可视化平台，记录并展示健身和学习数据，让成长轨迹一目了然。
**核心理念：** 一切可视化 —— 大脑看不清数据就会焦虑，可视化让进步看得见。
---
## 技术栈
| 层级 | 技术 | 说明 |
|------|------|------|
| 前端 | Next.js 14 + TypeScript | React 框架，App Router |
| 样式 | Tailwind CSS + shadcn/ui | 现代化 UI 组件库 |
| 图表 | Recharts / Chart.js | 数据可视化 |
| 后端 | Next.js API Routes | 轻量级后端 |
| 数据库 | SQLite / PostgreSQL | 数据持久化 |
| ORM | Prisma | 数据库操作 |
| 部署 | Vercel / 自建服务器 | 上线部署 |
---
## 功能模块
### 1. 健身追踪模块
#### 1.1 跑步记录
- 记录每次跑步：日期、距离(km)、时长(分钟)、配速、卡路里
- 可视化展示：
- 周/月/年跑步里程趋势图
- 配速变化曲线
- 累计里程统计卡片
- 跑步日历热力图
#### 1.2 力量训练
- 记录每次训练：部位、动作、组数、重量、次数
- 可视化展示：
- 各部位训练频次统计
- 重量进步曲线（如卧推 60kg → 80kg）
- 训练容量趋势
#### 1.3 身体数据
- 记录：体重、体脂率、胸围、臂围等
- 可视化：身体指标变化曲线
### 2. 学习追踪模块
#### 2.1 学习记录
- 记录每次学习：日期、科目/技能、学习时长、学习内容摘要
- 支持标签分类：编程、英语、专业课等
#### 2.2 可视化展示
- 学习时长周/月统计
- 各科目时间分配饼图
- 学习 streak（连续学习天数）
- 知识积累时间线
### 3. 综合仪表盘
- 今日概览：今日运动、学习时长
- 本周目标完成进度条
- 近期趋势图表
- 成就徽章系统
---
## 数据库设计
### 数据模型
```prisma
// schema.prisma
model User {
id String @id @default(uuid())
name String
createdAt DateTime @default(now())
runs Run[]
workouts Workout[]
bodyStats BodyStat[]
studies Study[]
}
model Run {
id String @id @default(uuid())
date DateTime
distance Float // km
duration Int // minutes
pace Float // min/km
calories Int?
note String?
userId String
user User @relation(fields: [userId], references: [id])
}
model Workout {
id String @id @default(uuid())
date DateTime
bodyPart String // 胸部、背部、腿部等
exercises Json // [{name: "卧推", sets: 4, weight: 60, reps: 10}]
duration Int? // minutes
userId String
user User @relation(fields: [userId], references: [id])
}
model BodyStat {
id String @id @default(uuid())
date DateTime
weight Float? // kg
bodyFat Float? // %
chest Float? // cm
arm Float? // cm
waist Float? // cm
userId String
user User @relation(fields: [userId], references: [id])
}
model Study {
id String @id @default(uuid())
date DateTime
subject String // 编程、英语、专业课
duration Int // minutes
content String? // 学习内容摘要
tags String[] // 标签
userId String
user User @relation(fields: [userId], references: [id])
}
```
---
## 页面结构
```
app/
├── page.tsx # 首页仪表盘
├── layout.tsx # 根布局
├── globals.css # 全局样式
│
├── fitness/
│ ├── page.tsx # 健身总览
│ ├── running/
│ │ ├── page.tsx # 跑步记录列表
│ │ └── new/page.tsx # 新增跑步记录
│ ├── workout/
│ │ ├── page.tsx # 力量训练记录
│ │ └── new/page.tsx # 新增训练记录
│ └── body/
│ ├── page.tsx # 身体数据
│ └── new/page.tsx # 记录身体数据
│
├── study/
│ ├── page.tsx # 学习总览
│ ├── new/page.tsx # 新增学习记录
│ └── subjects/
│ └── [subject]/page.tsx # 单科详情
│
├── api/
│ ├── runs/route.ts # 跑步 API
│ ├── workouts/route.ts # 训练 API
│ ├── body-stats/route.ts # 身体数据 API
│ └── studies/route.ts # 学习 API
│
└── components/
├── ui/ # shadcn 组件
├── charts/ # 图表组件
│ ├── RunningChart.tsx
│ ├── WorkoutChart.tsx
│ ├── StudyChart.tsx
│ └── CalendarHeatmap.tsx
└── forms/ # 表单组件
├── RunForm.tsx
├── WorkoutForm.tsx
└── StudyForm.tsx
```
---
## 核心组件实现
### 1. 跑步趋势图组件
```tsx
// components/charts/RunningChart.tsx
"use client";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
interface RunData {
date: string;
distance: number;
pace: number;
}
export function RunningChart({ data }: { data: RunData[] }) {
return (
);
}
```
### 2. 学习时长统计组件
```tsx
// components/charts/StudyChart.tsx
"use client";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
interface StudyData {
subject: string;
duration: number;
}
export function StudyChart({ data }: { data: StudyData[] }) {
return (
);
}
```
### 3. 日历热力图组件
```tsx
// components/charts/CalendarHeatmap.tsx
// 使用 react-calendar-heatmap 或自定义实现
// 展示每天的运动/学习强度
```
---
## API 接口设计
### 跑步记录 API
```typescript
// GET /api/runs
// 获取跑步记录列表
// Query: startDate, endDate, limit
// POST /api/runs
// 创建跑步记录
// Body: { date, distance, duration, pace, calories, note }
// GET /api/runs/stats
// 获取跑步统计
// Response: { totalDistance, totalRuns, avgPace, thisWeekDistance }
```
### 学习记录 API
```typescript
// GET /api/studies
// 获取学习记录
// POST /api/studies
// 创建学习记录
// Body: { date, subject, duration, content, tags }
// GET /api/studies/stats
// 获取学习统计
// Response: { totalHours, streakDays, subjectBreakdown }
```
---
## 开发步骤
### Phase 1: 项目初始化
1. 创建 Next.js 项目：`npx create-next-app@latest fitness-tracker --typescript --tailwind --app`
2. 安装依赖：`npm install recharts prisma @prisma/client`
3. 初始化 Prisma：`npx prisma init`
4. 配置数据库连接
### Phase 2: 数据库搭建
1. 编写 schema.prisma 数据模型
2. 运行迁移：`npx prisma migrate dev`
3. 生成客户端：`npx prisma generate`
### Phase 3: 核心功能开发
1. 实现跑步记录 CRUD
2. 实现学习记录 CRUD
3. 实现力量训练记录 CRUD
4. 实现身体数据记录
### Phase 4: 可视化界面
1. 搭建仪表盘首页
2. 实现各模块图表
3. 添加数据录入表单
4. 优化 UI/UX
### Phase 5: 部署上线
1. 构建项目：`npm run build`
2. 部署到 Vercel 或自有服务器
3. 配置域名和 HTTPS
---
## 数据录入示例
### 跑步记录
```json
{
"date": "2026-04-23",
"distance": 3.0,
"duration": 18,
"pace": 6.0,
"calories": 240,
"note": "傍晚跑步，状态不错"
}
```
### 学习记录
```json
{
"date": "2026-04-23",
"subject": "编程",
"duration": 120,
"content": "学习了 Next.js 路由和数据获取",
"tags": ["Next.js", "React", "前端"]
}
```
### 力量训练
```json
{
"date": "2026-04-23",
"bodyPart": "胸部",
"exercises": [
{ "name": "卧推", "sets": 4, "weight": 60, "reps": 10 },
{ "name": "上斜哑铃", "sets": 3, "weight": 20, "reps": 12 }
],
"duration": 45
}
```
---
## 参考资源
- [shadcn/ui 组件库](https://ui.shadcn.com/)
- [Recharts 图表库](https://recharts.org/)
- [Prisma ORM](https://www.prisma.io/)
- [Next.js 文档](https://nextjs.org/docs)
---
## 扩展功能（未来）
- [ ] 用户认证系统（多用户支持）
- [ ] 数据导入导出（CSV/Excel）
- [ ] 目标设定与提醒
- [ ] 社交分享功能
- [ ] 移动端 App（React Native）
- [ ] AI 训练建议（基于历史数据分析）
---
*文档创建时间：2026-04-24*
*适用技术栈：Next.js 14 + TypeScript + Tailwind + Prisma*