# Task 8 实现报告 — 单接口页面接入家庭空态（批次 C）

## 概览

| 文件 | 接口 | 改动类型 | 改动行数（新增/删除） |
|------|------|----------|----------------------|
| `pages/share/index.vue` | getFamilyFootprint | 常规（FamilyEmptyState type="card"） | +15 / −2 |
| `pages/teacher/teacher-profile.vue` | generateParentInvite | 常规（FamilyEmptyState type="card"） | +8 / −0 |
| `pages/user-edit/user-edit.vue` | requestJoinByCode | 常规（FamilyEmptyState type="card"） | +44 / −28 |
| `pages/wisdom-detail/member-wisdom-detail.vue` | getEnergyOverview | 常规（FamilyEmptyState type="card"） | +11 / −0 |
| `pages/wisdom/member-wisdom-detail.vue` | getEnergyOverview | 常规（FamilyEmptyState type="card"） | +11 / −0 |
| `pages/profile-extra/family-members.vue` | 特例（不套 FamilyEmptyState） | +6 / −1 |
| `pages/invite/join.vue` | 特例（零改动） | — | — |

**总计**：6 文件，79 行新增，22 行删除。

---

## 常规改造（5 文件）

每个文件均做了以下两件事：

1. **script 追加 computed**
   ```js
   computed: {
     hasFamily: function() {
       return this.$store.getters.hasFamily
     }
   }
   ```
   已有 computed 的对象则追加字段；无 computed 的则新增 computed 块。

2. **模板加 v-if/v-else 包裹**
   - 原有数据区内容保持一字不动
   - 外层用 `<view v-if="hasFamily">` 包裹
   - 对应 `<view v-else><FamilyEmptyState type="card" /></view>`
   - FamilyEmptyState 已全局注册（main.js），未在任何组件内 import

### 各文件详情

#### 1. `pages/share/index.vue`
- `sp-header`、`sp-body`、`sp-footer` 三个数据区均改为 `v-if="hasFamily && ..."`（保留原条件组合）
- `sp-qr`（扫码区）保持不动，作为对外引流入口
- `v-else` 插在第 24 行（sp-footer 之后、sp-qr 之前）
- grep 验证：`FamilyEmptyState` = 1，`hasFamily` = 5

#### 2. `pages/teacher/teacher-profile.vue`
- `switch-out-btn`（切换家长端）保持不动（全局可见）
- `user-card` + `menu-list` 整体用 `<view v-if="hasFamily">` 包裹
- `v-else` 紧跟 `</view>` 闭合标签之后
- `modal-mask` 密码弹窗保持不动
- grep 验证：`FamilyEmptyState` = 1，`hasFamily` = 3

#### 3. `pages/user-edit/user-edit.vue`
- 角色选择区（`role-select-section`）保持不动（新用户流程可见）
- `form-section` 的 `v-if="isEdit"` 改为 `v-if="isEdit && hasFamily"`
- `v-else-if="isEdit"` 分支插入 `FamilyEmptyState type="card"`
- computed 中追加 `hasFamily`（原已有 5 个 computed 字段）
- grep 验证：`FamilyEmptyState` = 1，`hasFamily` = 3

#### 4. `pages/wisdom-detail/member-wisdom-detail.vue`
- `nav-bar` 保持不动
- 从 `FamilyEnergyBar` 到 `DimensionProducts` 的整个数据区用 `<view v-if="hasFamily">` 包裹
- `v-else` 插入在 `</view>` 之后、`bottom-spacer` 之前
- 新增 computed 块含 `hasFamily`
- grep 验证：`FamilyEmptyState` = 1，`hasFamily` = 3

#### 5. `pages/wisdom/member-wisdom-detail.vue`
- 与第 4 文件完全对称（同名结构）
- grep 验证：`FamilyEmptyState` = 1，`hasFamily` = 3

---

## 特例处理（2 文件）

### 6. `pages/profile-extra/family-members.vue`
- 仅在 `SharePoster` 上添加 `v-if="hasFamily"`，并补充 `v-else` 渲染简短提示文字：
  ```vue
  <SharePoster v-if="hasFamily" ... />
  <view v-else class="empty-tip">暂无家庭成员，请先创建或加入家庭</view>
  ```
- 在 computed 中追加 `hasFamily`
- 在 `<style>` 末尾添加 `.empty-tip` 样式（居中文字，padding 60rpx 0，字号 28rpx，颜色 #999）
- **未使用** FamilyEmptyState 组件
- 保留已有的 `showModal`（同意/拒绝加入申请弹窗）等业务逻辑不动
- grep 验证：`hasFamily` = 3，`FamilyEmptyState` = 0

### 7. `pages/invite/join.vue`
- **零改动**。`git diff HEAD -- pages/invite/join.vue` 输出 0 行，确认完全未触碰。
- 原因：申请加入页本身是无家庭态唯一可执行动作，不套空态。

---

## 验证结果

### Grep 计数验证（全部通过）

```
pages/share/index.vue           : FamilyEmptyState=1  hasFamily=5   ✓ (≥1, ≥2)
pages/teacher/teacher-profile.vue: FamilyEmptyState=1  hasFamily=3   ✓ (≥1, ≥2)
pages/user-edit/user-edit.vue   : FamilyEmptyState=1  hasFamily=3   ✓ (≥1, ≥2)
pages/wisdom-detail/member-wisdom-detail.vue: FamilyEmptyState=1  hasFamily=3   ✓ (≥1, ≥2)
pages/wisdom/member-wisdom-detail.vue: FamilyEmptyState=1  hasFamily=3   ✓ (≥1, ≥2)
pages/profile-extra/family-members.vue: FamilyEmptyState=0  hasFamily=3 ✓ (==0, ≥2)
```

### Git diff 范围验证

```
$ git diff --stat HEAD -- \
    pages/share/index.vue \
    pages/teacher/teacher-profile.vue \
    pages/user-edit/user-edit.vue \
    pages/wisdom-detail/member-wisdom-detail.vue \
    pages/wisdom/member-wisdom-detail.vue \
    pages/profile-extra/family-members.vue

6 files changed, 79 insertions(+), 22 deletions(-)
```

`pages/invite/join.vue` 不在 diff 范围内（0 行改动）。

---

## 严格遵守的约束

- ✅ 未改动 store/index.js、utils/api.js、main.js、FamilyEmptyState 组件
- ✅ 未改动这 6 个文件之外的任何文件
- ✅ FamilyEmptyState 未在任何组件内 import/components 注册
- ✅ 未使用 `?.` 可选链
- ✅ 未使用 CSS Grid
- ✅ 未在 `:key` 中使用表达式
- ✅ 未在模板中调用方法绑定 class
- ✅ 未删除或重构任何原有逻辑
- ✅ 未调整任何原有样式（新增 .empty-tip 除外）
- ✅ 未进行 git commit
- ✅ family-members.vue 中已有的 showModal 业务逻辑保留不动
- ✅ 无中文 CSS 类名