功能详细设计文档：F4 菜谱详情展示

功能优先级：P0（核心） 文档版本：v1.0 关联 PRD：PRD-v1.0.md

---

一、页面结构

1.1 页面名称

菜品详情页（DishDetailPage）

1.2 页面位置

任意菜品卡片点击 → 菜品详情页

1.3 页面整体布局

┌──────────────────────────────────────┐
│  ← 返回                    ⋯ 更多    │  ← 顶部导航
├──────────────────────────────────────┤
│                                      │
│   ┌──────────────────────────────┐   │
│   │                              │   │
│   │         菜品封面大图            │   │  ← 可点击全屏
│   │      （16:9 比例固定）          │   │
│   │                              │   │
│   └──────────────────────────────┘   │
│                                      │
│   🍅 番茄炒蛋                        │
│   一道简单家常菜，酸甜可口，老少皆宜   │
│                                      │
│   ──── 营养概览 ────                 │
│   ┌──────┬──────┬──────┬──────┐     │
│   │ 180  │ 12g  │ 8g   │ 10g  │     │
│   │ kcal │ 蛋白 │ 碳水 │ 脂肪 │     │
│   └──────┴──────┴──────┴──────┘     │
│                                      │
│   适合：👴👨‍👩‍👧 [通用]              │
│                                      │
├──────────────────────────────────────┤
│  🍳 食材清单                         │
│                                      │
│  主料 ────────────────────────────   │
│  🍅 番茄    2个（约200g）            │
│  🥚 鸡蛋    3个                      │
│                                      │
│  辅料 ────────────────────────────   │
│  🧂 盐      2g                      │
│  🛢️ 食用油   10ml                   │
│  🍬 白糖    5g（可选）               │
│                                      │
├──────────────────────────────────────┤
│  📝 制作步骤                         │
│                                      │
│  ① ┌──────────────────────────┐     │
│    │ 番茄洗净切块，鸡蛋打散      │     │
│    │ 加少许盐搅拌均匀。          │     │
│    └──────────────────────────┘     │
│    [📷 配图] [❓有问题]              │
│                                      │
│  ② ┌──────────────────────────┐     │
│    │ 热锅凉油，倒入蛋液          │     │
│    │ 炒至凝固后盛出备用。        │     │
│    └──────────────────────────┘     │
│    [📷 配图] [❓有问题]              │
│                                      │
│  ③ ┌──────────────────────────┐     │
│    │ 锅中加入少许油，放番茄块     │     │
│    │ 翻炒出汁，加入糖和盐。      │     │
│    └──────────────────────────┘     │
│                                      │
│  ④ ┌──────────────────────────┐     │
│    │ 倒入炒好的鸡蛋，翻炒均匀。   │     │
│    │ 即可出锅享用。              │     │
│    └──────────────────────────┘     │
│                                      │
├──────────────────────────────────────┤
│  ⏱️ 耗时：准备 5min | 烹饪 10min     │
│  🔥 180kcal/份  🟢轻卡               │
│                                      │
│  👤 适合人群标签                     │
│  [👴老人] [💪健身] [⚖️减肥] [家常]   │
│                                      │
│  ⚠️ 温馨提示（病患可见）             │
│  本菜品含糖量较低，适合糖尿病患者     │
│  适量食用。具体请遵医嘱。             │
│                                      │
├──────────────────────────────────────┤
│  🔗 相关推荐                         │
│                                      │
│  [番茄蛋汤] [蛋炒饭] [番茄牛腩]       │
│                                      │
├──────────────────────────────────────┤
│  ┌────────────┐ ┌────────────┐       │
│  │  💾 收藏   │ │ 🍽️ 今日吃这个 │    │
│  └────────────┘ └────────────┘       │
└──────────────────────────────────────┘

---

二、封面图设计

2.1 规格要求

属性	规格
比例	16:9（横版菜品图）
最低分辨率	720p（1280×720px）
格式	WebP（优先）/ JPEG
最大文件大小	200KB（CDN 压缩后）
圆角	12px

2.2 点击全屏交互

• 点击封面图 → 进入全屏浏览模式
• 全屏模式支持：左右滑动查看多图（如有）、双指缩放
• 全屏模式顶部展示菜品名称 + 热量

---

三、营养概览面板

3.1 热热量分级展示

