cfc/cfc-frontend/.superpowers/sdd/task-6-report.md

任务 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 个）