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

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

一、背景与问题

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

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

2026-08-30-diet-preferences-redesign-design.md 6.9 KB History Raw