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

> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。

**目标：** 将 `cfc-frontend/pages/diet/preferences.vue` 从 3 张灰色长表单卡改造为 3 步引导式问卷（Step1 忌口必填 / Step2 口味偏好 / Step3 健康目标），对齐「暖灶」暖橙主题，补全 `mustEat`/`cookingMethods` 采集。

**架构：** 单 `.vue` 文件内维护 `currentStep`（1/2/3）+ 顶部进度条 + 底部"上一步/下一步/完成"；数据用扁平数组字段存储（`allergies`/`absoluteAvoid`/`flavorPref`/`cuisinePref`/`cookingMethods`/`healthGoals`/`mustEat`），chip 选中态用 `arr.indexOf(name) >= 0` 内联表达式；`onLoad` 预填、`saveDietPreferences` 一次性提交。

**技术栈：** uni-app Vue 2 Options API（微信小程序），flexbox（禁 Grid），无 `?.`，`:key`/`:class` 禁方法调用式绑定。

**规格文档：** `docs/superpowers/specs/2026-08-30-diet-preferences-redesign-design.md`

---

## 文件结构

| 文件 | 职责 | 变更 |
|------|------|------|
| `cfc-frontend/pages/diet/preferences.vue` | 3 步引导问卷（模板 + 逻辑 + 样式） | 重写 |
| `cfc-frontend/pages.json` | 页面注册与标题 | 不变（已注册，标题"饮食偏好调研"） |
| `cfc-frontend/utils/api.js` | `getDietPreferences`/`saveDietPreferences` | 不变（已存在） |
| `cfc-backend/**` | 数据存储 | 不变（`must_eat`/`cooking_methods` 列已存在） |

---

## 任务 1：重写 preferences.vue — 模板结构（数据层 + 进度条 + Step1）

**文件：**
- 修改：`cfc-frontend/pages/diet/preferences.vue`（整体重写，保留现有 `savePreferences` 校验语义）

- [ ] **步骤 1：重写 `<script>` data 与状态字段**

将整个文件替换为以下结构（模板与样式在任务 2、3 中填充，先确保逻辑完整）：

