# 团队层级树与推荐关系可视化 实现计划

> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。

**目标：** 实现「我的」页面推荐人卡片、团队层级入口、独立树形页面（从下往上生长），去掉富页面推荐码，新增 3 个后端接口并扩展 1 个现有接口。

**架构：**
- 后端：在 `CommissionService` 新增 `getTeamConsumption`、`getMyReferrer`、`getTeamTree`，扩展 `getTeamList`；`CommissionController` 暴露 4 个 POST 接口
- 前端：删除 `wealth/index.vue` 推荐码横条；`profile/profile.vue` 新增推荐人卡片 + 入口按钮；新建 `profile/team-tree.vue` 树形页面（flex column-reverse + 递归组件）；`utils/api.js` 新增 3 个方法；`pages.json` 注册新页面

**技术栈：** Spring Boot 2.7 + MyBatis-Plus / uni-app Vue 2 (Options API)

---

### 任务 1：后端 - 新增 Mapper 依赖注入

**文件：**
- 修改：`cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java:39-60`

- [ ] **步骤 1：编写测试用例（手工验证）**

```bash
# 编译验证
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 2：添加注入字段**

在 `CommissionService` 类中已有的注入字段后追加：

```java
    @Resource
    private ProductOrderMapper productOrderMapper;

    @Resource
    private ReferralTreeMapper referralTreeMapper;

    @Resource
    private CfReferralService cfReferralService;
```

- [ ] **步骤 3：编译验证**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 4：Commit**

```bash
git add cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java
git commit -m "feat: 注入 ProductOrderMapper、ReferralTreeMapper、CfReferralService 到 CommissionService"
```

---

### 任务 2：后端 - 实现 `getTeamConsumption`（团队消费统计）

**文件：**
- 修改：`cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java`（在 `getTeamStats` 方法后，约第 599 行后追加）

- [ ] **步骤 1：编写 curl 测试**

```bash
curl -X POST http://localhost:9082/api/commission/team/consumption \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{"maxLevel": 3}'
# 预期：{"code":200,"data":{"totalConsumption":...,"levelBreakdown":[...],"totalMembers":...,"maxLevel":3}}
```

- [ ] **步骤 2：实现方法**

```java
    /**
     * 团队总消费额分级汇总（按 referral_tree level 聚合）
     * maxLevel 默认 3，可后台配置
     */
    public Map<String, Object> getTeamConsumption(Long userId, Integer maxLevel) {
        if (maxLevel == null || maxLevel <= 0) maxLevel = 3;
        if (maxLevel > 10) maxLevel = 10; // 安全上限

        Map<String, Object> result = new LinkedHashMap<>();
        List<Map<String, Object>> levelBreakdown = new ArrayList<>();

        // 1. 查 referral_tree: parentId = userId 且 level <= maxLevel
        List<ReferralTree> treeNodes = referralTreeMapper.selectList(
                new LambdaQueryWrapper<ReferralTree>()
                        .eq(ReferralTree::getParentId, userId)
                        .le(ReferralTree::getLevel, maxLevel)
                        .orderByAsc(ReferralTree::getLevel)
        );

        if (treeNodes.isEmpty()) {
            result.put("totalConsumption", 0);
            result.put("levelBreakdown", levelBreakdown);
            result.put("totalMembers", 0);
            result.put("maxLevel", maxLevel);
            return result;
        }

        // 2. 按 level 分组收集 childId
        Map<Integer, List<Long>> levelToChildIds = new LinkedHashMap<>();
        for (ReferralTree node : treeNodes) {
            levelToChildIds.computeIfAbsent(node.getLevel(), k -> new ArrayList<>()).add(node.getChildId());
        }

        // 3. 查 product_orders: buyerId IN childIds 且 fulfillStatus = 'completed'
        int totalConsumption = 0;
        for (Map.Entry<Integer, List<Long>> entry : levelToChildIds.entrySet()) {
            Integer level = entry.getKey();
            List<Long> childIds = entry.getValue();
            if (childIds.isEmpty()) continue;

            LambdaQueryWrapper<ProductOrder> orderWrapper = new LambdaQueryWrapper<ProductOrder>()
                    .in(ProductOrder::getBuyerId, childIds)
                    .eq(ProductOrder::getFulfillStatus, "completed");
            Long sum = productOrderMapper.selectList(orderWrapper).stream()
                    .mapToLong(o -> o.getTotalAmount() != null ? o.getTotalAmount() : 0)
                    .sum();

            int memberCount = childIds.size();
            totalConsumption += sum;

            Map<String, Object> levelInfo = new LinkedHashMap<>();
            levelInfo.put("level", level);
            levelInfo.put("memberCount", memberCount);
            levelInfo.put("consumption", (int) sum);
            levelBreakdown.add(levelInfo);
        }

        result.put("totalConsumption", totalConsumption);
        result.put("levelBreakdown", levelBreakdown);
        result.put("totalMembers", treeNodes.size());
        result.put("maxLevel", maxLevel);
        return result;
    }
