# 富沛（我的）页面改造 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 改造"我的"Tab页为品牌统一的富沛页面，补全品牌头/能量展示/菜单分组/勋章墙/成长报告/邀请合并等设计规范要求

**Architecture:** 后端勋章API和统计API已存在，前端改造 `profile/profile.vue` 一个主文件（938行）+ `mind/index.vue` 一个文件 + `utils/api.js` 新增两个方法

**Tech Stack:** uni-app Vue 2, 微信小程序

**Design Spec Ref:** `docs/superpowers/specs/2026-06-19-profile-page-redesign.md`

**All existing issues in backend Java files are pre-existing and unrelated to these changes.**

---

### 注意事项（Agent执行时阅读，不写入文件）
- **搜索范围限制:** glob 仅在 `cfc-frontend/components/`、`cfc-frontend/pages/`、`cfc-frontend/utils/` 下搜索。**禁止搜索 `node_modules/`、`unpackage/`、`dist/`**
- **NEVER** 在模板中使用可选链 `?.`（微信小程序不支持）
- **NEVER** `git commit` 或 `git push`，只修改文件
- **计算属性使用 `function` 关键字**（Vue 2 Options API）
- **`v-for` 和 `v-if` 不要在同一元素上**（用 `<template>` 包裹）
- **DO NOT 修改任何后端文件** — 后端API已存在
- **DO NOT 修改任何其他前端文件** — 只改 `profile/profile.vue`、`mind/index.vue`、`utils/api.js`
- **DO NOT 搜索或引用任何 node_modules**

---

### Task 1: api.js 新增 getUserBadges 和 getGrowthReport 方法

**Files:**
- Modify: `cfc-frontend/utils/api.js`（在文件末尾追加）

- [ ] **Step 1: 在 api.js 末尾新增方法**

```js
// ===================== 勋章系统 =====================

export const getUserBadges = (childId) => {
  return request('/api/badges/child/list', 'POST', { childId })
}

// ===================== 成长报告 =====================

export const getGrowthReport = (childId) => {
  return request('/api/stats/child/overview', 'POST', { childId })
}
```

---

### Task 2: profile.vue 改造 — 数据层

**Files:**
- Modify: `cfc-frontend/pages/profile/profile.vue`

- [ ] **Step 1: data() 新增字段**

在 `data()` 中 `growthReport` 对象之后添加：

```js
wealthEnergy: 0,
energyTrend: 0,
badgesLoaded: false,
```

- [ ] **Step 2: 更新 `loadEnergyData()` 方法**

替换整个 `loadEnergyData` 方法（当前第509-523行）为提取 wealth 维度：

```js
loadEnergyData: function() {
  var self = this
  var childId = uni.getStorageSync('currentChildId') || null
  if (!childId && self.children.length > 0) {
    childId = self.children[0].id
  }
  if (!childId) return
  try {
    getEnergyOverview(childId).then(function(res) {
      if (res && res.data) {
        self.totalEnergy = res.data.totalEnergy || 0
        var dims = res.data.dimensions
        if (dims && dims.length > 0) {
          for (var i = 0; i < dims.length; i++) {
            if (dims[i].code === 'wealth') {
              self.wealthEnergy = dims[i].score || 0
              break
            }
          }
        }
      }
    })
  } catch (e) { console.log('获取能量概览失败', e) }
}
```

注意：需要在文件顶部 import 中添加 `getEnergyOverview` 引用（确认已有）。

- [ ] **Step 3: 替换 `loadBadges()` 方法**

替换当前 `loadBadges` 方法（第525-536行）：

