# 任务 6 实现报告 — 单接口页面（批次 A · 9 个）

**基准提交：** 7b4c3eea  
**完成时间：** 2026-08-06  
**任务说明：** 为 9 个组件/页面添加 `v-if="hasFamily"` 包裹家庭数据区，无家庭时渲染 `<FamilyEmptyState type="card/list" />`

---

## 改造文件清单

| # | 文件 | 接口 | type | 改动行数 |
|---|---|---|---|---|
| 1 | `components/DimensionProducts.vue` | getDimensionProducts | card | 已在任务 4 完成 |
| 2 | `components/FamilyMemberStrip.vue` | getPendingFamilyRequests | card | +8 |
| 3 | `pages/action-detail/interaction-log.vue` | addInteraction | card | +11 |
| 4 | `pages/action-detail/member-action-detail.vue` | getEnergyOverview | card | +8 |
| 5 | `pages/assessment/purchase.vue` | createAssessmentOrder | card | +11 |
| 6 | `pages/body-detail/member-body-detail.vue` | getEnergyOverview | card | +8 |
| 7 | `pages/body/index.vue` | getEnergyOverview | card | +8 |
| 8 | `pages/body/member-body-detail.vue` | getEnergyOverview | card | +8 |
| 9 | `pages/energy/detail.vue` | getEnergyLogs | list | +10 |

---

## 每个文件的改动详情

### 1. `components/DimensionProducts.vue`
- **状态：** 已在任务 4 完成
- **改动：** 包裹产品数据区 `<view v-if="hasFamily">` + `<FamilyEmptyState type="card" />`
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 2. `components/FamilyMemberStrip.vue`
- **改动：**
  - 将外层 `v-if="(members && members.length > 0) || isAdmin"` 替换为 `v-if="hasFamily"`
  - 在 `computed` 中添加 `hasFamily` 计算属性
  - 在模板末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
- **保留不动：** showModal 同意/拒绝加入申请的业务逻辑（approveRequest/rejectRequest）
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 3. `pages/action-detail/interaction-log.vue`
- **改动：**
  - 在 `computed` 中添加 `hasFamily` 计算属性
  - 将家庭数据区（4 个 form-section + submit-bar）包裹在 `<view v-if="hasFamily">...</view>` 中
  - 末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
  - 页头 `<view class="page-header">` 保留不动
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 4. `pages/action-detail/member-action-detail.vue`
- **改动：**
  - 在 `computed` 中添加 `hasFamily` 计算属性
  - 将五维能量条至底部占位之间的所有内容包裹在 `<view v-if="hasFamily">...</view>` 中
  - 末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
  - 页头导航栏（nav-bar）保留不动
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 5. `pages/assessment/purchase.vue`
- **改动：**
  - 在 `data()` 后添加 `computed` 对象含 `hasFamily` 计算属性
  - 将页面头部标题之后的所有内容（规划师选择、任务模板、费用明细、提交按钮）包裹在 `<view v-if="hasFamily">...</view>` 中
  - 末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 6. `pages/body-detail/member-body-detail.vue`
- **改动：**
  - 在 `computed` 中添加 `hasFamily` 计算属性
  - 将五维能量条至底部占位之间的所有内容包裹在 `<view v-if="hasFamily">...</view>` 中
  - 末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
  - 页头导航栏保留不动
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 7. `pages/body/index.vue`
- **改动：**
  - 在 `computed` 中添加 `hasFamily` 计算属性
  - 将五维能量条（FamilyEnergyBar）至底部占位（bottom-spacer）及 AIFloatingAvatar 包裹在 `<view v-if="hasFamily">...</view>` 中
  - 末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
  - 保留：品牌头部、雷达图、家庭成员选择条、游客专属区块
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 8. `pages/body/member-body-detail.vue`
- **改动：**
  - 在 `computed` 中添加 `hasFamily` 计算属性
  - 将五维能量条至底部占位之间的所有内容包裹在 `<view v-if="hasFamily">...</view>` 中
  - 末尾添加 `<view v-else><FamilyEmptyState type="card" /></view>`
  - 页头导航栏保留不动
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

### 9. `pages/energy/detail.vue`
- **改动：**
  - 在 `data()` 后添加 `computed` 对象含 `hasFamily` 计算属性
  - 流水列表区（`.logs-section`）添加 `v-if="hasFamily"` 条件（与原有 `v-if="!loading"` 并存）
  - 末尾添加 `<view v-else><FamilyEmptyState type="list" /></view>`
  - 保留：dim-header（维度信息）、BaseLoading
- **grep 验证：** `FamilyEmptyState` 出现 1 次，`hasFamily` 出现 3 次

---

## Grep 验证输出

```
=== components/DimensionProducts.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== components/FamilyMemberStrip.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/action-detail/interaction-log.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/action-detail/member-action-detail.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/assessment/purchase.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/body-detail/member-body-detail.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/body/index.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/body/member-body-detail.vue ===
FamilyEmptyState: 1
hasFamily: 3
=== pages/energy/detail.vue ===
FamilyEmptyState: 1
hasFamily: 3
```

---

## 注意事项

1. **DimensionProducts.vue** — 已在之前任务中完成，本次验证其正确性
2. **FamilyMemberStrip.vue** — 保留了 `approveRequest`/`rejectRequest` 的 showModal 业务逻辑，未做任何改动
3. **energy/detail.vue** — 唯一使用 `type="list"` 的文件，其余 8 个均使用 `type="card"`
4. **无新增 import/components 注册** — FamilyEmptyState 已在 main.js 全局注册，各文件无需额外引入
5. **无禁用语法** — 未使用可选链 `?.`、`:key` 表达式、中文 CSS 类名、CSS Grid

---

## 后续任务

- **任务 7：** 单接口页面（批次 B · 9 个）
- **任务 8：** 单接口页面（批次 C · 5 个）+ 特例（2 个）