docs：个人信息组件合并设计文档

2026-06-15 10:43:42 +08:00
parent 74a2c15b6b
commit 49f73679d0
1 changed files with 152 additions and 0 deletions
@@ -0,0 +1,152 @@
+---
+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（只展示已有字段）