```

- [ ] **步骤 3：编译验证**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 4：Commit**

```bash
git add cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java
git commit -m "feat: 实现 getTeamConsumption 团队消费统计（按 referral_tree level 聚合，fulfillStatus=completed）"
```

---

### 任务 3：后端 - 实现 `getMyReferrer`（我的推荐人）

**文件：**
- 修改：`cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java`（在 getTeamConsumption 后新增）

- [ ] **步骤 1：实现方法**

```java
    /**
     * 获取我的推荐人信息（直推人）
     */
    public Map<String, Object> getMyReferrer(Long userId) {
        Map<String, Object> result = new LinkedHashMap<>();
        User user = userMapper.selectById(userId);
        if (user == null || user.getReferrerId() == null) {
            result.put("hasReferrer", false);
            return result;
        }
        User referrer = userMapper.selectById(user.getReferrerId());
        if (referrer == null) {
            result.put("hasReferrer", false);
            return result;
        }
        result.put("hasReferrer", true);
        result.put("referrerId", referrer.getId());
        result.put("nickname", referrer.getNickname());
        result.put("avatar", referrer.getAvatar());
        result.put("referralCode", referrer.getReferralCode());
        result.put("bindTime", user.getCreatedAt()); // 以用户创建时间作为绑定时间近似
        return result;
    }
```

- [ ] **步骤 2：编译验证**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 3：Commit**

```bash
git add cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java
git commit -m "feat: 实现 getMyReferrer 获取我的直推人信息"
```

---

### 任务 4：后端 - 实现 `getTeamTree`（树形扁平数据）

**文件：**
- 修改：`cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java`（在 getMyReferrer 后新增）

- [ ] **步骤 1：实现方法**

```java
    /**
     * 获取团队树形扁平数据（不含根节点，仅 level>=1 成员）
     * 每个节点包含 memberConsumption、myCfEarnedFromMember
     */
    public Map<String, Object> getTeamTree(Long userId, Integer maxLevel) {
        if (maxLevel == null || maxLevel <= 0) maxLevel = 3;
        if (maxLevel > 10) maxLevel = 10;

        Map<String, Object> result = new LinkedHashMap<>();
        List<Map<String, Object>> nodes = new ArrayList<>();

        // 1. 查 referral_tree
        List<ReferralTree> treeNodes = referralTreeMapper.selectList(
                new LambdaQueryWrapper<ReferralTree>()
                        .eq(ReferralTree::getParentId, userId)
                        .le(ReferralTree::getLevel, maxLevel)
                        .orderByAsc(ReferralTree::getLevel)
        );

        if (treeNodes.isEmpty()) {
            result.put("nodes", nodes);
            result.put("totalMembers", 0);
            result.put("maxLevel", maxLevel);
            return result;
        }

        // 2. 批量查用户基本信息
        List<Long> childIds = treeNodes.stream().map(ReferralTree::getChildId).distinct().collect(Collectors.toList());
        Map<Long, User> userMap = userMapper.selectBatchIds(childIds).stream()
                .collect(Collectors.toMap(User::getId, u -> u));

        // 3. 按成员聚合 memberConsumption（fulfillStatus=completed 订单总额）
        Map<Long, Integer> memberConsumptionMap = new HashMap<>();
        if (!childIds.isEmpty()) {
            List<ProductOrder> orders = productOrderMapper.selectList(
                    new LambdaQueryWrapper<ProductOrder>()
                            .in(ProductOrder::getBuyerId, childIds)
                            .eq(ProductOrder::getFulfillStatus, "completed")
            );
            for (ProductOrder o : orders) {
                if (o.getBuyerId() != null && o.getTotalAmount() != null) {
                    memberConsumptionMap.merge(o.getBuyerId(), o.getTotalAmount(), Integer::sum);
                }
            }
        }

        // 4. 按成员聚合 myCfEarnedFromMember（commission_records 已结算+待结算，排除 cancelled）
        Map<Long, Integer> myCfEarnedMap = new HashMap<>();
        if (!childIds.isEmpty()) {
            List<CommissionRecord> records = commissionRecordMapper.selectList(
                    new LambdaQueryWrapper<CommissionRecord>()
                            .eq(CommissionRecord::getReferrerId, userId)
                            .in(CommissionRecord::getBuyerId, childIds)
                            .ne(CommissionRecord::getStatus, "cancelled")
            );
            for (CommissionRecord r : records) {
                if (r.getBuyerId() != null && r.getCommissionAmount() != null) {
                    myCfEarnedMap.merge(r.getBuyerId(), r.getCommissionAmount(), Integer::sum);
                }
            }
        }

        // 5. 组装 nodes（不含根节点，仅 level>=1 的成员）
        for (ReferralTree node : treeNodes) {
            User u = userMap.get(node.getChildId());
            if (u == null) continue;

            Map<String, Object> n = new LinkedHashMap<>();
            n.put("userId", node.getChildId());
            n.put("nickname", u.getNickname());
            n.put("avatar", u.getAvatar());
            n.put("level", node.getLevel());
            n.put("parentId", node.getParentId());
            n.put("referrerId", u.getReferrerId());
            n.put("memberConsumption", memberConsumptionMap.getOrDefault(node.getChildId(), 0));
            n.put("myCfEarnedFromMember", myCfEarnedMap.getOrDefault(node.getChildId(), 0));
            nodes.add(n);
        }

        result.put("nodes", nodes);
        result.put("totalMembers", nodes.size());
        result.put("maxLevel", maxLevel);
        return result;
    }