```vue
<script>
import { getDietPreferences, saveDietPreferences } from '@/utils/api.js'

// 预设选项（常量，非响应式）
const PRESET_ALLERGIES = ['海鲜', '花生', '乳糖', '鸡蛋', '牛奶', '豆类', '麸质', '坚果', '芒果', '其他']
const PRESET_AVOID = ['牛肉', '羊肉', '猪肉', '内脏', '油腻', '辛辣', '生冷', '腌制']
const PRESET_FLAVOR = ['酸', '甜', '咸', '鲜', '苦', '清淡', '浓郁']
const PRESET_CUISINE = ['川', '粤', '鲁', '淮扬', '日料', '西餐', '东南亚', '韩餐']
const PRESET_COOKING = ['蒸', '煮', '炒', '烤', '炖', '凉拌', '煎', '炸']
const PRESET_MUSTEAT = ['蔬菜', '水果', '粗粮', '鱼类', '鸡蛋', '豆制品', '菌菇']
const PRESET_GOALS = ['减脂', '增肌', '控糖', '肠道调理', '增强免疫']

export default {
  data() {
    return {
      familyMemberId: null,
      currentStep: 1,
      // 数据字段（与后端 DTO 对齐）
      allergies: [],
      absoluteAvoid: [],
      religiousDiet: 'none',
      spiceLevel: 0,
      flavorPref: [],
      cuisinePref: [],
      cookingMethods: [],
      healthGoals: [],
      mustEat: [],
      goalConfirmed: 0,
      // 自定义输入
      customInput: '',
      customField: null,
      // UI 状态
      submitting: false,
      loading: true
    }
  },
  computed: {
    // 预设选项映射（供模板 v-for）
    presetAllergies: function() { return PRESET_ALLERGIES },
    presetAvoid: function() { return PRESET_AVOID },
    presetFlavor: function() { return PRESET_FLAVOR },
    presetCuisine: function() { return PRESET_CUISINE },
    presetCooking: function() { return PRESET_COOKING },
    presetMustEat: function() { return PRESET_MUSTEAT },
    presetGoals: function() { return PRESET_GOALS },
    religiousOptions: function() {
      return [
        { value: 'none', label: '无限制' },
        { value: 'halal', label: '清真' },
        { value: 'vegetarian', label: '素食' },
        { value: 'vegan', label: '纯素' }
      ]
    },
    // 进度条百分比
    progressPercent: function() {
      var total = 3
      var done = this.currentStep - 1
      if (this.currentStep === 3) done = 3
      return Math.round((done / total) * 100)
    },
    isLastStep: function() { return this.currentStep === 3 }
  },
  onLoad: function() {
    this.familyMemberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId')
    this.loadPreferences()
  },
  methods: {
    loadPreferences: function() {
      var self = this
      getDietPreferences({ memberId: self.familyMemberId }).then(function(res) {
        self.loading = false
        if (res) {
          self.allergies = res.allergies || []
          self.absoluteAvoid = res.absoluteAvoid || []
          self.religiousDiet = res.religiousDiet || 'none'
          self.spiceLevel = res.spiceLevel || 0
          self.flavorPref = res.flavorPref || []
          self.cuisinePref = res.cuisinePref || []
          self.cookingMethods = res.cookingMethods || []
          self.healthGoals = res.healthGoals || []
          self.mustEat = res.mustEat || []
          self.goalConfirmed = res.goalConfirmed || 0
        }
      }).catch(function() {
        self.loading = false
      })
    },
    // ——— chip 选中态（模板用内联 indexOf，方法供 toggle 用） ———
    getChipKey: function(prefix, index) {
      return prefix + '-' + index
    },
    toggleChip: function(field, value) {
      var idx = this[field].indexOf(value)
      if (idx >= 0) {
        this[field].splice(idx, 1)
      } else {
        this[field].push(value)
      }
    },
    // ——— 自定义输入追加（@confirm 触发） ———
    openCustom: function(field) {
      this.customField = field
      this.customInput = ''
    },
    addCustom: function() {
      var value = (this.customInput || '').trim()
      if (!value) return
      if (this[this.customField].indexOf(value) < 0) {
        this[this.customField].push(value)
      }
      this.customInput = ''
      this.customField = null
    },
    // ——— 步骤导航 ———
    goNext: function() {
      if (this.currentStep === 1) {
        if (this.allergies.length === 0 && this.absoluteAvoid.length === 0) {
          uni.showToast({ title: '请至少填写一项过敏原或忌口', icon: 'none' })
          return
        }
      }
      if (this.currentStep < 3) {
        this.currentStep += 1
      } else {
        this.savePreferences()
      }
    },
    goPrev: function() {
      if (this.currentStep > 1) {
        this.currentStep -= 1
      }
    },
    // ——— 提交 ———
    savePreferences: function() {
      var self = this
      this.submitting = true
      saveDietPreferences({
        allergies: this.allergies,
        absoluteAvoid: this.absoluteAvoid,
        religiousDiet: this.religiousDiet,
        spiceLevel: this.spiceLevel,
        flavorPref: this.flavorPref,
        cuisinePref: this.cuisinePref,
        cookingMethods: this.cookingMethods,
        healthGoals: this.healthGoals,
        mustEat: this.mustEat,
        goalConfirmed: 1
      }).then(function(res) {
        self.submitting = false
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateBack()
        }, 1000)
      }).catch(function() {
        self.submitting = false
        uni.showToast({ title: '保存失败', icon: 'none' })
      })
    }
  }
}
</script>
```

**验证：** `node --check` 对提取出的 script 块做语法校验。
预期：无语法错误。

- [ ] **步骤 2：编写 `<template>` — 进度条 + Step1 忌口与过敏**

在 `<template>` 根节点 `<view class="preferences-page">` 内，进度条 + 内容区 + 底栏三部分（Step2/3 内容在任务 2 追加）：

