# 饮食偏好调研页面重新设计

**日期：** 2026-08-30
**状态：** 待审查
**优先级：** P1
**范围：** 纯前端（`cfc-frontend/pages/diet/preferences.vue`），零后端改动

## 一、背景与问题

现有饮食偏好调研页（`pages/diet/preferences.vue`）存在 4 个问题：

1. **体验差、门槛高**：3 张灰色长表单卡片堆叠，绝大多数字段靠"输入后回车添加"手动输入标签（过敏原/忌口/口味/菜系/健康目标），无预设选项、无进度提示、无引导文案，看着像后台表单，用户填不下去。
2. **视觉割裂**：页面冷灰底（`#F5F7FA`）与饮食首页「暖灶·家的味道」的暖橙主题（`#FF8C42` + emoji + 渐变）严重不一致。
3. **数据采集不完整**：后端 `DietPreferences` 实体和 `diet_preferences` 表已存在 `must_eat`（必吃）、`cooking_methods`（烹饪方式）字段（schema.sql 第 4451、4456 行），但页面完全未采集。
4. **无编辑回填交互**：虽然 `onLoad` 预填已有数据，但整体交互偏"一次性填写"，无步骤化确认感。

**目标：** 将单页长表单改造为 3 步引导式问卷，对齐暖橙主题，补全 `mustEat`/`cookingMethods` 采集。

## 二、方案选型

采用**方案 A（分步引导式问卷）**：

- 单页面内分步（一个 `.vue` 文件维护 `currentStep` 1/2/3），不做多路由
- 顶部进度条 + 步骤切换 + 底部"上一步/下一步/完成"按钮
- 各步骤交互从"手动输入标签"改为"预设 chip 点选 + 自定义追加"
- 视觉完全对齐「暖灶」暖橙主题
- 补全 `mustEat` / `cookingMethods` 两个缺失字段采集

不做方案 B（仅视觉升级，引导性弱、交互未简化）或方案 C（单页智能预设，视觉升级不彻底）。

## 三、页面架构与步骤流

单页面内分步，维护 `currentStep`（1/2/3），用 `v-if`/swiper 切换三屏内容。

```
[进度条: ① 忌口与过敏 ●───○───○]
[步骤内容区域]
[底部: 上一步 | 下一步 / 完成]
```

| 步骤 | 标题（emoji） | 必填 |
|------|--------------|:---:|
| 1 | 🚫 忌口与过敏 | ✅ |
| 2 | 😋 口味与偏好 | — |
| 3 | 🎯 健康目标 | — |

**数据流：**
- `onLoad`：调 `getDietPreferences`（`POST /api/diet/preferences/current-member`）预填已有数据（编辑模式）
- 第 3 步点「完成」：校验 → 调 `saveDietPreferences`（`POST /api/diet/preferences/save`）一次性提交全量字段
- 成功后 `uni.navigateBack()`（保持现有导航栈）

## 四、各步骤交互设计

### Step 1 忌口与过敏（必填）

- **过敏原**：预设 chip 多选 + 自定义输入追加
  - 预设：海鲜、花生、乳糖、鸡蛋、牛奶、豆类、麸质、坚果、芒果、其他
- **绝对忌口**：预设 chip 多选 + 自定义输入追加
  - 预设：牛肉、羊肉、猪肉、内脏、油腻、辛辣、生冷、腌制
- **宗教饮食**：单选胶囊
  - 选项：无限制、清真、素食、纯素
- **校验**：过敏原或忌口至少填一项（沿用现有规则）

### Step 2 口味与偏好（可选）

- **辣度**：滑块 0-5（不辣 → 特辣）
- **口味**：预设 chip 多选 + 自定义追加
  - 预设：酸、甜、咸、鲜、苦、清淡、浓郁
- **菜系**：预设 chip 多选 + 自定义追加
  - 预设：川、粤、鲁、淮扬、日料、西餐、东南亚、韩餐
- **烹饪方式（新增字段）**：预设 chip 多选 + 自定义追加
  - 预设：蒸、煮、炒、烤、炖、凉拌、煎、炸

### Step 3 健康目标（可选）