```js
loadBadges: function() {
  var self = this
  var childId = uni.getStorageSync('currentChildId') || null
  if (!childId && self.children.length > 0) {
    childId = self.children[0].id
  }

  // 默认9个勋章（API失败时的fallback）
  var defaultBadges = [
    { id: 1, icon: '\u{1F3C6}', name: '连续7天', unlocked: false },
    { id: 2, icon: '\u{2B50}', name: '积分达人', unlocked: false },
    { id: 3, icon: '\u{1F525}', name: '执行之星', unlocked: false },
    { id: 4, icon: '\u{1F31F}', name: '学习先锋', unlocked: false },
    { id: 5, icon: '\u{1F4AA}', name: '体能达人', unlocked: false },
    { id: 6, icon: '\u{1F9E0}', name: '心智成长', unlocked: false },
    { id: 7, icon: '\u{1F468}\u{200D}\u{1F469}\u{200D}\u{1F467}\u{200D}\u{1F466}', name: '家庭之星', unlocked: false },
    { id: 8, icon: '\u{1F4DA}', name: '阅读达人', unlocked: false },
    { id: 9, icon: '\u{1F3AF}', name: '全能冠军', unlocked: false }
  ]

  // 先尝试API
  if (childId) {
    try {
      getUserBadges(childId).then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          // API返回的数据结构: [{ childBadge: {...}, badge: { id, name, icon, ... } }]
          var list = []
          for (var i = 0; i < res.data.length; i++) {
            var item = res.data[i]
            var badge = item.badge || {}
            list.push({
              id: badge.id || i + 1,
              icon: badge.icon || '\u{2B50}',
              name: badge.name || '未知勋章',
              unlocked: true
            })
          }
          // 补全到9个
          while (list.length < 9) {
            var idx = list.length
            list.push({
              id: defaultBadges[idx].id,
              icon: defaultBadges[idx].icon,
              name: defaultBadges[idx].name,
              unlocked: false
            })
          }
          self.badges = list.slice(0, 9)
          self.badgesLoaded = true
          return
        }
        // API返回无数据，fallback到本地逻辑
        self.loadBadgesLocal(defaultBadges)
      }).catch(function() {
        self.loadBadgesLocal(defaultBadges)
      })
    } catch (e) {
      self.loadBadgesLocal(defaultBadges)
    }
  } else {
    self.loadBadgesLocal(defaultBadges)
  }
},
loadBadgesLocal: function(defaultBadges) {
  var streakDays = parseInt(uni.getStorageSync('streakDays') || 0)
  var totalPoints = parseInt(uni.getStorageSync('totalPoints') || 0)
  var completedTasks = parseInt(uni.getStorageSync('completedTasks') || 0)
  // 更新解锁状态
  var badges = JSON.parse(JSON.stringify(defaultBadges))
  if (streakDays >= 7) badges[0].unlocked = true
  if (totalPoints >= 1000) badges[1].unlocked = true
  if (completedTasks >= 50) badges[2].unlocked = true
  if (totalPoints >= 500) badges[3].unlocked = true
  if (streakDays >= 30) badges[4].unlocked = true
  if (completedTasks >= 100) badges[8].unlocked = true
  this.badges = badges
  this.badgesLoaded = true
}
```

- [ ] **Step 4: 新增 `loadGrowthReport()` 方法**

在 `methods` 中 `loadBadges` 之后、`loadActionData` 之前添加：

```js
loadGrowthReport: function() {
  var self = this
  var childId = uni.getStorageSync('currentChildId') || null
  if (!childId && self.children.length > 0) {
    childId = self.children[0].id
  }
  if (!childId) {
    // 无childId时使用本地mock
    self.loadGrowthReportLocal()
    return
  }
  try {
    getGrowthReport(childId).then(function(res) {
      if (res.code === 200 && res.data) {
        var data = res.data
        self.growthReport.monthActiveDays = data.monthActiveDays || data.activeDays || 0
        self.growthReport.totalTasks = (data.taskStats && data.taskStats.total) || data.totalTasks || 0
        self.growthReport.completionRate = (data.taskStats && data.taskStats.completionRate) || data.completionRate || 0
      } else {
        self.loadGrowthReportLocal()
      }
    }).catch(function() {
      self.loadGrowthReportLocal()
    })
  } catch (e) {
    self.loadGrowthReportLocal()
  }
},
loadGrowthReportLocal: function() {
  var streakDays = parseInt(uni.getStorageSync('streakDays') || 0)
  var completedTasks = parseInt(uni.getStorageSync('completedTasks') || 0)
  this.growthReport.monthActiveDays = streakDays > 0 ? Math.min(streakDays, 30) : 0
  this.growthReport.totalTasks = completedTasks || 0
  this.growthReport.completionRate = 85
}
```