```

- [ ] **步骤 2：编译验证**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 3：Commit**

```bash
git add cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java
git commit -m "feat: 实现 getTeamTree 树形扁平数据（含 memberConsumption、myCfEarnedFromMember）"
```

---

### 任务 5：后端 - 扩展 `getTeamList`（新增消费/CF 字段）

**文件：**
- 修改：`cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java`（`getTeamList` 方法，约第 460-543 行）

- [ ] **步骤 1：在 getTeamList 中，循环查询 memberConsumption 和 myCfEarnedFromMember 之前，改为预查所有成员的汇总**

在现有 `getTeamList` 方法中，找到 `for (Map.Entry<Long, Map<String, Object>> entry : memberMap.entrySet())` 循环**之前**，插入预查逻辑（替换现有循环内的逐成员查询）：

```java
        // 预查所有成员的 memberConsumption 和 myCfEarnedFromMember
        Set<Long> allBuyerIds = memberMap.keySet();
        Map<Long, Integer> memberConsumptionMap = new HashMap<>();
        Map<Long, Integer> myCfEarnedMap = new HashMap<>();

        if (!allBuyerIds.isEmpty()) {
            // memberConsumption：该成员已完成履约订单总额
            LambdaQueryWrapper<ProductOrder> consumptionWrapper = new LambdaQueryWrapper<ProductOrder>()
                    .in(ProductOrder::getBuyerId, allBuyerIds)
                    .eq(ProductOrder::getFulfillStatus, "completed");
            for (ProductOrder o : productOrderMapper.selectList(consumptionWrapper)) {
                if (o.getBuyerId() != null && o.getTotalAmount() != null) {
                    memberConsumptionMap.merge(o.getBuyerId(), o.getTotalAmount(), Integer::sum);
                }
            }
            // myCfEarnedFromMember：我从该成员消费获得的 CF 总额
            LambdaQueryWrapper<CommissionRecord> cfWrapper = new LambdaQueryWrapper<CommissionRecord>()
                    .eq(CommissionRecord::getReferrerId, userId)
                    .in(CommissionRecord::getBuyerId, allBuyerIds)
                    .ne(CommissionRecord::getStatus, "cancelled");
            if ("L1".equals(level)) cfWrapper.eq(CommissionRecord::getLevel, 1);
            else if ("L2".equals(level)) cfWrapper.eq(CommissionRecord::getLevel, 2);
            SortUtil.applySort(cfWrapper);
            for (CommissionRecord r : commissionRecordMapper.selectList(cfWrapper)) {
                if (r.getBuyerId() != null && r.getCommissionAmount() != null) {
                    myCfEarnedMap.merge(r.getBuyerId(), r.getCommissionAmount(), Integer::sum);
                }
            }
        }
```

- [ ] **步骤 2：在现有循环内部，用预查结果替换原来的逐成员查询，加入新字段**

找到现有循环内：
```java
            int commissionEarned = commissionRecordMapper.selectList(commissionWrapper).stream()
                    .mapToInt(r -> r.getCommissionAmount() != null ? r.getCommissionAmount() : 0)
                    .sum();
            memberInfo.put("commissionEarned", commissionEarned);
```
替换为：
```java
            memberInfo.put("memberConsumption", memberConsumptionMap.getOrDefault(buyerId, 0));
            memberInfo.put("myCfEarnedFromMember", myCfEarnedMap.getOrDefault(buyerId, 0));
            // 保留原有 commissionEarned（用于展示佣金）
            int commissionEarned = commissionRecordMapper.selectList(commissionWrapper).stream()
                    .mapToInt(r -> r.getCommissionAmount() != null ? r.getCommissionAmount() : 0)
                    .sum();
            memberInfo.put("commissionEarned", commissionEarned);
