153 lines
5.9 KiB
Markdown
153 lines
5.9 KiB
Markdown
---
|
||
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（只展示已有字段）
|