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

# 个人信息组件合并设计

## 背景

当前小程序中，个人信息分散在两个页面展示：
- **RecordView（人生轨迹页面）**：顶部个人信息卡片，展示头像、昵称、星座、MBTI、职业、爱好
- **MineView（我的页面）**：展示头像、昵称、MBTI·星座·职业（一行）、觉醒深度、星历契合、菜单

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

## 设计目标

1. RecordView 完全移除个人信息展示区域
2. MineView 保留现有宇宙星空风格，新增「个人档案」信息区块
3. 所有可用个人信息字段取并集，不重复展示
4. 不新增后端接口，全部从现有 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）

### 数据逻辑

**年龄计算**：
```js
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
})
```

**性别映射**：
```js
const genderText = computed(() => {
  const map = { male: '男', female: '女', other: '其他' }
  return map[profile.value.gender] || null
})
```

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

### MineView 现有信息处理

**保留不变**：
- 头像（居中展示，保留现有宇宙光晕效果）
- 昵称（大字号居中）
- 签名行（`metaLine`：MBTI · 星座 · 职业 的组合文本）
- 统计数据（觉醒深度、星历契合）
- 菜单列表（个人档案设置、多账号切换、与开发者对话）
- 退出登录按钮

**签名行处理**：`metaLine` 保留，作为昵称下方的补充签名文本，与下方「个人档案」区块的三栏网格不冲突。

## 不在范围内

- 不修改后端接口
- 不修改 `stores/app.js`
- 不修改 `profile/index.vue`（该页面只是 MineView 的包装）
- 不新增个人信息字段到 store（只展示已有字段）