# 共餐 & 食谱页面 Redesign 设计文档

- **日期**：2026-08-28
- **主题**：饮食模块三页重新设计（共餐 + 食谱）
- **涉及页面**：
  - `pages/diet/index.vue`（饮食首页：今日共餐摘要 + 今日食材推荐 + 功能入口 + 本周趋势）
  - `pages/diet/meal-config.vue`（共餐配置：工作日/周末切换 + 餐次×成员多选）
  - `pages/diet/recommendation.vue`（食谱推荐：餐次菜单 + 菜品 + 营养汇总）
- **方案**：方案一「🍳 暖灶 · 家的味道」（橙暖团聚主题）
- **核心理念**：身维度属土 → 暖橙 + 大地色 + 嫩绿点缀，用「一起吃饭的餐桌」表达家庭共餐与科学膳食的温暖感。与财富页「💧 财富之泉（水元素主题）」构成一致的维度主题化策略。

## 目标

解决当前饮食模块的问题：

1. **平铺无锚点**：`diet/index.vue` 结构是「标题 + 卡片 + 网格」的通用堆叠，没有视觉主视觉，与身/智/心详情页的视觉丰富度差距明显
2. **配色硬编码**：多处使用 `#FF8C42` 但未抽象为令牌，页面间深浅不一（`#FF8C42` vs `#F97316` 混用）
3. **共餐无温度**：共餐摘要只是 3 个灰底格子，没有「一家人一起吃饭」的氛围
4. **配置页无辨识度**：`meal-config.vue` 纯白底 + 灰头像，餐次与成员选择的视觉反馈弱
5. **食谱无食欲感**：`recommendation.vue` 卡片平淡，菜品信息缺乏层级，操作按钮用裸 emoji
6. **空态无引导**：三页空态都是「图标 + 灰色文字」，缺乏转化引导

## 设计原则

- 沿用项目统一设计 Token（`uni.scss`：扁平圆角卡片、柔和暖色系、`--color-primary` 体系）
- 身维度专属色系：主橙 `#FF8C42`、渐变 `#FF8C42 → #FFB366`、米底 `#FFF7ED`、深橙文字 `#C2410C`、嫩绿点缀 `#10B981`
- **小程序限制（强制遵守）**：
  - 禁止可选链 `?.`（用 `&&` 替代）
  - 禁止 CSS Grid（用 flexbox）
  - 禁止 `:key` 表达式（用方法调用代替）
  - 禁止中文类名（用英文，数据状态映射 `_cssClass`）
  - Vue 2 Options API，禁止 Composition API
  - 禁止 `new Date(string)` 解析（统一 `utils/format.js` 的 `parseDate()`）
- **图标策略**：保留食品 emoji（领域语义贴切 + 小程序惯例），统一放入柔和渐变圆底承载；禁止为纯装饰添加动画
- **纯样式与布局重做**：不改任何接口、数据结构、业务逻辑、跳转路径

## 设计令牌（Theme Tokens）

| 令牌 | 值 | 用途 |
|------|-----|------|
| `--diet-primary` | `#FF8C42` | 主操作 / 强调 |
| `--diet-primary-grad` | `linear-gradient(135deg, #FF8C42, #FFB366)` | 主按钮 / 主视觉底 |
| `--diet-primary-deep` | `#C2410C` | 深橙文字（标题强调） |
| `--diet-bg` | `#FFF7ED` | 页面底色 |
| `--diet-bg-soft` | `#FFF1E6` | 浅卡底 / 选中态 |
| `--diet-fresh` | `#10B981` | 嫩绿点缀（生成食谱 / 点赞） |
| `--diet-sun` | `#FBBF24` | 正午黄（午餐） |
| `--diet-dusk` | `#8B5CF6` | 暮色紫（晚餐 icon 底） |
| `--diet-text` | `#333333` | 主文字 |
| `--diet-text-2` | `#999999` | 次要文字 |
| `--diet-card-shadow` | `0 4rpx 20rpx rgba(255, 140, 66, 0.10)` | 卡片暖影 |

> 说明：令牌以页面 scoped CSS 变量形式在每个 `.vue` 的 `<style>` 顶部定义（小程序页面无全局注入 css var 的便捷手段，保持 scoped 内自足），不修改 `uni.scss`，避免影响其他页面。

