个人中心页面动态数据修复设计文档

问题描述

小程序"我的"（个人中心）页面（MineView.vue）当前显示的是写死的固定信息，而非当前登录用户的实际数据：

头像区域显示纯 CSS 绘制的通用人形图标，未使用用户头像
昵称 fallback 为固定值 '张义明'
身份标签 fallback 为固定值 'ENFJ · 狮子座 · 星民'
统计数据 觉醒深度 Lv.4 和 星历契合 98% 为硬编码

方案概述

采用方案 A：从现有 store 数据动态生成头像和统计，替换所有写死内容。仅修改 MineView.vue，无后端改动。

具体改动

1. `mini-program/src/pages/main/MineView.vue`

头像区域

用 <image> 组件替换 CSS 人形图标（.person-head 和 .person-body）。

新增 avatarUrl computed：

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

模板中：

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

保留原有 .avatar-circle 的圆形边框和发光效果。

昵称与身份标签

displayName 的 fallback 从 '张义明' 改为 '未设置昵称'
metaLine：当 mbti、zodiac、profession 均为空时显示 '点击设置个人档案'；否则按 ${mbti} · ${zodiac} · ${identity} 拼接

统计数据

觉醒深度：基于 store.events.length 映射等级：

事件数量	等级
0	Lv.1
1-2	Lv.2
3-5	Lv.3
6-9	Lv.4
10+	Lv.5

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'
})

星历契合：基于资料完整度计算百分比。检查字段：nickname、gender、zodiac、mbti、profession、hobbies（数组有长度计 1 分）、以及人生经历是否填写（childhood.text、joy.text、low.text、future.ideal 任一非空计 1 分）。满分 7 分。

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) + '%'
})

模板中将硬编码的 Lv.4 和 98% 分别替换为 {{ awakenLevel }} 和 {{ harmonyPercent }}。

数据依赖

MineView.vue 通过 useAppStore() 访问 store。main/index.vue 在 onMounted 中已经调用了：

store.fetchUserProfile()
store.fetchEvents()

因此 MineView.vue 无需新增数据加载逻辑，可直接读取 store.userProfile 和 store.events。

未修改内容

stores/app.js 不做修改
services/userProfile.js 不做修改
onboarding/index.vue 不做修改
页面样式（.profile-center、.stats-grid 等）保持原样

测试验证

有完整资料的用户进入"我的"页面，显示 Dicebear 生成头像、真实昵称、MBTI/星座/职业、根据事件数计算的觉醒深度、根据资料完整度计算的星历契合百分比
新用户（无资料）进入"我的"页面，显示默认头像、未设置昵称、点击设置个人档案、觉醒深度 Lv.1、星历契合 0%
点击"个人档案设置"仍能正常跳转到 onboarding 编辑资料页
编辑资料保存后返回"我的"页面，数据已更新

3.8 KiB Raw Blame History Unescape Escape