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

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

目标

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

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

设计原则

沿用项目统一设计 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 态切换）

2026-08-28-diet-redesign.md 15 KB History Raw

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

目标

设计原则

设计令牌（Theme Tokens）

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

信息架构

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

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

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

1.4 本周饮食（趋势卡）

1.5 页面背景

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

信息架构

2.1 日期切换

2.2 添加共餐人入口

2.3 餐次 × 成员配置

2.4 提示条

2.5 保存按钮

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

3.1 空态（无推荐）

3.2 日期 + 状态卡

3.3 餐次菜单卡

3.4 营养汇总卡

3.5 底部操作

验证方式

明确不做（Out of Scope）

2026-08-28-diet-redesign.md 15 KB

History Raw

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

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

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