---

## 第一节：饮食首页 `pages/diet/index.vue`

### 信息架构

```
┌──────────────────────────────────────────────┐
│  🍳 今日餐桌（顶部主视觉，暖橙渐变大卡）        │
│    今日共餐 · 工作日/周末 · N 人共餐           │
│    [🌅 早餐] [☀️ 午餐] [🌙 晚餐]  时间轴三格   │
│    （未配置 → 引导「去设置共餐」）              │
├──────────────────────────────────────────────┤
│  🧺 今日菜篮（食材推荐）                      │
│    [🔄 换一批] [+ 添加食材] [✨ 生成食谱]     │
│    食材列表：序号徽章 + 名称 + 推荐理由        │
├──────────────────────────────────────────────┤
│  常用功能（厨房导航 5 格，暖橙系深浅渐变）      │
├──────────────────────────────────────────────┤
│  本周饮食（总摄入 kcal / 记录天数，橙大数字）    │
└──────────────────────────────────────────────┘
```

### 1.1 今日餐桌主视觉（替换原 page-header + 今日共餐卡片）

**结构**：页面顶部一张暖橙渐变圆角大卡（`#FF8C42 → #FFB366`），白字。

```
┌──────────────────────────────────┐
│  🍳 今日餐桌                       │
│  工作日 · 3 人共餐                 │
│  ┌────────┐ ┌────────┐ ┌────────┐ │
│  │ 🌅      │ │ ☀️      │ │ 🌙      │ │
│  │ 早餐     │ │ 午餐     │ │ 晚餐     │ │
│  │ 共 2 人  │ │ 共 3 人  │ │ 共 3 人  │ │
│  └────────┘ └────────┘ └────────┘ │
└──────────────────────────────────┘
```

**视觉细节**：
- 卡片顶部：左侧大号 `🍳` 放入白色半透明圆底，右侧标题「今日共餐」+ 副标题「工作日 · N 人共餐」
- 下方三格：白色半透明（`rgba(255,255,255,0.18)`）圆角块，内含餐次 emoji + 餐次名（白字）+ 参与人数（`共 N 人`，来自 `parseMembers` 返回的计数文案）
- 副标题按 `dateType` 显示：`工作日` / `周末`；参与人数来自 `mealSummary.*`（`parseMembers` 返回值）
- 未配置任何餐次 → 该卡显示暖橙引导文案 + 「去设置共餐」白底橙字按钮，点击 `navTo('/pages/diet/meal-config')`
- 若已配置但某餐无人（`mealSummary.breakfast` 为空）→ 该格显示 `—` 占位

**数据**：沿用 `mealSummary`（`getMealConfig` 三连请求）+ `isWeekend()`，不新增接口。
**交互**：点击整卡或「去设置共餐」跳转 `meal-config`。

### 1.2 今日菜篮（食材推荐卡）

**结构**：
```
┌──────────────────────────────────┐
│  🧺 今日菜篮                       │
│  [🔄 换一批] [+ 添加食材] [✨ 生成食谱] │
│  ┌────┐ 西蓝花                     │
│  │ 01 │ 富含膳食纤维，适合晚餐搭配     │
│  └────┘                            │
│  ...                                │
└──────────────────────────────────┘
```

**视觉细节**：
- 卡片头部：左侧 `🧺` 放入橙渐变圆底，标题「今日菜篮」（替代原「今日食材推荐」文案）
- 操作栏三按钮：
  - `🔄 换一批`：灰底灰字胶囊
  - `+ 添加食材`：主橙渐变底白字胶囊
  - `✨ 生成食谱`：嫩绿渐变底白字胶囊；无食材时 `opacity: 0.4` 禁用态
- 食材列表项：左侧序号徽章（橙渐变圆角方块，白字 01/02…）+ 名称（`#333` 加粗）+ 推荐理由（浅灰小字，`item.reason`）
- 空态：`🥬` 大 emoji + 「暂无推荐食材」+ 引导副文案，保留现有上传报告引导弹窗逻辑不动

**数据/逻辑**：沿用 `ingredients`、`loadIngredients`、`refreshIngredients`、`removeIngredient`、`showFoodPicker`、`generateRecipe` 全部逻辑，仅改样式与文案。