```html
<template>
  <view class="preferences-page">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <view class="progress-track">
        <view class="progress-fill" :style="'width:' + progressPercent + '%'"></view>
      </view>
      <view class="progress-labels">
        <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 1 }">忌口·过敏</text>
        <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 2 }">口味·偏好</text>
        <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 3 }">健康目标</text>
      </view>
    </view>

    <!-- 步骤内容 -->
    <scroll-view class="content" scroll-y>
      <!-- ===== Step 1 忌口与过敏 ===== -->
      <view v-if="currentStep === 1">
        <view class="step-head">
          <text class="step-icon">🚫</text>
          <view class="step-head-text">
            <text class="step-title">哪些食物绝对不能碰？</text>
            <text class="step-sub">为了家人的安全，过敏原和忌口请务必填写</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">过敏原 *</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetAllergies" :key="getChipKey('a', i)"
              :class="{ 'chip-active': allergies.indexOf(item) >= 0 }"
              @tap="toggleChip('allergies', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'allergies'">
            <input class="custom-input" placeholder="输入其他过敏原" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('allergies')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">绝对忌口 *</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetAvoid" :key="getChipKey('v', i)"
              :class="{ 'chip-active': absoluteAvoid.indexOf(item) >= 0 }"
              @tap="toggleChip('absoluteAvoid', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'absoluteAvoid'">
            <input class="custom-input" placeholder="输入其他忌口" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('absoluteAvoid')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">宗教饮食</text>
          <view class="chip-group">
            <view class="chip" v-for="(opt, i) in religiousOptions" :key="getChipKey('r', i)"
              :class="{ 'chip-active': religiousDiet === opt.value }"
              @tap="religiousDiet = opt.value">
              <text>{{ opt.label }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- /Step 1 -->

      <!-- Step 2、Step 3 在此追加（任务 2） -->
    </scroll-view>

    <!-- 底部按钮栏 -->
    <view class="footer-bar">
      <view class="footer-btn footer-btn-ghost" v-if="currentStep > 1" @tap="goPrev">
        <text>上一步</text>
      </view>
      <view class="footer-btn footer-btn-primary" @tap="goNext">
        <text>{{ submitting ? '提交中...' : (isLastStep ? '完成' : '下一步') }}</text>
      </view>
    </view>
  </view>
</template>
```

**验证：** 检查无 `?.` 可选链、无 CSS Grid、`:class`/`:key` 均为简单表达式（`indexOf >= 0`、`'a' + i`），符合小程序限制。

- [ ] **步骤 3：Commit**

```bash
git add cfc-frontend/pages/diet/preferences.vue
git commit -m "feat(diet): 饮食偏好调研 重构为3步引导问卷 - 数据层+进度条+Step1忌口过敏"
```

---

## 任务 2：追加 Step2 口味偏好 + Step3 健康目标

**文件：**
- 修改：`cfc-frontend/pages/diet/preferences.vue`（在 `<!-- /Step 1 -->` 与 `</scroll-view>` 之间插入）

- [ ] **步骤 1：插入 Step2 模板**

在 Step1 的 `<!-- /Step 1 -->` 之后追加：

