# 家庭成员渠道展示设计文档

**日期：** 2026-05-22
**版本：** 1.0

---

## 1. 背景

管理端「家庭成员」列表（`familyMember.vue`）目前不展示渠道信息。后端 `FamilyMemberEntity` 已有 `channelIds` 字段（逗号分隔的渠道 ID），但 `FamilyMemberDTO` 未暴露，需后端补充渠道名称字段，前端新增列展示。

---

## 2. 改动范围

| 端 | 文件 | 改动类型 |
|----|------|---------|
| 后端 | `FamilyMemberDTO.java` | 新增 `channelNames` 字段 |
| 后端 | `FamilyMemberServiceImpl.java` | 重写 `page()` 方法，填充 `channelNames` |
| 前端 | `src/views/modules/member/components/familyMember.vue` | 新增「所属渠道」列 |

---

## 3. 后端设计

### 3.1 FamilyMemberDTO 新增字段

```java
@ApiModelProperty(value = "渠道名称，逗号分隔，如「渠道A、渠道B」")
private String channelNames;
```

### 3.2 FamilyMemberServiceImpl — 重写 page()

在基类 `CrudServiceImpl.page()` 结果返回后，批量填充 `channelNames`：

```
1. 收集所有行的 channelIds（过滤空值）
2. 解析出所有渠道 ID，去重
3. 一次性查询 ChannelEntity（channelDao.selectBatchIds）
4. 建立 id -> channelName 的 Map
5. 逐行拼接 channelNames（逗号分隔，若 channelIds 为空则 channelNames 为空字符串）
```

**只做一次批量查询，不产生 N+1 问题。**

---

## 4. 前端设计

**文件：** `src/views/modules/member/components/familyMember.vue`

在「就读学校」列后新增：

```html
<el-table-column label="所属渠道">
  <template slot-scope="scope">{{ scope.row.channelNames || '-' }}</template>
</el-table-column>
```

- `channelNames` 有值时直接展示（如「渠道A、渠道B」）
- 为空时展示「-」

---

## 5. 数据流

```
GET /core/family/member/page
  → FamilyMemberServiceImpl.page()
    → 基类查询 ht_family_member
    → 批量查 ht_channel（by channelIds）
    → 填充每行 channelNames
  → 返回 PageData<FamilyMemberDTO>
  → 前端列表展示 channelNames
```

---

## 6. 不在本次范围内

- 管理端修改成员渠道的功能（规格书 §4.4 属于小程序端能力）
- 渠道筛选/过滤