### 1.3 厨房导航（快捷入口 5 格）

**视觉细节**：
- 保留 20% 宽 5 列网格（flexbox）
- 图标底从「五种 pastel 渐变色」统一为**暖橙系深浅渐变**，保留 5 个入口语义色但收敛到暖调：
  - 食材查询 🥗：浅橙 `#FFF1E6 → #FFE0C0`
  - 饮食记录 📝：浅米 `#FFF7ED → #FFEEDD`
  - 调研表 📋：中橙 `#FF8C42 → #FFB366`
  - 共餐配置 👨👩👧：浅杏 `#FFE8D6 → #FFD4B0`
  - 食谱推荐 🍽️：嫩绿点缀 `#E8F8F1 → #C8F0E0`
- 图标保留 emoji（40rpx），标签 `#333` 22rpx
- `hover-class` / `:active` 按压缩放反馈

### 1.4 本周饮食（趋势卡）

**视觉细节**：
- 白卡 + 暖影，头部「本周饮食」沿用橙色竖条
- 两个数据：`总摄入 kcal`（48rpx 橙色加粗数字 + 单位小字）+ `记录天数`（48rpx 橙色 + 天）
- 中间分隔线浅橙 `#FDE8D0`
- 无数据（`trendData.days === 0`）保持隐藏

### 1.5 页面背景

- 页底从 `linear-gradient(180deg, #FFF7ED, #FFF3E6, #F5F7FA)` 收敛为**纯暖调** `linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%)`，避免页面尾部突然变冷蓝

---

## 第二节：共餐配置 `pages/diet/meal-config.vue`

### 信息架构

```
┌──────────────────────────────────────────────┐
│  [工作日]  [周末]        ← 两段式胶囊 tabs      │
│  ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐                        │
│  │  ＋ 添加共餐人  ›  │  ← 橙虚线引导卡          │
│  └ ─ ─ ─ ─ ─ ─ ─ ─ ┘                        │
│  ┌──────────────────────┐                   │
│  │ 🌅 早餐               │                   │
│  │ [爸爸✓] [妈妈] [爷爷]   │  ← 成员 chips      │
│  └──────────────────────┘                   │
│  ☀️ 午餐 ...   🌙 晚餐 ...                   │
│  💡 提示：选择与您在工作日共餐的家庭成员         │
│  [保存配置]（主橙渐变）                       │
└──────────────────────────────────────────────┘
```

### 2.1 日期切换

- 两段式胶囊（segmented control）：容器白底圆角，两个等宽选项
- 未选中：`#666` 灰字透明底；选中：橙渐变底白字加粗
- 保留 `switchDateType('weekday'/'weekend')` 逻辑

### 2.2 添加共餐人入口

- 橙虚线圆角卡（`border: 2rpx dashed #FF8C42`），白底
- 内容：`＋` 橙色 + 「添加共餐人」橙字加粗 + `›` 右箭头
- 保留跳转 `family-members` 逻辑

### 2.3 餐次 × 成员配置

- **餐次卡片**：白底圆角 + 暖影
  - 卡片头：餐次 emoji 放入对应渐变圆底：
    - 早餐 `🌅` → 日出橙渐变 `#FFB366 → #FFD48A`
    - 午餐 `☀️` → 正午黄渐变 `#FBBF24 → #FCD34D`
    - 晚餐 `🌙` → 暮色紫渐变 `#A78BFA → #C4B5FD`
  - 餐次名 `#333` 加粗，右侧显示「已选 N 人」（仅 N>0 时显示，N 为该餐次 `participantMemberIds` 长度）
- **成员 chips**（flexbox wrap）：
  - 未选：浅灰底（`#F5F5F5`）灰描边，首字字母圈用中性渐变
  - 选中：橙描边（`2rpx`）+ 浅橙底（`#FFF5EB`）+ 右上角橙色 `✓` 圆形角标 + 首字圈变橙渐变
  - 头像圈从纯灰 `#C8CDD4` 升级为**彩色渐变字母圈**（取成员昵称首字；底色按 `member.gender` 定：`male` → 暖蓝渐变 `#5B9BD5 → #8FC5E8`、`female` → 暖粉渐变 `#F472B6 → #F9A8D4`、未知 → 暖橙渐变 `#FF8C42 → #FFB366`）
  - 空成员：`暂无可选的共餐人` 灰字，占满一行