```html
      <!-- ===== Step 2 口味与偏好（4 卡片完整代码） ===== -->
      <view v-if="currentStep === 2">
        <view class="step-head">
          <text class="step-icon">😋</text>
          <view class="step-head-text">
            <text class="step-title">口味和做法，说说看？</text>
            <text class="step-sub">选得越细，推荐食谱越合家人口味</text>
          </view>
        </view>

        <!-- 辣度 -->
        <view class="card">
          <text class="card-title">辣度偏好</text>
          <view class="slider-row">
            <text class="slider-label">不辣</text>
            <slider class="slider" min="0" max="5" :value="spiceLevel" @change="spiceLevel = $event.detail.value" show-value />
            <text class="slider-label">特辣</text>
          </view>
        </view>

        <!-- 口味 -->
        <view class="card">
          <text class="card-title">口味偏好</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetFlavor" :key="getChipKey('f', i)"
              :class="{ 'chip-active': flavorPref.indexOf(item) >= 0 }"
              @tap="toggleChip('flavorPref', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'flavorPref'">
            <input class="custom-input" placeholder="输入其他口味" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('flavorPref')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <!-- 菜系 -->
        <view class="card">
          <text class="card-title">菜系偏好</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetCuisine" :key="getChipKey('c', i)"
              :class="{ 'chip-active': cuisinePref.indexOf(item) >= 0 }"
              @tap="toggleChip('cuisinePref', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'cuisinePref'">
            <input class="custom-input" placeholder="输入其他菜系" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('cuisinePref')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <!-- 烹饪方式 -->
        <view class="card">
          <text class="card-title">烹饪方式</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetCooking" :key="getChipKey('k', i)"
              :class="{ 'chip-active': cookingMethods.indexOf(item) >= 0 }"
              @tap="toggleChip('cookingMethods', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'cookingMethods'">
            <input class="custom-input" placeholder="输入其他做法" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('cookingMethods')">
            <text>＋ 自定义添加</text>
          </view>
        </view>
      </view>
      <!-- /Step 2 -->
```

**验证：** 4 卡片完整闭合（辣度/口味/菜系/烹饪方式），`spiceLevel`/`flavorPref`/`cuisinePref`/`cookingMethods` 均正确绑定。

- [ ] **步骤 2：插入 Step3 模板**

```html
      <!-- ===== Step 3 健康目标 ===== -->
      <view v-if="currentStep === 3">
        <view class="step-head">
          <text class="step-icon">🎯</text>
          <view class="step-head-text">
            <text class="step-title">想优先改善哪方面？</text>
            <text class="step-sub">没想好可以跳过，之后随时能改</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">必吃食物</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetMustEat" :key="getChipKey('m', i)"
              :class="{ 'chip-active': mustEat.indexOf(item) >= 0 }"
              @tap="toggleChip('mustEat', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'mustEat'">
            <input class="custom-input" placeholder="输入其他必吃" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('mustEat')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">健康目标</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetGoals" :key="getChipKey('g', i)"
              :class="{ 'chip-active': healthGoals.indexOf(item) >= 0 }"
              @tap="toggleChip('healthGoals', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'healthGoals'">
            <input class="custom-input" placeholder="输入其他目标" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('healthGoals')">
            <text>＋ 自定义添加</text>
          </view>
        </view>
      </view>
      <!-- /Step 3 -->
```

- [ ] **步骤 3：语法校验 + Commit**

```bash
node --check 提取的script块  # 预期无错误
git add cfc-frontend/pages/diet/preferences.vue
git commit -m "feat(diet): 饮食偏好调研 Step2口味偏好+Step3健康目标chip交互"
```

---

## 任务 3：样式（暖灶主题）+ 验收

**文件：**
- 修改：`cfc-frontend/pages/diet/preferences.vue`（`<style scoped>`）

- [ ] **步骤 1：编写 `<style scoped>`**

