Files

T

2026-06-15 10:43:42 +08:00

5.9 KiB

Raw Blame History

author, created_at, purpose

author	created_at	purpose
claude	2026-06-15	将人生轨迹页面的个人信息展示区域合并到我的页面，统一信息展示

个人信息组件合并设计

背景

当前小程序中，个人信息分散在两个页面展示：

RecordView（人生轨迹页面）：顶部个人信息卡片，展示头像、昵称、星座、MBTI、职业、爱好
MineView（我的页面）：展示头像、昵称、MBTI·星座·职业（一行）、觉醒深度、星历契合、菜单

两个页面存在大量重复信息，且 MineView 展示的个人字段较少。需要将 RecordView 的个人信息卡片完整合并到 MineView，取并集展示所有字段，去除重复。

设计目标

RecordView 完全移除个人信息展示区域
MineView 保留现有宇宙星空风格，新增「个人档案」信息区块
所有可用个人信息字段取并集，不重复展示
不新增后端接口，全部从现有 store 数据读取

变更范围

RecordView.vue — 移除个人信息区域

模板变更：

移除 profile-card 整个区域（包含头像、昵称、副标题、编辑按钮、meta-grid、爱好行、分隔线）

脚本变更：

移除 profile computed（store.userProfile || store.registrationData）
移除 avatar computed（dicebear 头像 URL）
移除 heroTags computed（爱好数组）
移除 editProfile 方法

样式变更：

移除所有 profile-card、profile-top、avatar-wrap、avatar、avatar-edit、edit-pen、tiny-pen、profile-info、name-row、profile-name、star、profile-subtitle、edit-profile、profile-divider、meta-grid、meta-item、meta-icon、meta-label、meta-value、person-icon、job-icon、heart、hobby-row、hobby-text 相关样式

保留不变：

section-head（"人生轨迹"标题 + "导入社交数据"按钮）
filters（筛选器）
timeline（事件时间线）
空状态卡片
create-fab（创建 FAB 按钮）

MineView.vue — 新增「个人档案」区块

位置：在 stats-grid（觉醒深度 | 星历契合）下方、menu-list 上方。

布局结构：

✦ 个人档案                          ← 区块标题

┌────────┬────────┬────────┐
│  ♋    │  ◉     │  ◻     │
│ 星座   │ MBTI   │ 职业   │        ← 第一行：来自 RecordView
│ 巨蟹座  │ INTJ   │ 设计师  │
├────────┼────────┼────────┤
│  📍   │  🏢    │  🏗    │
│ 城市   │ 行业   │ 公司   │        ← 第二行：新增字段
│ 上海   │ 互联网  │ xx公司 │
├────────┼────────┼────────┤
│  🎂   │  ♂     │  ⏳    │
│ 生日   │ 性别   │ 年龄   │        ← 第三行：新增字段
│ 6.15  │  男    │  28   │
└────────┴────────┴────────┘

♡ 爱好  摄影 · 阅读 · 音乐           ← 第四行：爱好

字段列表（并集）：

字段	数据来源	图标	空值显示
星座	`profile.zodiac`	♋	未设置
MBTI	`profile.mbti`	◉	未设置
职业	`profile.profession`	◻	未设置
城市	`profile.city`	📍	未设置
行业	`profile.industry`	🏢	未设置
公司	`profile.company`	🏗	未设置
生日	`profile.birthday`	🎂	未设置
性别	`profile.gender`	♂	未设置
年龄	由 birthday 计算	⏳	未设置
爱好	`profile.hobbies`	♡	未设置

编辑入口：整个区块可点击，跳转到 /pages/onboarding/index?edit=1。

样式规范

区块标题：

字号 40rpx，字重 800，白色
前缀 ✦ 金色星号（#ffd184），与 RecordView 的 section-title 风格一致
与上方 stats-grid 间距 42rpx

字段网格：

CSS Grid 三栏布局：grid-template-columns: repeat(3, 1fr)
每栏结构：图标（上）→ 标签（中，20rpx，rgba(219, 204, 247, 0.54)）→ 值（下，23rpx，白色，加粗 600）
栏间竖线分隔：border-right: 1rpx solid rgba(180, 139, 255, 0.22)，最后一栏无右边框
行间距 24rpx

爱好行：

♡ 图标 + "爱好" 标签 + 值，水平排列
与网格间距 20rpx，上方有细分隔线（1rpx solid rgba(180, 139, 255, 0.22)）
爱好值用 · 连接，最多显示 4 个

整体容器：

不加卡片背景，透明融入 MineView 星空背景
与 stats-grid、menu-list 的间距保持一致（42rpx）

数据逻辑

年龄计算：

const age = computed(() => {
  const birthday = profile.value.birthday
  if (!birthday) return null
  const birthYear = Number(String(birthday).slice(0, 4))
  if (!birthYear) return null
  return new Date().getFullYear() - birthYear
})

性别映射：

const genderText = computed(() => {
  const map = { male: '男', female: '女', other: '其他' }
  return map[profile.value.gender] || null
})

数据来源：全部从 store.userProfile || store.registrationData 读取，不新增后端接口。

MineView 现有信息处理