功能详细设计文档：F5 菜品营养拆解
功能优先级：P1（菜谱详情的深化） 文档版本：v1.0 关联 PRD：PRD-v1.0.md
一、概述
营养拆解是 F4（菜谱详情）的深化模块，不作为独立页面存在，而是以营养面板的形式嵌入菜品详情页，并在推荐列表中展示核心营养数据。
核心价值：
- 让用户「看得见」每道菜的营养构成
- 帮助特定人群（健身/减肥/病患）快速筛选菜品
- 支持多菜品营养对比，辅助组合决策
二、营养指标体系
2.1 必填指标
| 指标 | 单位 | 精度 | 展示规则 |
|---|---|---|---|
| 热量 | kcal | 整数 | 必显示，附热量进度条 |
| 蛋白质 | g | 整数 | 详情页必显示 |
| 碳水化合物 | g | 整数 | 详情页必显示 |
| 脂肪 | g | 整数 | 详情页必显示 |
| 膳食纤维 | g | 1位小数 | 详情页显示 |
| 钠含量 | mg | 整数 | 详情页显示（老人/病患高亮） |
2.2 选填指标（按需显示）
| 指标 | 单位 | 适用人群 | 展示规则 |
|---|---|---|---|
| 升糖指数（GI） | 数值 | 糖尿病患者 | 详情页显示，>70 高亮警告 |
| 升糖负荷（GL） | 数值 | 糖尿病患者 | 详情页显示 |
| 饱和脂肪 | g | 心脏病患者 | 详情页显示 |
| 胆固醇 | mg | 心脏病患者 | 详情页显示 |
| 钾 | mg | 肾病患者 | 详情页显示 |
2.3 热量进度条
每道菜品详情页展示热量占每日建议摄入量的比例：
┌──────────────────────────────────────┐
│ 180 kcal / 份 │
│ ████████████░░░░░░░░ 180/2000 │
│ 🟢 轻卡 · 热量占每日建议的 9% │
└──────────────────────────────────────┘
每日建议热量基准：
- 普通成年人：2000kcal（默认）
- 减肥人群：1500kcal（可用户设置）
- 健身增肌：2500kcal（可用户设置）
三、营养解读设计
3.1 营养标签自动生成
根据营养数据自动生成通俗易懂的标签：
| 规则 | 标签 |
|---|---|
| 蛋白质 ≥ 20g/份 | 🥩 高蛋白 |
| 蛋白质 < 5g/份 | 🥬 低蛋白 |
| 脂肪 ≤ 5g/份 | 🟢 低脂 |
| 脂肪 > 15g/份 | 🔴 高脂 |
| 碳水 ≤ 10g/份 | 🟢 低碳水 |
| 碳水 > 30g/份 | 🟡 高碳水 |
| 纤维 ≥ 5g/份 | 🥬 高纤维 |
| 钠 < 300mg/份 | 🟢 低钠 |
| 钠 > 600mg/份 | 🔴 高钠 |
| GI ≤ 55 | 🟢 低GI |
| GI > 70 | 🔴 高GI |
3.2 营养解读文案
每道菜在详情页底部提供 AI 生成的营养解读：
📋 营养解读：
这份番茄炒蛋提供约 180kcal 热量，主要来自脂肪（10g）
和少量碳水（8g）。蛋白质含量适中（12g），适合作为
一道轻量的家常菜。建议搭配一道蔬菜和主食，组成均衡的一餐。
营养解读由模板 + AI 填充生成，非纯 AI 实时生成（节省算力）
四、营养对比功能
4.1 使用场景
用户想比较 2-3 道菜品的营养差异，选择困难时使用。
4.2 交互流程
菜品列表页：
┌────────────────────────────────┐
│ [ ] 番茄炒蛋 🔥180kcal │ ← 勾选
│ [✓] 鸡胸肉沙拉 🔥200kcal │ ← 已选
│ [ ] 西兰花炒肉 🔥250kcal │ ← 勾选
│ [对比 2道] │
└────────────────────────────────┘
点击「对比」→ 进入对比页
4.3 对比页布局
┌──────────────────────────────────────┐
│ ← 返回 营养对比 │
├──────────────────────────────────────┤
│ │
│ ┌───────────┬───────────┐ │
│ │ 番茄炒蛋 │ 鸡胸肉沙拉 │ │
│ │ 180kcal │ 200kcal │ │
│ ├───────────┼───────────┤ │
│ │ 12g 蛋白 │ 42g 蛋白 ↑│ │
│ │ 8g 碳水 │ 6g 碳水 ↓│ │
│ │ 10g 脂肪 │ 5g 脂肪 ↓│ │
│ │ 3g 纤维 │ 6g 纤维 ↑│ │
│ └───────────┴───────────┘ │
│ │
│ 📊 对比结论： │
│ · 蛋白质：鸡胸肉沙拉高出 250% │
│ · 适合场景：健身→选鸡胸肉 │
│ 家常便饭→选番茄炒蛋 │
│ │
└──────────────────────────────────────┘
4.4 对比结论生成规则
对比结论 = 基于数据的客观描述 + 场景建议
示例：
- 蛋白质差距 > 50% → 「XX 的蛋白质含量是 YY 的 N 倍，更适合健身人群」
- 热量差距 > 30% → 「XX 热量更低，更适合减肥人群」
- 无显著差距 → 「两道菜营养相近，可根据口味偏好选择」
五、人群营养高亮
5.1 各人群关注的核心指标
| 人群 | 核心关注指标 | 高亮规则 |
|---|---|---|
| 健身人群 | 蛋白质、碳水类型 | 蛋白质高亮，标注「完美训练后餐」 |
| 减肥人群 | 热量、纤维、饱腹感 | 热量高亮，标注饱腹感星级 |
| 糖尿病患者 | GI、碳水、纤维 | GI 值高亮，>70 红色警告 |
| 高血压患者 | 钠含量 | 钠含量高亮，>600mg 红色警告 |
| 老年人 | 钠、钙、硬度 | 钠和硬度高亮，标注咀嚼难度 |
5.2 高亮展示示例（健身人群视角）
┌──────────────────────────────────────┐
│ 🍗 香煎鸡胸肉 │
│ 🔥 200kcal · 🥩蛋白质：42g ↑最高 │
│ 🟢低碳水 🟢低脂 │
│ │
│ 💪 健身点评： │
│ 蛋白质含量在同类菜品中排名前 15%， │
│ 非常适合训练后补充蛋白质。 │
│ 建议搭配一份快碳水（如米饭、香蕉）。 │
└──────────────────────────────────────┘
六、技术数据模型
// 营养成分对象（已在 F1/F4 定义，此处补充完整）
interface Nutrition {
calories: number; // 热量 kcal
protein: number; // 蛋白质 g
carbs: number; // 碳水 g
fat: number; // 脂肪 g
fiber: number; // 膳食纤维 g
sodium: number; // 钠 mg
gi?: number; // 升糖指数
gl?: number; // 升糖负荷
saturatedFat?: number; // 饱和脂肪 g
cholesterol?: number; // 胆固醇 mg
potassium?: number; // 钾 mg
}
interface NutritionCompareRequest {
dishIds: string[]; // 最多 3 个
}
interface NutritionCompareResponse {
dishes: {
id: string;
name: string;
nutrition: Nutrition;
autoTags: string[]; // 自动生成的营养标签
nutritionInterpretation?: string; // AI 营养解读
}[];
comparison: {
proteinWinner: string; // 蛋白质胜出者
caloriesWinner: string; // 热量胜出者
conclusion: string; // 综合结论
};
}
七、复核检查项
| 检查点 | 状态 |
|---|---|
| 6 大核心营养指标完整 | ✅ |
| 热量进度条设计清晰 | ✅ |
| 自动标签生成规则明确 | ✅ |
| 对比功能支持 2-3 道菜品 | ✅ |
| 对比结论生成规则可实现 | ✅ |
| 各人群关注指标高亮区分明确 | ✅ |
| GI/钠等重点指标有红色警告机制 | ✅ |
| 技术接口覆盖完整 | ✅ |