# 个人中心页面动态数据修复 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 组件**

将：
```html
      <view class="avatar-circle">
        <view class="person-head"></view>
        <view class="person-body"></view>
      </view>
```

改为：
```html
      <view class="avatar-circle">
        <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
      </view>
```

- [ ] **Step 2: 在 script 中新增 `avatarUrl` computed**

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

```javascript
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 区块末尾追加）**

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

- [ ] **Step 4: Commit**

```bash
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**

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

改为：
```javascript
const displayName = computed(() => profile.value.nickname || '未设置昵称')
```

- [ ] **Step 2: 修改 `metaLine` computed**

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

改为：
```javascript
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` 之后添加：

```javascript
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` 之后添加：

```javascript
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: 替换模板中的硬编码统计值**

将：
```html
    <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>
```

改为：
```html
    <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**

```bash
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: 确认模板中无硬编码用户信息**

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

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

- [ ] **Step 2: 确认 `<image>` 和 computed 属性存在**

运行：
```bash
grep -n "avatarUrl\|awakenLevel\|harmonyPercent" mini-program/src/pages/main/MineView.vue
```

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

- [ ] **Step 3: 查看提交记录**

运行：
```bash
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 中一致