diff --git a/docs/superpowers/specs/2026-06-15-profile-merge-design.md b/docs/superpowers/specs/2026-06-15-profile-merge-design.md new file mode 100644 index 0000000..a9de3fb --- /dev/null +++ b/docs/superpowers/specs/2026-06-15-profile-merge-design.md @@ -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(只展示已有字段)