- 📊 营养追踪 - 记录每日饮食,自动计算热量和营养素(碳水/蛋白质/脂肪)
- ⚖️ 体重管理 - 追踪体重变化,可视化展示减脂进度
- 🎯 目标设定 - 根据身体数据自动计算每日营养目标
- 🍎 食物数据库 - 内置 40+ 种常见减脂食物营养数据
- 🌙 暗色模式 - 支持明暗主题切换,保护眼睛
- 📱 移动优先 - 响应式设计,完美支持手机浏览器
- 🔒 本地存储 - 数据存储在浏览器,不上传服务器
- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0
# 克隆项目
git clone https://github.com/Debugooo/shiba-fitness.git
# 进入目录
cd shiba-fitness
# 安装依赖
npm install
# 启动开发服务器
npm run dev打开浏览器访问 http://localhost:3000
# 安装依赖
npm install
# 启动开发服务器(热重载)
npm run dev
# 代码检查
npm run lint# 构建生产版本
npm run build
# 启动生产服务器
npm run start生产服务器默认运行在 http://localhost:3000
# 构建镜像
docker build -t shiba-fitness .
# 运行容器
docker run -p 3000:3000 shiba-fitness- 点击上方按钮
- 登录 GitHub 授权
- 等待部署完成(约2分钟)
进入应用后,首页展示:
- 今日剩余热量 - 可摄入的热量余额
- 营养进度环 - 碳水/蛋白质/脂肪的摄入进度
- 减脂进度条 - 距离目标体重的完成百分比
- 体重趋势图 - 最近7天的体重变化曲线
- 点击底部导航栏「饮食」
- 搜索食物或按分类筛选
- 点击 ➕ 按钮添加到今日记录
- 系统自动计算总热量和营养素
支持的食物分类:
- 主食(燕麦、糙米、红薯等)
- 蛋白质(鸡胸肉、鸡蛋、虾仁等)
- 蔬菜(西兰花、菠菜、生菜等)
- 水果(苹果、香蕉、蓝莓等)
- 饮品(黑咖啡、无糖豆浆等)
- 零食(海苔、魔芋丝等)
- 点击底部导航栏「记录」
- 输入今日体重(支持小数)
- 点击「记录」按钮保存
- 查看体重趋势图表和历史记录
点击底部导航栏「我的」:
- 设置昵称、身高、年龄
- 设置当前体重和目标体重
- 切换暗色模式
💡 修改身体数据后,营养目标会自动重新计算
| 技术 | 版本 | 用途 |
|---|---|---|
| Next.js | 14.2.3 | React 全栈框架 |
| TypeScript | 5.4.5 | 类型安全 |
| Tailwind CSS | 3.4.3 | 原子化 CSS |
| Recharts | 2.12.7 | 数据可视化 |
| Lucide React | 0.378.0 | 图标库 |
| next-themes | 0.3.0 | 主题切换 |
shiba-fitness/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # 根布局
│ │ ├── page.tsx # 首页
│ │ ├── globals.css # 全局样式
│ │ ├── diet/ # 饮食记录页
│ │ │ └── page.tsx
│ │ ├── record/ # 体重记录页
│ │ │ └── page.tsx
│ │ ├── plan/ # 减脂计划页
│ │ │ └── page.tsx
│ │ └── profile/ # 个人设置页
│ │ └── page.tsx
│ ├── components/ # React 组件
│ │ ├── ui/
│ │ │ ├── Card.tsx # 卡片组件
│ │ │ ├── Progress.tsx # 进度条组件
│ │ │ └── BottomNav.tsx # 底部导航
│ │ ├── charts/
│ │ │ └── WeightChart.tsx # 体重图表
│ │ └── ThemeProvider.tsx # 主题提供者
│ ├── lib/ # 工具函数
│ │ ├── storage.ts # 本地存储管理
│ │ ├── food-data.ts # 食物营养数据
│ │ └── nutrition.ts # 营养计算工具
│ └── types/ # TypeScript 类型
│ └── index.ts
├── public/ # 静态资源
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.js
编辑 src/lib/food-data.ts:
export const foodData: FoodItem[] = [
// 添加新食物
{
id: '46',
name: '新食物',
calories: 100, // 每100g热量
carbs: 20, // 碳水
protein: 5, // 蛋白质
fat: 2, // 脂肪
category: '蛋白质'
},
// ...
];编辑 src/lib/storage.ts:
const defaultUserProfile: UserProfile = {
name: '',
age: 30,
height: 172,
currentWeight: 90,
targetWeight: 74,
dailyCalories: 1650,
carbs: 135,
protein: 126,
fat: 55,
};所有数据存储在浏览器 localStorage,key 为 shiba-fitness-data。
数据结构:
interface StorageData {
userProfile: UserProfile;
weightRecords: WeightRecord[];
foodRecords: FoodRecord[];
exerciseRecords: ExerciseRecord[];
theme: 'light' | 'dark' | 'system';
}本项目基于 MIT 许可证开源。
MIT License
Copyright (c) 2024 Shiba Fitness
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
如果这个项目对你有帮助,请给一个 ⭐ Star
Made with ❤️ by Debugooo