```

- [ ] **步骤 3：编译验证**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 4：Commit**

```bash
git add cfc-backend/src/main/java/com/etotem/cfc/service/CommissionService.java
git commit -m "feat: 扩展 getTeamList 新增 memberConsumption、myCfEarnedFromMember 字段"
```

---

### 任务 6：后端 - 新增 Controller 端点

**文件：**
- 修改：`cfc-backend/src/main/java/com/etotem/cfc/controller/CommissionController.java`（在类末尾前追加 3 个方法）

- [ ] **步骤 1：追加 3 个新端点**

```java
    /**
     * 团队消费额分级汇总
     */
    @PostMapping("/team/consumption")
    public Result<Map<String, Object>> teamConsumption(@RequestAttribute("userId") Long userId,
                                                        @RequestBody Map<String, Object> params) {
        Integer maxLevel = params.get("maxLevel") != null
                ? ((Number) params.get("maxLevel")).intValue()
                : 3;
        return Result.success(commissionService.getTeamConsumption(userId, maxLevel));
    }

    /**
     * 获取我的推荐人
     */
    @PostMapping("/my-referrer")
    public Result<Map<String, Object>> myReferrer(@RequestAttribute("userId") Long userId) {
        return Result.success(commissionService.getMyReferrer(userId));
    }

    /**
     * 团队树形扁平数据
     */
    @PostMapping("/team/tree")
    public Result<Map<String, Object>> teamTree(@RequestAttribute("userId") Long userId,
                                                 @RequestBody Map<String, Object> params) {
        Integer maxLevel = params.get("maxLevel") != null
                ? ((Number) params.get("maxLevel")).intValue()
                : 3;
        return Result.success(commissionService.getTeamTree(userId, maxLevel));
    }
```

- [ ] **步骤 2：编译验证**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 3：Commit**

```bash
git add cfc-backend/src/main/java/com/etotem/cfc/controller/CommissionController.java
git commit -m "feat: 新增 /api/commission/team/consumption、/my-referrer、/team/tree 接口"
```

---

### 任务 7：后端 - 更新 API_REFERENCE.md

**文件：**
- 修改：`docs/superpowers/api/API_REFERENCE.md`（在 4.21 佣金管理章节后追加）

- [ ] **步骤 1：追加新接口文档**

在 `### 4.21 佣金管理（/api/commission/*）` 之后新增：