- [ ] **Step 5: 在 `onShow` 中调用 `loadGrowthReport()`**

在 `onShow` 方法的 `this.loadBadges()` 之后添加：

```js
this.loadGrowthReport()
```

- [ ] **Step 6: 更新 import**

在 `api.js` 的 import 行中，确认已有 `getEnergyOverview`；添加 `getUserBadges` 和 `getGrowthReport`：

```js
import { setPassword, verifyPassword, getChildren, vendorStatus, getEnergyOverview, getUserActionStats, getReferralCode, getReferralSummary, getCommissionSummary, updateMemberVisibility, getVisibleFamilyMembers, getUserBadges, getGrowthReport } from '../../utils/api.js'
```

---

### Task 3: profile.vue 改造 — 品牌头 + 能量展示

- [ ] **Step 1: 更新 PageBanner tagline**

修改模板第14-16行：

```html
<PageBanner theme="wealth"
  tagline="丰盈内心，富足生活，厚德载物"
  quote="" />
```

- [ ] **Step 2: 在 PageBanner 之后、exit-switch 之前添加能量值条**

在第18行（exit-switch之前）插入：

```html
<!-- 富沛能量值 -->
<view class="wealth-energy-header" v-if="isLoggedIn && wealthEnergy > 0">
  <text class="energy-header-icon">💧</text>
  <text class="energy-header-value">{{ wealthEnergy }}</text>
  <text class="energy-header-label">富沛能量</text>
  <text class="energy-header-trend" v-if="energyTrend > 0">↑较上周+{{ energyTrend }}</text>
</view>
```

- [ ] **Step 3: 添加能量值条样式**

在 `<style scoped>` 中 `.user-card` 之前添加：

```css
/* ===== 富沛能量值条 ===== */
.wealth-energy-header {
  background: linear-gradient(135deg, #42A5F5, #64B5F6);
  padding: 16rpx 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.energy-header-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}
.energy-header-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-right: 12rpx;
}
.energy-header-label {
  font-size: 26rpx;
  color: #D6EAF8;
  margin-right: auto;
}
.energy-header-trend {
  font-size: 24rpx;
  color: #4ADE80;
  font-weight: 500;
}
```

---

### Task 4: profile.vue 改造 — 用户卡片扩展

- [ ] **Step 1: 在用户卡片的系统积分行之后添加能量行**

在 `system-points` 行（第28行）之后插入：

```html
<view class="wealth-energy-row" v-if="wealthEnergy > 0">
  <text class="wealth-energy-icon">💧</text>
  <text class="wealth-energy-value">富沛能量: {{ wealthEnergy }}</text>
  <text class="wealth-energy-trend" v-if="energyTrend > 0"> ↑较上周+{{ energyTrend }}</text>
</view>
```

- [ ] **Step 2: 添加样式**

在 `.system-points` 样式之后添加：

```css
.wealth-energy-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8rpx;
}
.wealth-energy-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}
.wealth-energy-value {
  font-size: 24rpx;
  color: #D6EAF8;
  font-weight: 500;
}
.wealth-energy-trend {
  font-size: 22rpx;
  color: #4ADE80;
  margin-left: 8rpx;
}
```

---

### Task 5: profile.vue 改造 — 功能菜单分组 + 邀请合并

- [ ] **Step 1: 替换整个 menu-list 区块**

将当前的 menu-list（第131-183行）替换为分组结构：

