docs(frontend): 共餐&食谱页面美化设计文档（暖灶·家的味道）

cfc-frontend/docs/superpowers/specs/2026-08-28-diet-redesign.md

@@ -0,0 +1,279 @@
+# 共餐 & 食谱页面 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 人共餐                 │
+│  ┌────────┐ ┌────────┐ ┌────────┐ │
+│  │ 🌅      │ │ ☀️      │ │ 🌙      │ │
+│  │ 早餐     │ │ 午餐     │ │ 晚餐     │ │
+│  │ 爸爸妈妈 │ │ 3 人     │ │ 3 人     │ │
+│  └────────┘ └────────┘ └────────┘ │
+└──────────────────────────────────┘
+```
+
+**视觉细节**：
+- 卡片顶部：左侧大号 `🍳` 放入白色半透明圆底，右侧标题「今日共餐」+ 副标题「工作日 · N 人共餐」
+- 下方三格：白色半透明（`rgba(255,255,255,0.18)`）圆角块，内含餐次 emoji + 餐次名（白字）+ 参与人数（`爸爸、妈妈` 或 `共 N 人`）
+- 副标题按 `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` 加粗，右侧可选显示已选人数
+- **成员 chips**（flexbox wrap）：
+  - 未选：浅灰底（`#F5F5F5`）灰描边，首字字母圈用中性渐变
+  - 选中：橙描边（`2rpx`）+ 浅橙底（`#FFF5EB`）+ 右上角橙色 `✓` 圆形角标 + 首字圈变橙渐变
+  - 头像圈从纯灰 `#C8CDD4` 升级为**彩色渐变字母圈**（取成员昵称首字，背景用暖橙系或成员性别对应色）
+  - 空成员：`暂无可选的共餐人` 灰字，占满一行
+
+### 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 态切换）