┌──────────────────────────────────────┐
│  180 kcal / 份                       │
│  ████████████░░░░░░░░  180/500      │
│  🟢 轻卡 · 热量占每日建议的 9%        │
└──────────────────────────────────────┘

3.2 热量颜色标准

级别	热量范围	颜色	标签文字
🟢 轻卡	< 300kcal	绿色	轻卡
🟡 均衡	300-500kcal	黄色	均衡
🔴 高卡	> 500kcal	红色	高卡

3.3 营养数据卡

┌──────┬──────┬──────┬──────┬──────┐
│ 180  │ 12g  │  8g  │ 10g  │  3g  │
│ kcal │ 蛋白 │ 碳水 │ 脂肪 │ 纤维 │
│      │ /份  │ /份  │ /份  │ /份  │
└──────┴──────┴──────┴──────┴──────┘

---

四、食材清单

4.1 分组展示

分组	内容	标注规则
主料	构成菜品主体的食材	显示用量
辅料	调味/增香/搭配的食材	显示用量
调料	盐、糖、酱油等调味品	显示用量

4.2 食材标注逻辑

场景	标注方式
用户已有该食材	绿色勾 ✅（搜索来源时显示）
用户缺少该食材	灰色 ⚠️「缺少」
禁忌成分	红色 ❌（针对人群显示）

---

五、制作步骤设计

5.1 步骤卡片

步骤序号（圆形数字）
    │
    ▼
┌──────────────────────────────────┐
│  Step 内容文字                    │
│  步骤描述，最多 3 行             │
│  支持文字 + 配图                 │
└──────────────────────────────────┘
    │
    ├── [📷 配图 thumbnail]
    └── [❓ 有问题？] → 悬浮提示

5.2 配图要求

• 每个步骤可选配图（高质量操作示意图）
• 图片比例：1:1，最大 100KB
• 无配图时显示占位插图

5.3 步骤辅助

• 「有问题」反馈：用户点击后弹出该步骤常见问题 FAQ
  • 如 Step 3「番茄炒不出汁怎么办？」→「可加少许水，盖盖焖 1 分钟」
• 步骤计时器（可选）：部分步骤可点击「开始计时」，到时震动提醒

---

六、适合人群标签

6.1 标签来源

根据菜品的 crowdType 字段自动生成，同时结合人群推荐规则计算适配度。

6.2 标签展示

适合：
[👴 老人] [💪 健身] [⚖️ 减肥] [🏥 病患-通用]

6.3 禁忌标注（病患）

❌ 不适合：
[🏥 痛风患者] — 嘌呤含量中等
[🏥 肾病患] — 蛋白质含量较高

---

七、底部操作区

7.1 按钮设计

按钮	行为
💾 收藏	收藏到个人收藏夹
🍽️ 今日吃这个	标记为今日已选菜品（用于营养汇总统计）
📤 分享	唤起微信分享

7.2 分享卡片

┌─────────────────────────────┐
│                             │
│     菜品封面图               │
│                             │
│  🍅 番茄炒蛋                 │
│  🔥 180kcal · 🟢轻卡         │
│                             │
│  吃什么？交给它帮你决定！     │
│  ──────────────────────     │
│  [小程序码]                  │
└─────────────────────────────┘

---

八、技术数据模型

interface DishDetailResponse {
  dish: Dish;                  // 完整菜品对象（同 F1）
  nutritionPer100g?: Nutrition; // 每100g营养（可选）
  servingSize: string;         // 「1人份」「2人份」
  tips?: string[];            // 小贴士
  faq?: QAPair[];            // 常见问题
  relatedDishes: DishBrief[];  // 相关推荐
  isCollected: boolean;       // 是否已收藏
  userHasIngredients?: string[]; // 用户已有的食材（来自搜索上下文）
}

interface QAPair {
  question: string;
  answer: string;
  stepIndex?: number;         // 关联的步骤（可选）
}

---

九、复核检查项

检查点	状态
页面信息层次清晰（图片→营养→食材→步骤）	✅
热量分级颜色标准统一	✅
步骤卡片交互完整（配图+反馈+计时）	✅
人群标签自动生成逻辑明确	✅
禁忌标注针对不同人群展示	✅
底部 CTA 逻辑清晰	✅
分享卡片信息完整	✅
技术接口覆盖所有字段	✅