|
|
@@ -0,0 +1,78 @@
|
|
|
+# 健康报告确认页 · 被检测人选择面板整合设计
|
|
|
+
|
|
|
+- 日期：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 / selectCandidate()
|
|
|
+├── 全量家庭成员列表（candidates 为空或"查看全部"时）
|
|
|
+│ └── 复用 .member-item / selectMember()
|
|
|
+└── 新建成员入口
|
|
|
+ └── "不在列表中？新建家庭成员" → 内嵌展开表单
|
|
|
+ └── 复用 .gender-selector / doAutoCreate()
|
|
|
+```
|
|
|
+
|
|
|
+- 选中候选/成员 → `selectedMemberId` 更新 + 回填昵称/性别/年龄 + 自动收起面板
|
|
|
+- 新建成功 → `createdMemberId` 更新 + 回填 + 收起
|
|
|
+- 面板始终可点击（`needBind=false` 也允许改选，改选后覆盖自动匹配）
|
|
|
+
|
|
|
+### 3. 移除内容
|
|
|
+
|
|
|
+- 删除独立"选择家庭成员"卡片（`v-if="needBind"` 整块）
|
|
|
+- 删除独立"新建家庭成员表单"卡片（`auto-create-card`）
|
|
|
+- `toggleAutoCreate()` 改为面板内嵌逻辑
|
|
|
+
|
|
|
+### 4. 数据/逻辑变更
|
|
|
+
|
|
|
+| 项 | 变更 |
|
|
|
+|----|------|
|
|
|
+| 新增 `showMemberPanel: false` | 控制面板展开/收起 |
|
|
|
+| `loadFamilyMembers()` | onLoad 时**始终调用**（不再仅 `needBind` 时） |
|
|
|
+| 新增 `selectedMemberObj` | 从 familyMembers/candidates 查找选中成员，用于回填昵称/性别/年龄 |
|
|
|
+| `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`（本任务仅前端，无后端改动）
|