```css
<style scoped>
.preferences-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
  display: flex;
  flex-direction: column;
}
/* ===== 进度条 ===== */
.progress-bar { padding: 30rpx 32rpx 10rpx; }
.progress-track {
  height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, #FF8C42, #FFB366);
  border-radius: 6rpx; transition: width 0.3s ease;
}
.progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
.progress-label { font-size: 22rpx; color: #C2A78A; }
.progress-label-active { color: #FF8C42; font-weight: 600; }
/* ===== 内容 ===== */
.content { flex: 1; padding: 10rpx 32rpx 30rpx; box-sizing: border-box; }
.step-head { display: flex; align-items: center; margin: 20rpx 0 24rpx; }
.step-icon { font-size: 52rpx; margin-right: 20rpx; }
.step-head-text { display: flex; flex-direction: column; }
.step-title { font-size: 34rpx; font-weight: 700; color: #4A2E1A; }
.step-sub { font-size: 24rpx; color: #A08B72; margin-top: 6rpx; }
/* ===== 卡片 ===== */
.card {
  background: #FFFFFF; border-radius: 24rpx; padding: 28rpx;
  margin-bottom: 24rpx; box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
}
.card-title { font-size: 28rpx; font-weight: 600; color: #4A2E1A; margin-bottom: 20rpx; display: block; }
/* ===== chip ===== */
.chip-group { display: flex; flex-wrap: wrap; }
.chip {
  padding: 14rpx 28rpx; border-radius: 999rpx; background: #F5F0EA;
  font-size: 26rpx; color: #6B5340; margin: 0 16rpx 16rpx 0;
  border: 2rpx solid transparent;
}
.chip-active {
  background: #FF8C42; color: #FFFFFF; font-weight: 600;
  border-color: #E8732A;
}
/* ===== 自定义添加 ===== */
.custom-add {
  padding: 14rpx 0; font-size: 26rpx; color: #FF8C42; font-weight: 500;
}
.custom-row { display: flex; align-items: center; margin-top: 8rpx; }
.custom-input {
  flex: 1; border: 2rpx solid #FFD9B8; border-radius: 999rpx;
  padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
}
.custom-confirm {
  background: #FF8C42; color: #fff; font-size: 26rpx; font-weight: 600;
  padding: 14rpx 32rpx; border-radius: 999rpx; margin-left: 16rpx;
}
/* ===== 滑块 ===== */
.slider-row { display: flex; align-items: center; }
.slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
.slider { flex: 1; }
/* ===== 底栏 ===== */
.footer-bar {
  display: flex; padding: 20rpx 32rpx 30rpx; background: #FFFDF8;
  border-top: 2rpx solid #FFE9D4;
}
.footer-btn {
  flex: 1; text-align: center; padding: 24rpx 0; border-radius: 999rpx;
  font-size: 30rpx; font-weight: 600;
}
.footer-btn-ghost {
  background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
}
.footer-btn-primary {
  background: linear-gradient(135deg, #FF8C42, #FFB366); color: #FFFFFF;
}
</style>
```

**验证：** 无 CSS Grid、无中文类名、无 `?.`。

- [ ] **步骤 2：验收检查**

对照规格验收清单逐条核验：
- [ ] Step1 必填校验（`allergies.length === 0 && absoluteAvoid.length ===0` 时 goNext 弹 toast）
- [ ] Step2 四项 chip 均可选
- [ ] Step3 必吃/目标 chip 可选，无"系统推荐目标"区块
- [ ] 预填回填（`loadPreferences` 各数组赋值）
- [ ] 提交含 `cookingMethods`/`mustEat`（空数组也可）
- [ ] 暖橙主题（背景渐变/`#FF8C42`/圆角阴影）
- [ ] 无 `?.`、无 Grid、`：key`简单表达式、无自定义 nav-title

- [ ] **步骤 3：Commit**

```bash
git add cfc-frontend/pages/diet/preferences.vue
git commit -m "style(diet): 饮食偏好调研 暖灶暖橙主题样式"
```

---

## 自检记录

**1. 规格覆盖度：** 规格 4 节全覆盖——步骤流（任务1 进度条+底栏/任务2 内容）、交互（chip+自定义）、视觉（任务3）、后端兼容（零改动，全部字段映射见任务1 save 提交体）。
**2. 占位符扫描：** 无"待定/TODO"。任务2 步骤1 已含 Step2 四卡片完整代码（辣度/口味/菜系/烹饪方式），无"类似任务"式简写。
**3. 类型一致性：** 字段名 `allergies/absoluteAvoid/religiousDiet/spiceLevel/flavorPref/cuisinePref/cookingMethods/healthGoals/mustEat` 与 DTO 一致；方法 `toggleChip/openCustom/addCustom/goNext/goPrev/savePreferences` 前后引用一致；预设常量名 `presetAllergies...presetGoals` 与 computed 一致。

**已知修正（对比规格）：** Step3 无"系统推荐目标"区块（规格自检已确认后端无 `systemGoals` 数据源）。

---

**验证方式：** 修改后需在 HBuilderX 重新打包（agent 不执行 build 命令）；`node --check` 校验 script 块语法。