> **规格自检修正（2026-08-30）**：现有页面"系统推荐目标"区块为**死代码**——后端 `current-member` 接口的 `DietPreferencesDTO`/`convertToDTO()` 均不返回 `systemGoals` 字段，diet 后端亦无 `goalSource=system_recommend` 生成逻辑，前端 `res.systemGoals || []` 恒为空数组。故 Step 3 **不保留**该区块，避免维护永不可见的 UI。

- **必吃（新增字段）**：预设 chip 多选 + 自定义追加
  - 预设：蔬菜、水果、粗粮、鱼类、鸡蛋、豆制品、菌菇
- **自定义目标**：预设 chip 多选 + 自定义追加
  - 预设：减脂、增肌、控糖、肠道调理、增强免疫

## 五、视觉与样式

沿用 `pages/diet/index.vue` 的「暖灶」主题：

| Token | 值 | 用途 |
|-------|-----|------|
| 背景 | `linear-gradient(180deg, #FFF7ED, #FFF3E6)` | 页面暖底 |
| 主色 | `#FF8C42` | 强调、进度条、激活 chip |
| 卡片 | 白底圆角 24rpx + 暖橙阴影 | 表单容器 |
| 进度条 | 分段圆点 + 橙色填充 + 完成打勾 | 顶部 |

- chip 默认浅灰底（`#F5F5F5`），选中暖橙底白字
- 每步标题区放 emoji + 一句引导文案（如"哪些食物绝对不能碰？"）
- 底部固定按钮栏：左"上一步"（第 1 步隐藏），右"下一步/完成"

**小程序约束（强制遵守）：**
- 不用 CSS Grid，用 flexbox
- 不用可选链 `?.`，用 `&&`
- `:key` 用方法调用（如 `getChipKey(name)`），不用带运算符表达式
- 不用 `new Date(string)`，用 `utils/format.js` 的 `parseDate()`
- Vue 2 Options API
- 页面标题在 `pages.json` 配置（`navigationBarTitleText`），不写自定义 nav-title

## 六、后端兼容性

**零后端改动：**

- 请求体复用现有 `DietPreferencesDTO`（`allergies`/`absoluteAvoid`/`religiousDiet`/`spiceLevel`/`flavorPref`/`cuisinePref`/`cookingMethods`/`healthGoals`/`mustEat`/`goalConfirmed`）
- `cookingMethods`、`mustEat` 实体字段已存在（`entity/DietPreferences.java`），`diet_preferences` 表列已存在（`must_eat`、`cooking_methods` JSON），**无需数据库迁移**
- 响应复用 `current-member` 接口回填
- 不需要修改 `docs/superpowers/api/API_REFERENCE.md`（无新增接口）

## 七、涉及文件

| 文件 | 操作 |
|------|------|
| `cfc-frontend/pages/diet/preferences.vue` | 重写（分步引导 + 暖橙主题 + 补字段） |
| `cfc-frontend/utils/api.js` | 不变（`getDietPreferences`/`saveDietPreferences` 已存在） |

## 八、验收标准

- [ ] 页面为 3 步引导问卷，顶部有进度条，可前后切换，第 1 步无"上一步"
- [ ] Step 1 过敏原/忌口 chip 点选 + 自定义追加可用，未填过敏原且未填忌口时点"下一步"弹提示
- [ ] Step 2 辣度滑块、口味/菜系/烹饪方式 chip 可选
- [ ] Step 3 必吃/自定义目标 chip 可选（无"系统推荐目标"区块——后端无该数据源，见规格自检修正）
- [ ] 已保存的数据回填到各步骤对应 chip/滑块
- [ ] 「完成」提交 `saveDietPreferences`，成功 toast 后 `navigateBack`
- [ ] 提交数据含 `cookingMethods`、`mustEat`（空数组也可）
- [ ] 视觉对齐暖橙主题（暖底渐变、`#FF8C42` 主色、卡片圆角阴影）
- [ ] 无 `?.`、无 CSS Grid、`:key` 用方法、日期用 `parseDate()`、无自定义 nav-title
- [ ] `node --check` 语法校验通过（script 块提取后）