happy-life-star/docs/superpowers/plans/2026-06-03-mine-view-dynamic-data.md

个人中心页面动态数据修复 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: 修复"我的"页面显示写死信息的问题，改为从 store 动态读取用户头像、昵称、身份标签和统计数据。

Architecture: 仅修改 MineView.vue 一个文件。复用 main/index.vue 已加载的 store 数据（userProfile 和 events），通过新增 computed 属性生成头像 URL、觉醒深度等级和星历契合百分比，替换模板中的硬编码值。

Tech Stack: Vue 3, uni-app, JavaScript

---

Task 1: 替换头像为动态生成头像

Files:

• Modify: mini-program/src/pages/main/MineView.vue:12-19（模板）
• Modify: mini-program/src/pages/main/MineView.vue:64-78（script）

Context: 当前头像区域用 .person-head 和 .person-body 两个 div 画了一个通用人形。需要替换为 <image> 组件显示 Dicebear 根据昵称生成的头像。

• Step 1: 在 template 中替换 CSS 人形为 image 组件

将：

      <view class="avatar-circle">
        <view class="person-head"></view>
        <view class="person-body"></view>
      </view>

改为：

      <view class="avatar-circle">
        <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
      </view>

• Step 2: 在 script 中新增 avatarUrl computed

在 profile computed 之后、displayName 之前添加：

const avatarUrl = computed(() => {
  const seed = profile.value.nickname || 'user'
  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b982ff`
})

• Step 3: 给 avatar-img 添加样式（在 style 区块末尾追加）

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

• Step 4: Commit

git add mini-program/src/pages/main/MineView.vue && git commit -m "fix(mine): replace static avatar with dynamic dicebear image"

---

Task 2: 替换写死的用户信息与统计数据

Files:

• Modify: mini-program/src/pages/main/MineView.vue:71-78（displayName + metaLine）
• Modify: mini-program/src/pages/main/MineView.vue:24-33（stats-grid 模板）

Context： displayName fallback 为 '张义明'，metaLine fallback 为 'ENFJ · 狮子座 · 星民'，统计数值 Lv.4 和 98% 硬编码。

• Step 1: 修改 displayName 的 fallback

将：

const displayName = computed(() => profile.value.nickname || '张义明')

改为：

const displayName = computed(() => profile.value.nickname || '未设置昵称')

• Step 2: 修改 metaLine computed

将：

const metaLine = computed(() => {
  const mbti = profile.value.mbti || 'ENFJ'
  const zodiac = profile.value.zodiac || '狮子座'
  const identity = profile.value.profession || '星民'
  return `${mbti} · ${zodiac} · ${identity}`
})

改为：

const metaLine = computed(() => {
  const mbti = profile.value.mbti
  const zodiac = profile.value.zodiac
  const identity = profile.value.profession
  if (!mbti && !zodiac && !identity) {
    return '点击设置个人档案'
  }
  return `${mbti || ''} · ${zodiac || ''} · ${identity || ''}`.replace(/(^ · | · $)/g, '').replace(/ ·  · /g, ' · ')
})

• Step 3: 新增 awakenLevel computed

在 metaLine 之后添加：

const awakenLevel = computed(() => {
  const count = store.events?.length || 0
  if (count >= 10) return 'Lv.5'
  if (count >= 6) return 'Lv.4'
  if (count >= 3) return 'Lv.3'
  if (count >= 1) return 'Lv.2'
  return 'Lv.1'
})

• Step 4: 新增 harmonyPercent computed

在 awakenLevel 之后添加：

const harmonyPercent = computed(() => {
  const hasLifeStory = profile.value.childhood?.text ||
    profile.value.joy?.text ||
    profile.value.low?.text ||
    profile.value.future?.ideal
  const fields = [
    profile.value.nickname,
    profile.value.gender,
    profile.value.zodiac,
    profile.value.mbti,
    profile.value.profession,
    profile.value.hobbies?.length,
    hasLifeStory
  ]
  const filled = fields.filter(Boolean).length
  return Math.round((filled / 7) * 100) + '%'
})

• Step 5: 替换模板中的硬编码统计值

将：

    <view class="stats-grid">
      <view class="stat-card">
        <text class="stat-label">觉醒深度</text>
        <text class="stat-value">Lv.4</text>
      </view>
      <view class="stat-card">
        <text class="stat-label">星历契合</text>
        <text class="stat-value">98%</text>
      </view>
    </view>

改为：

    <view class="stats-grid">
      <view class="stat-card">
        <text class="stat-label">觉醒深度</text>
        <text class="stat-value">{{ awakenLevel }}</text>
      </view>
      <view class="stat-card">
        <text class="stat-label">星历契合</text>
        <text class="stat-value">{{ harmonyPercent }}</text>
      </view>
    </view>

• Step 6: Commit

git add mini-program/src/pages/main/MineView.vue && git commit -m "fix(mine): replace hardcoded user info and stats with dynamic store data"

---

Task 3: 验证修复

Files:

• Read: mini-program/src/pages/main/MineView.vue

• Step 1: 确认模板中无硬编码用户信息

运行：

grep -n "张义明\|ENFJ\|狮子座\|星民\|Lv\.4\|98%" mini-program/src/pages/main/MineView.vue

预期：无输出（所有硬编码值已被替换）

• Step 2: 确认 <image> 和 computed 属性存在

运行：

grep -n "avatarUrl\|awakenLevel\|harmonyPercent" mini-program/src/pages/main/MineView.vue

预期：输出包含 avatarUrl、awakenLevel、harmonyPercent 的定义和引用

• Step 3: 查看提交记录

运行：

git log --oneline -3

预期：显示两次提交，分别为头像修复和统计数据修复

---

Self-Review Checklist

1. Spec coverage:

• ✅ 头像替换为 Dicebear 动态生成 — Task 1
• ✅ displayName fallback 改为 '未设置昵称' — Task 2 Step 1
• ✅ metaLine 无资料时显示 '点击设置个人档案' — Task 2 Step 2
• ✅ 觉醒深度基于 store.events.length — Task 2 Step 3
• ✅ 星历契合基于资料完整度 — Task 2 Step 4
• ✅ 模板硬编码值替换 — Task 2 Step 5
• ✅ 验证步骤 — Task 3

2. Placeholder scan:

• ✅ 无 "TBD"/"TODO" 等占位符
• ✅ 每步均含完整代码和命令
• ✅ 无 "类似 Task N" 的引用

3. Type consistency:

• ✅ 字段名（nickname、mbti、zodiac、profession、events、hobbies、childhood、joy、low、future）与 store 和 spec 一致
• ✅ avatarUrl 生成逻辑与 onboarding 中一致