Home Explore Help
Register Sign In
liaoxg
/
cfc
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 41fe832490
Branches Tags
cfc
/
docs
/
superpowers
/
specs
/
2026-08-04-report-confirm-member-selector-design.md

2026-08-04-report-confirm-member-selector-design.md 4.3 KB
History Raw

健康报告确认页 · 被检测人选择面板整合设计

  • 日期：2026-08-04
  • 文件：cfc-frontend/pages/health/report-confirm.vue
  • 状态：已确认

背景与目标

上传健康报告后进入确认页（report-confirm.vue），当前"选择/添加被检测人"功能位于独立的"选择家庭成员"卡片中（仅 needBind=true 时显示），与"基本信息"卡片分离。

目标：将被检测人的选择/添加功能整合到"基本信息"卡片中——被检测人字段可直接点击选择或添加被测人，移除独立的选择卡片与新建表单卡片。

需求确认（用户已确认）

  1. 交互方式：点击被检测人字段弹出选择面板（页面内联展开，非弹窗）
  2. 面板内容：保留候选匹配列表 + 全量家庭成员列表 + 新建成员入口（全部保留）
  3. 展示条件：始终可点击（needBind=false 时也允许修改绑定对象）
  4. 新建表单：面板内嵌表单（姓名/性别/年龄 + 确认创建）
  5. 回填：选中成员后，被检测人字段显示昵称，性别/年龄自动回填
  6. 原卡片：完全移除独立"选择家庭成员"卡片和"新建家庭成员表单"卡片

设计方案（方案 A：页面内联展开面板）

1. 被检测人字段改造（基本信息卡片内）

  • 被检测人右侧加"选择 ›"箭头，点击后在基本信息卡片下方原地展开选择面板
  • 未选中时显示：extractedName || '未识别'（needBind 时加"需手动绑定"红色提示色）
  • 已选中时显示：所选成员昵称 + 选中标记，仍可点击修改
  • 性别/年龄字段自动回填所选成员信息（若成员有 gender/age）

2. 选择面板结构（点击展开，三部分，复用现有样式与逻辑）

▼ 选择面板（浅色背景卡片）
├── 候选匹配列表（candidates 存在时显示顶部）
│    └── 复用 .candidate-item / score-bar 样式，点击 → selectAndClose(cand)
├── 全量家庭成员列表（candidates 为空或"查看全部"时）
│    └── 复用 .member-item 样式，点击 → selectAndClose(member)
└── 新建成员入口
     └── "不在列表中？新建家庭成员" → 内嵌展开表单
         └── 复用 .gender-selector / doAutoCreate()
  • 候选/成员点击统一走新方法 selectAndClose(member)：设置 selectedMemberId（member.id || member.userId）→ 回填昵称/性别/年龄 → 自动收起面板
  • selectCandidate() / selectMember() 随独立卡片一并移除（无其他调用点），其选中逻辑并入 selectAndClose
  • 新建成功 → createdMemberId 更新 + 回填 + 收起
  • 面板始终可点击（needBind=false 也允许改选，改选后覆盖自动匹配）

3. 移除内容

  • 删除独立"选择家庭成员"卡片（v-if="needBind" 整块）
  • 删除独立"新建家庭成员表单"卡片（auto-create-card）
  • toggleAutoCreate() 改为面板内嵌逻辑

4. 数据/逻辑变更

项 变更
新增 showMemberPanel: false 控制面板展开/收起
loadFamilyMembers() onLoad 时始终调用（不再仅 needBind 时）
新增 selectedMemberObj 从 familyMembers/candidates 查找选中成员，用于回填昵称/性别/年龄
selectAndClose(member) 回填：extractedName = member.nickname、extractedGender = member.gender、extractedAge = member.age（成员无对应字段时保留原值）→ 更新 selectedMemberObj → 收起面板
canConfirm 不变（needBind 时必须有 selectedMemberId/createdMemberId）
doConfirm 不变（subjectId 优先级：selectedMemberId > createdMemberId > matchedMemberId > memberId）
新增 selectAndClose(member) 选中后回填 + 收起面板

5. 样式

  • 被检测人行新增可点击样式（右侧箭头图标）
  • 面板容器样式（浅灰背景、圆角、内边距）
  • 其余全部复用现有 .candidate-* / .member-* / .create-* 样式

约束（AGENTS.md 规范）

  • Vue 2 Options API，禁止 Composition API
  • 禁止可选链 ?.（用 && 替代）
  • 禁止在 :class 中调用带参数方法
  • 禁止中文 CSS 类名
  • 小程序用 flexbox，禁止 CSS Grid
  • 统一 @PostMapping（本任务仅前端，无后端改动）