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

- 日期：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`（本任务仅前端，无后端改动）