```html
<view class="menu-list">
  <!-- ===== 个人 ===== -->
  <view class="menu-group">
    <view class="menu-group-title">── 个人 ──</view>
    <view class="menu-item" @click="goToEditInfo">
      <text>📝 修改个人资料</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item" v-if="role === 'parent'" @click="goToChildren">
      <text>👶 我的孩子</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item" v-if="role === 'parent'" @click="goToFamilyMembers">
      <text>👨‍👩‍👧‍👦 家庭成员</text>
      <text class="arrow">›</text>
    </view>
  </view>

  <!-- ===== 财富 ===== -->
  <view class="menu-group">
    <view class="menu-group-title">── 财富 ──</view>
    <view class="menu-item" @click="goToPromotion">
      <text>📢 推广中心</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item" @click="goToPointsLogs">
      <text>📊 积分记录</text>
      <text class="arrow">›</text>
    </view>
  </view>

  <!-- ===== 服务 ===== -->
  <view class="menu-group">
    <view class="menu-group-title">── 服务 ──</view>
    <view class="menu-item" @click="goToMembership">
      <text>👑 会员中心</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item" v-if="isVendor" @click="goToVendorCenter">
      <text>🏪 服务商中心</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item" @click="goToOrders">
      <text>🛒 订单管理</text>
      <text class="arrow">›</text>
    </view>
  </view>

  <!-- ===== 设置 ===== -->
  <view class="menu-group">
    <view class="menu-group-title">── 设置 ──</view>
    <view class="menu-item" v-if="role === 'parent'" @click="showPasswordModal = true">
      <text>🔐 {{ hasPassword ? '重置密码' : '设置密码' }}</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item menu-item-switch" v-if="role === 'parent'">
      <text>👁 对家庭成员可见</text>
      <switch :checked="showToFamily === 1" @change="onShowToFamilyChange" color="#5B9BD5" />
    </view>
    <view class="menu-item" @click="showInviteActionSheet">
      <text>📨 邀请加入</text>
      <text class="arrow">›</text>
    </view>
    <view class="menu-item" @click="logout">
      <text>🚪 退出登录</text>
      <text class="arrow">›</text>
    </view>
  </view>
</view>
```

移除现有的 `inviteFamily`/`inviteTeacher` 两个 button 元素（当前第161-168行）。

- [ ] **Step 2: 新增 `goToOrders` 方法**

在 `methods` 中 `goToVendorCenter` 之后添加：

```js
goToOrders: function() {
  uni.showToast({ title: '即将上线', icon: 'none' })
}
```

- [ ] **Step 3: 新增 `showInviteActionSheet` 方法**

在 `methods` 中 `logout` 方法之前添加：

```js
showInviteActionSheet: function() {
  var self = this
  var familyId = uni.getStorageSync('familyId')
  var userInfo = uni.getStorageSync('userInfo')
  if (!familyId) {
    uni.showToast({ title: '您暂未加入家庭', icon: 'none' })
    return
  }

  var items = ['👨‍👩‍👧‍👦 邀请家人', '👨‍🏫 邀请成长规划师']
  var types = ['family', 'guide']

  uni.showActionSheet({
    itemList: items,
    success: function(res) {
      var type = types[res.tapIndex]
      self.inviteGenerate(type, familyId, userInfo)
    },
    fail: function() {}
  })
},
inviteGenerate: function(type, familyId, userInfo) {
  var self = this
  try {
    var inviteTypes = {
      family: { title: (userInfo && userInfo.nickname ? userInfo.nickname : '家人') + ' 邀请你加入家庭', path: '/pages/login/login?invite_type=family' },
      guide: { title: (userInfo && userInfo.nickname ? userInfo.nickname : '家长') + ' 邀请你成为家庭成长规划师', path: '/pages/login/login?invite_type=guide' }
    }
    var config = inviteTypes[type] || inviteTypes.family
    self.shareData = {
      title: config.title,
      path: config.path + '&invite_code=',
      imageUrl: '/static/invite-card.png'
    }
    uni.showToast({ title: '点击右上角转发给TA', icon: 'none' })
  } catch (e) {
    uni.showToast({ title: e.message || '邀请失败', icon: 'none' })
  }
}
```

- [ ] **Step 4: 删除旧的 inviteFamily 和 inviteTeacher 方法**

删除当前第454-498行的 `inviteFamily`、`inviteFamilyGenerate`、`inviteTeacher`、`inviteTeacherGenerate` 四个方法。

- [ ] **Step 5: 添加菜单分组样式**

在 `.menu-list` 样式之前添加：