### 2.4 提示条

- 从蓝底 `#E3F2FD` 改为暖橙浅底 `#FFF1E6`，文字深橙 `#C2410C`
- 文案保留：`💡 提示：选择与您在{工作日/周末}共餐的家庭成员`

### 2.5 保存按钮

- 主橙渐变（`#FF8C42 → #FFB366`）白字，大圆角，底部留白加大
- 保留 `saving` 态文案切换

---

## 第三节：食谱推荐 `pages/diet/recommendation.vue`

### 3.1 空态（无推荐）

**结构**：居中暖橙渐变圆底（120rpx）+ `🍽️` emoji + 主文案「今日菜单空着」+ 副文案 + 「生成食谱」主按钮。

**视觉细节**：
- emoji 承载圆底：`#FF8C42 → #FFB366` 渐变 + 白字大图标（或 emoji 60rpx）
- 主文案 `#333` 32rpx 加粗「今日菜单空着」
- 副文案 `#999`「点击生成今日三餐食谱」
- 按钮：主橙渐变白字，`padding: 28rpx 60rpx` 大圆角
- 保留 `generateRecipe()` 逻辑

### 3.2 日期 + 状态卡

- 白卡 + 暖影，左缘保留橙色竖条（`card-accent` 改为橙渐变竖条）
- 日期 `#333` 加粗；状态徽章：
  - `待确认`：浅橙底 `#FFF1E6` + 深橙字 `#C2410C`
  - `已接受`：浅暖蓝 `#E8F1FB` + 蓝字（保留语义色，仅微调）
  - `已完成`：浅绿底 `#E8F5E9` + 绿字

### 3.3 餐次菜单卡

- 每餐一张白卡 + 暖影
- 餐次头：emoji 渐变圆底（同 2.3 三餐配色）+ 餐次名 `#333` 加粗 + 右侧 `N 人份` 灰字
- **菜品项**：
  - 淡橙底块（`#FFF9F0` 圆角）承载整条菜品信息，替代现有无底色分行
  - 菜名 `#333` 26rpx 加粗 + 右侧 `NNN kcal` 橙字
  - 食材标签：灰 chips（`#F5F5F5` 底 + `#666` 字，`名称 Xg`）
  - 做法：`🍳 清蒸 20 分钟` 灰字小行
  - 操作行三按钮升级为**圆角小胶囊（图标 + 文字）**：
    - 👍 好吃：浅绿底 `#E8F5E9` + 绿字 `#4CAF50`
    - 🔄 替换：浅暖蓝底 `#E8F1FB` + 蓝字
    - ✕ 跳过：浅红底 `#FFEBEE` + 红字

### 3.4 营养汇总卡

- 白卡 + 暖影，标题「今日营养汇总」
- 4 宫格（flexbox）：热量 / 蛋白质 / 碳水 / 脂肪
- 数值 36rpx 橙色加粗 + 单位小字（kcal/g）+ 标签灰字
- 宫格间浅橙分隔，整体加浅暖底

### 3.5 底部操作

- `重新生成`：白底橙描边圆角按钮（替代现有灰描边）
- `标记完成`：主橙渐变白字（`recommendation.status !== 'completed'` 时显示）
- 保留 `regenerate()` / `completeRecipe()` 逻辑

---

## 验证方式

- 小程序无法跑 Lighthouse，验证以**代码审查 + 微信开发者工具视觉确认**为主：
  1. `mvn` 无涉（纯前端）
  2. 三页 `<style>` 均 scoped，不污染全局
  3. 无 `?.`、无 CSS Grid、无 `:key` 表达式、无中文类名、无 `new Date(string)`
  4. 业务逻辑零改动：仅 template 结构 + style + 文案
  5. 改完由用户在 HBuilderX 重新打包，微信开发者工具目检三页（含空态/已配置态）

## 明确不做（Out of Scope）

- 不动 `pages/meal/recommend.vue`（已废弃）、`pages/meal/recipe-detail.vue`（已废弃）
- 不新增/修改任何后端接口与数据字段
- 不修改 `uni.scss` 全局令牌（避免影响其他页面）
- 不引入新依赖
- 不新增动画（除保留现有 `transition: all 0.15s` chips 态切换）