242 lines
6.8 KiB
Markdown
242 lines
6.8 KiB
Markdown
# 个人中心页面动态数据修复 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 中一致
|