```css
/* ===== 功能菜单分组 ===== */
.menu-group {
  margin-top: 20rpx;
}
.menu-group-title {
  font-size: 24rpx;
  color: #ccc;
  text-align: center;
  padding: 12rpx 0;
  letter-spacing: 4rpx;
}
```

---

### Task 6: profile.vue 改造 — 勋章墙扩展

- [ ] **Step 1: 更新勋章墙模板**

替换当前勋章网格（第97-105行）为动态3×3网格：

```html
<view class="badge-grid">
  <view class="badge-item" v-for="badge in badges" :key="badge.id">
    <view :class="['badge-icon-wrap', badge.unlocked ? 'unlocked' : 'locked']">
      <text class="badge-icon">{{ badge.icon }}</text>
    </view>
    <text class="badge-name">{{ badge.name }}</text>
  </view>
</view>
```

（当前模板结构已基本一致，只需确认v-for写法 — 当前已是 `v-for="badge in badges"`，保持不变）

- [ ] **Step 2: 更新勋章网格样式为3列**

修改 `.badge-grid` 样式（第714-720行）：

```css
.badge-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  justify-content: flex-start;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.33%;
  margin-bottom: 20rpx;
}
```

---

### Task 7: profile.vue 改造 — 成长报告跳转

- [ ] **Step 1: 更新 `goGrowthReport` 方法**

替换当前方法（第583-585行）：

```js
goGrowthReport: function() {
  var childId = uni.getStorageSync('currentChildId') || ''
  uni.navigateTo({ url: '/pages/growth/report?childId=' + childId })
}
```

---

### Task 8: mind/index.vue 心理Tab新增心愿单入口

**Files:**
- Modify: `cfc-frontend/pages/mind/index.vue`

- [ ] **Step 1: 在心理Tab内容底部添加心愿单区块**

在心理Tab内容内、`<!-- ===== 推荐阅读 ===== -->` 区块之后、`</template>`（心理Tab闭合）之前插入：

```html
<!-- 心愿单入口（心理Tab） -->
<view class="section wishlist-section" v-if="isLoggedIn">
  <view class="wishlist-card" @click="goWishlist">
    <view class="wishlist-left">
      <text class="wishlist-icon">💝</text>
    </view>
    <view class="wishlist-body">
      <text class="wishlist-title">心愿单</text>
      <text class="wishlist-desc">孩子可在此创建、兑换心愿</text>
    </view>
    <text class="wishlist-arrow">›</text>
  </view>
</view>
```

- [ ] **Step 2: 新增 `goWishlist` 方法**

在 methods 中 `goAssessment` 方法之前添加：

```js
goWishlist: function() {
  uni.navigateTo({ url: '/pages/rewards/rewards' })
}
```

- [ ] **Step 3: 添加心愿单样式**

在 `<style scoped>` 末尾添加：

```css
/* ===== 心愿单入口 ===== */
.wishlist-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.wishlist-left {
  width: 72rpx;
  height: 72rpx;
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.wishlist-icon {
  font-size: 36rpx;
}
.wishlist-body {
  flex: 1;
}
.wishlist-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}
.wishlist-desc {
  font-size: 22rpx;
  color: #999;
}
.wishlist-arrow {
  font-size: 36rpx;
  color: #ccc;
  margin-left: 12rpx;
}
```

---

### Task 9: 编译验证

- [ ] **Step 1: LSP诊断检查**

使用 `lsp_diagnostics` 检查 `cfc-frontend/pages/profile/profile.vue`、`cfc-frontend/pages/mind/index.vue`、`cfc-frontend/utils/api.js`

- [ ] **Step 2: 手动验证清单**
- [ ] 品牌头 slogan 更新
- [ ] 品牌头下方显示富沛能量值
- [ ] 用户卡片显示富沛能量行
- [ ] 功能菜单4组分组标题
- [ ] 「邀请加入」ActionSheet弹窗选择类型
- [ ] 勋章墙3×3网格展示（优先调API）
- [ ] 成长报告显示真实数据
- [ ] 心智页心理Tab显示心愿单入口