```markdown
### 4.22 团队消费与推荐关系（`/api/commission/*` 扩展）

| 路径 | 说明 |
|------|------|
| `POST /api/commission/team/list` | 扩展：返回中每个成员新增 `memberConsumption`（该成员自身完成履约订单总额，分）、`myCfEarnedFromMember`（我从该成员消费获得的 CF 总额，分） |
| `POST /api/commission/team/consumption` | 团队总消费额分级汇总，请求 `{maxLevel}`（默认 3），返回 `{totalConsumption: 分, levelBreakdown[{level, memberCount, consumption}], totalMembers, maxLevel}` |
| `POST /api/commission/my-referrer` | 获取我的直推人信息，返回 `{hasReferrer: bool, referrerId, nickname, avatar, referralCode, bindTime}`，无推荐人时 hasReferrer=false |
| `POST /api/commission/team/tree` | 团队树形扁平数据（不含根节点），请求 `{maxLevel}`（默认 3），返回 `{nodes[{userId, nickname, avatar, level, parentId, referrerId, memberConsumption, myCfEarnedFromMember}], totalMembers, maxLevel}` |
```

- [ ] **步骤 2：Commit**

```bash
git add docs/superpowers/api/API_REFERENCE.md
git commit -m "docs: 更新 API_REFERENCE.md 新增团队消费与推荐关系接口"
```

---

### 任务 8：前端 - 删除富页面推荐码横条

**文件：**
- 修改：`cfc-frontend/pages/wealth/index.vue:161-165`

- [ ] **步骤 1：删除模板中的 `referral-code-bar` 区块**

```diff
-       <!-- 邀请码复制条 -->
-       <view class="referral-code-bar" v-if="wealthData.referralCode" @click="copyReferralCode">
-         <text class="referral-code-label">我的邀请码</text>
-         <text class="referral-code-value">{{ wealthData.referralCode }}</text>
-         <text class="referral-code-copy">复制</text>
-       </view>
```

- [ ] **步骤 2：删除 CSS 中 `.referral-code-bar` 相关样式**

```diff
- /* 邀请码复制条 */
- .referral-code-bar {
-   display: flex;
-   align-items: center;
-   background: #fff;
-   margin-top: 16rpx;
-   border-radius: 16rpx;
-   padding: 24rpx 30rpx;
-   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
- }
- .referral-code-label { font-size: 26rpx; color: #666; margin-right: 16rpx; }
- .referral-code-value { flex: 1; font-size: 30rpx; font-weight: bold; color: #F59E0B; letter-spacing: 2rpx; }
- .referral-code-copy { font-size: 24rpx; color: #fff; background: linear-gradient(135deg, #F59E0B, #FBBF24); padding: 8rpx 24rpx; border-radius: 20rpx; }
```

- [ ] **步骤 3：删除 methods 中的 `copyReferralCode` 方法（如不再使用）**

检查 `copyReferralCode` 是否在其他地方使用，若未使用则删除。

- [ ] **步骤 4：Commit**

```bash
git add cfc-frontend/pages/wealth/index.vue
git commit -m "feat(wealth): 删除富页面推荐码横条"
```

---

### 任务 9：前端 - 我的页面新增推荐人卡片 + 团队入口

**文件：**
- 修改：`cfc-frontend/pages/profile-main/profile.vue`

- [ ] **步骤 1：import 部分追加**

```js
// 在现有 import 中追加
import { getMyReferrer } from '../../utils/api.js'
```

- [ ] **步骤 2：data() 追加字段**

```js
data() {
  return {
    // ...existing fields...
    myReferrer: null
  }
}
```

- [ ] **步骤 3：methods 新增加载与工具方法**

```js
methods: {
  // ...existing methods...
  async loadMyReferrer() {
    var self = this
    try {
      var res = await getMyReferrer()
      if (res && res.code === 200 && res.data && res.data.hasReferrer) {
        self.myReferrer = res.data
      }
    } catch (e) {
      console.error('获取推荐人失败', e)
    }
  },
  goTeamTree() {
    uni.navigateTo({ url: '/pages/profile/team-tree' })
  },
  copyReferrerCode() {
    if (!this.myReferrer || !this.myReferrer.referralCode) return
    uni.setClipboardData({
      data: this.myReferrer.referralCode,
      success: function() {
        uni.showToast({ title: '邀请码已复制', icon: 'success' })
      }
    })
  }
}
```

- [ ] **步骤 4：onShow 中调用 loadMyReferrer**

```js
onShow() {
  if (!this.isLoggedIn) return
  // ...existing...
  this.loadMyReferrer()
}
```

- [ ] **步骤 5：模板中在「个人成就统计」section 前插入以下 HTML**

```html
<!-- 我的推荐人卡片 -->
<view class="referrer-card" v-if="myReferrer && myReferrer.hasReferrer">
  <view class="referrer-header">
    <text class="referrer-title">我的推荐人</text>
  </view>
  <view class="referrer-content">
    <view class="referrer-avatar-wrap">
      <image v-if="myReferrer.avatar" class="referrer-avatar" :src="myReferrer.avatar" mode="aspectFill"></image>
      <text v-else class="referrer-avatar-text">{{ myReferrer.nickname ? myReferrer.nickname.charAt(0) : '?' }}</text>
    </view>
    <view class="referrer-info">
      <text class="referrer-name">{{ myReferrer.nickname }}</text>
      <text class="referrer-code">邀请码：{{ myReferrer.referralCode }}</text>
      <text class="referrer-time" v-if="myReferrer.bindTime">{{ formatReferralTime(myReferrer.bindTime) }}</text>
    </view>
    <view class="referrer-copy-btn" @click="copyReferrerCode">
      <text>复制</text>
    </view>
  </view>
</view>

<!-- 团队层级入口 -->
<view class="team-tree-entry" @click="goTeamTree">
  <view class="entry-icon">🌳</view>
  <view class="entry-text">
    <text class="entry-title">团队层级</text>
    <text class="entry-desc">查看团队结构与消费明细</text>
  </view>
  <text class="entry-arrow">›</text>
</view>
```

- [ ] **步骤 6：添加时间格式化方法**

```js
methods: {
  // ...existing...
  formatReferralTime(ts) {
    if (!ts) return ''
    var d = ts
    if (typeof d === 'string' && d.indexOf('T') > -1) {
      d = d.substring(0, 16).replace('T', ' ')
    }
    return '绑定于 ' + d
  }
}
```

- [ ] **步骤 7：在 style 末尾追加样式**

```css
/* 我的推荐人卡片 */
.referrer-card {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.referrer-header { margin-bottom: 16rpx; }
.referrer-title { font-size: 28rpx; font-weight: 600; color: #1E293B; }
.referrer-content { display: flex; align-items: center; gap: 20rpx; }
.referrer-avatar-wrap {
  width: 72rpx; height: 72rpx; border-radius: 50%; background: #FEF3C7;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.referrer-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; }
.referrer-avatar-text { font-size: 28rpx; color: #F97316; }
.referrer-info { flex: 1; min-width: 0; }
.referrer-name { font-size: 28rpx; font-weight: 500; color: #1E293B; display: block; }
.referrer-code { font-size: 24rpx; color: #F97316; margin-top: 4rpx; display: block; }
.referrer-time { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
.referrer-copy-btn {
  font-size: 26rpx; color: #F97316; padding: 8rpx 16rpx; border: 1rpx solid #FED7AA;
  border-radius: 20rpx; flex-shrink: 0;
}
.team-tree-entry {
  margin: 0 30rpx 20rpx;
  background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.06));
  border-radius: 20rpx; padding: 24rpx;
  display: flex; align-items: center; gap: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
  border-left: 6rpx solid #F97316;
}
.entry-icon { font-size: 40rpx; }
.entry-text { flex: 1; min-width: 0; }
.entry-title { font-size: 28rpx; font-weight: 600; color: #1E293B; display: block; }
.entry-desc { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
.entry-arrow { font-size: 28rpx; color: #F97316; }
```

- [ ] **步骤 8：Commit**

```bash
git add cfc-frontend/pages/profile-main/profile.vue
git commit -m "feat(profile): 新增我的推荐人卡片与团队层级入口"
```

---

### 任务 10：前端 - 新增 api.js 方法

**文件：**
- 修改：`cfc-frontend/utils/api.js`（在现有 commission 相关 export 后追加）

- [ ] **步骤 1：追加 3 个 export 函数**

```javascript
export const getTeamConsumption = (maxLevel = 3) => request('/api/commission/team/consumption', 'POST', { maxLevel })

export const getMyReferrer = () => request('/api/commission/my-referrer', 'POST')

export const getTeamTree = (maxLevel = 3) => request('/api/commission/team/tree', 'POST', { maxLevel })
```

- [ ] **步骤 2：Commit**

```bash
git add cfc-frontend/utils/api.js
git commit -m "feat(api): 新增 getTeamConsumption、getMyReferrer、getTeamTree"
```

---

### 任务 11：前端 - 新建 `pages/profile/team-tree.vue`

**文件：**
- 创建：`cfc-frontend/pages/profile/team-tree.vue`

- [ ] **步骤 1：创建完整页面文件**

```vue
<template>
  <view class="container">
    <!-- 顶部统计卡 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-value orange">{{ fenToYuan(consumption.totalConsumption) }}</text>
        <text class="stat-label">团队总消费</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value blue">{{ consumption.totalMembers }}</text>
        <text class="stat-label">团队人数</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value green">{{ currentMaxLevel }}</text>
        <text class="stat-label">统计层级</text>
      </view>
    </view>

    <!-- 层级切换 tabs -->
    <view class="level-tabs">
      <view class="level-tab" :class="{ active: currentMaxLevel === 1 }" @click="switchLevel(1)">1级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 2 }" @click="switchLevel(2)">2级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 3 }" @click="switchLevel(3)">3级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 4 }" @click="switchLevel(4)">4级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 5 }" @click="switchLevel(5)">5级</view>
    </view>

    <!-- 树形区域（从下往上生长：column-reverse，L1 在底部） -->
    <view class="tree-wrapper">
      <view class="tree-container">
        <TreeNode
          v-for="root in level1Roots"
          :key="root.userId"
          :node="root"
          :level="1"
          :maxLevel="currentMaxLevel"
        />
      </view>
      <view class="empty-state" v-if="!loading && level1Roots.length === 0">
        <text>暂无团队成员</text>
      </view>
    </view>

    <view class="loading-overlay" v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { getTeamTree, getTeamConsumption } from '@/utils/api.js'

export default {
  components: { TreeNode: {
    name: 'TreeNode',
    props: { node: Object, level: Number, maxLevel: Number },
    data() { return { expanded: false } },
    methods: {
      toggle() { this.expanded = !this.expanded }
    },
    template: `
      <view class="tree-node" :style="{ paddingLeft: (level > 1 ? (level - 1) * 24 : 0) + 'rpx' }">
        <view class="node-main" @click="toggle">
          <image v-if="node.avatar" class="node-avatar" :src="node.avatar" mode="aspectFill" />
          <text v-else class="node-avatar-text">{{ node.nickname ? node.nickname.charAt(0) : '?' }}</text>
          <text class="node-name">{{ node.nickname }}</text>
          <text class="node-tag" v-if="level > 1">L{{ level }}</text>
          <view class="node-stats">
            <text class="node-stat consumption">消费 ¥{{ (node.memberConsumption / 100).toFixed(2) }}</text>
            <text class="node-stat my-cf">得CF ¥{{ (node.myCfEarnedFromMember / 100).toFixed(2) }}</text>
          </view>
          <text class="node-arrow">{{ expanded ? '▲' : '▼' }}</text>
        </view>
        <view v-if="expanded && node.children && node.children.length > 0" class="children">
          <TreeNode
            v-for="child in node.children"
            :key="child.userId"
            :node="child"
            :level="level + 1"
            :maxLevel="maxLevel"
          />
        </view>
      </view>
    `
  }},
  data() {
    return {
      nodes: [],
      level1Roots: [],
      consumption: { totalConsumption: 0, totalMembers: 0, maxLevel: 3 },
      currentMaxLevel: 3,
      loading: false
    }
  },
  onLoad() {
    this.loadData()
  },
  onShow() {
    if (!this._loadFired) {
      this._loadFired = true
    } else {
      this.loadData()
    }
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        var self = this
        var treeRes = await getTeamTree(self.currentMaxLevel)
        var consumptionRes = await getTeamConsumption(self.currentMaxLevel)
        if (treeRes && treeRes.data && treeRes.data.nodes) {
          self.nodes = treeRes.data.nodes
          self.buildLevel1Roots()
        }
        if (consumptionRes && consumptionRes.data) {
          self.consumption = consumptionRes.data
          self.consumption.maxLevel = self.consumption.maxLevel || self.currentMaxLevel
        }
      } catch (e) {
        console.error('加载团队树失败', e)
      }
      this.loading = false
    },
    switchLevel(level) {
      if (this.currentMaxLevel === level) return
      this.currentMaxLevel = level
      this.loadData()
    },
    buildLevel1Roots() {
      var self = this
      // 将扁平 nodes 构建成以 L1 为根的子树
      var nodeMap = {}
      var l1Ids = []
      self.nodes.forEach(function(n) {
        nodeMap[n.userId] = { userId: n.userId, children: [] }
        if (n.level === 1) l1Ids.push(n.userId)
      })
      self.nodes.forEach(function(n) {
        if (!nodeMap[n.userId]) return
        nodeMap[n.userId] = Object.assign({}, nodeMap[n.userId], n)
        if (n.parentId && nodeMap[n.parentId]) {
          nodeMap[n.parentId].children.push(nodeMap[n.userId])
        }
      })
      // 按 userId 排序
      var sortNodes = function(arr) {
        arr.sort(function(a, b) { return (a.userId || 0) - (b.userId || 0) })
        arr.forEach(function(c) { sortNodes(c.children) })
      }
      sortNodes(l1Ids.map(function(id) { return nodeMap[id] }))
      self.level1Roots = l1Ids.map(function(id) { return nodeMap[id] })
    },
    fenToYuan(fen) {
      if (fen === null || fen === undefined) return '0.00'
      var num = Number(fen)
      if (isNaN(num)) return '0.00'
      return (num / 100).toFixed(2)
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #FFF7ED; padding-bottom: 40rpx; }
.stats-card {
  background: #fff; border-radius: 20rpx; padding: 30rpx; margin: 20rpx 30rpx 16rpx;
  display: flex; align-items: center; box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.stat-item { flex: 1; text-align: center; }
.stat-value { font-size: 36rpx; font-weight: bold; display: block; }
.stat-value.orange { color: #F97316; }
.stat-value.blue { color: #0EA5E9; }
.stat-value.green { color: #10B981; }
.stat-label { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
.stat-divider { width: 1rpx; height: 48rpx; background: #FED7AA; }
.level-tabs {
  display: flex; padding: 0 30rpx; margin-bottom: 16rpx; overflow-x: auto; gap: 12rpx;
  white-space: nowrap;
}
.level-tab {
  flex-shrink: 0; padding: 12rpx 24rpx; border-radius: 20rpx;
  font-size: 24rpx; color: #64748B; background: #F1F5F9;
}
.level-tab.active { background: #F97316; color: #fff; font-weight: 600; }
.tree-wrapper { padding: 0 30rpx; }
.tree-container { min-height: 300rpx; }
.tree-node { margin-bottom: 16rpx; }
.node-main {
  display: flex; align-items: center; gap: 16rpx;
  background: #fff; border-radius: 16rpx; padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.node-avatar { width: 60rpx; height: 60rpx; border-radius: 50%; background: #FEF3C7; flex-shrink: 0; }
.node-avatar-text {
  width: 60rpx; height: 60rpx; border-radius: 50%; background: #FEF3C7;
  display: flex; align-items: center; justify-content: center;
  font-size: 24rpx; color: #F97316; flex-shrink: 0;
}
.node-name { flex: 1; min-width: 0; font-size: 26rpx; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-tag { font-size: 20rpx; background: #FFF7ED; color: #F97316; padding: 2rpx 8rpx; border-radius: 8rpx; flex-shrink: 0; }
.node-stats { flex-shrink: 0; text-align: right; margin-right: 8rpx; }
.node-stat { font-size: 20rpx; display: block; line-height: 1.5; }
.node-stat.consumption { color: #F97316; }
.node-stat.my-cf { color: #0EA5E9; }
.node-arrow { font-size: 20rpx; color: #94A3B8; flex-shrink: 0; }
.children { margin-top: 12rpx; padding-left: 32rpx; border-left: 1rpx dashed #FED7AA; }
.empty-state { text-align: center; padding: 80rpx; color: #94A3B8; font-size: 28rpx; }
.loading-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center;
  z-index: 999; font-size: 28rpx; color: #94A3B8;
}
</style>
```

- [ ] **步骤 2：语法检查**

```bash
cd cfc-frontend && node --check pages/profile/team-tree.vue 2>&1 || true
```

- [ ] **步骤 3：Commit**

```bash
git add cfc-frontend/pages/profile/team-tree.vue
git commit -m "feat(profile): 新建 team-tree 页面（树形从下往上生长、层级切换、消费/CF明细）"
```

---

### 任务 12：前端 - 注册 `pages.json` 新页面

**文件：**
- 修改：`cfc-frontend/pages.json`（在 `pages/profile` root 下的 `pages` 数组追加）

- [ ] **步骤 1：找到 `pages/profile` root 并追加**

在 `pages.json` 中找到 `"root": "pages/profile"` 的 section，在数组末尾追加：

```json
{
  "path": "pages/profile/team-tree",
  "style": {
    "navigationBarTitleText": "团队层级",
    "enablePullDownRefresh": false
  }
}
```

- [ ] **步骤 2：语法验证**

```bash
cd cfc-frontend && node -e "JSON.parse(require('fs').readFileSync('pages.json','utf8'))" && echo "JSON valid"
```

- [ ] **步骤 3：Commit**

```bash
git add cfc-frontend/pages.json
git commit -m "feat(pages.json): 注册 team-tree 页面"
```

---

### 任务 13：联调验证 + API 审计

**文件：**
- 无新增文件

- [ ] **步骤 1：编译后端**

```bash
cd cfc-backend && mvn clean compile
```

- [ ] **步骤 2：启动后端服务（HBuilderX 或命令行）并手动验证接口**

```bash
# 后端编译通过后启动，在微信开发者工具中打开小程序测试
# 关键接口验证点：
# 1. GET /api/commission/team/consumption?maxLevel=3 → 200
# 2. POST /api/commission/my-referrer → 200
# 3. POST /api/commission/team/tree?maxLevel=3 → 200
# 4. POST /api/commission/team/list?level=L1 → 200, records[].memberConsumption exists
```

- [ ] **步骤 3：HBuilderX 打包小程序**

在 HBuilderX 中打开 `cfc-frontend/`，运行到微信开发者工具，依次验证：
- 富页面：无推荐码横条，有「邀请人数」
- 我的页面：有推荐人卡片（显示昵称/头像/邀请码/复制按钮）、有「团队层级」入口
- 点击「团队层级」→ 进入 team-tree，显示统计卡 + 层级 tabs + 树形
- 切换层级 tabs → 树形和统计更新
- 点击节点 → 展开/折叠
- 无推荐人用户 → 推荐人卡片不显示
- 空团队 → 显示「暂无团队成员」

- [ ] **步骤 4：API 重复调用审计**

```bash
cd cfc-frontend && node scripts/audit-duplicate-api-calls.js
# 预期：0 error
```

- [ ] **步骤 5：Commit**

```bash
git add -A
git commit -m "chore: 联调验证通过 + API审计0 error"
```

---

## 自检清单（实施后逐条确认）

- [ ] 富页面无推荐码横条，保留「邀请人数」数字
- [ ] 我的页面有推荐人卡片（有推荐人时显示；无推荐人时不显示）
- [ ] 我的页面有「团队层级」入口，点击跳转 `/pages/profile/team-tree`
- [ ] team-tree 页面：
  - 顶部统计卡：总消费额（分转元）、人数、层级数
  - 1-5 级切换 tabs，切换后统计和树形同步更新
  - 树形从下往上生长（L1 在底部，L2/L3 向上延伸）
  - 每节点显示：头像、昵称、L标签、消费额、我得CF、展开图标
  - 点击节点展开/折叠，子节点在上方渲染，虚线连接正确
  - 空团队显示「暂无团队成员」
- [ ] 复制推荐码按钮正常工作
- [ ] 后端 4 个接口响应正确，字段名与设计文档一致
- [ ] `mvn clean compile` 通过
- [ ] `audit-duplicate-api-calls.js` 0 error
- [ ] API_REFERENCE.md 已同步更新

---

**文档结束**