topfans/docs/PRD-my-profile.md

个人主页（My Profile）PRD

1. 概述

1.1 产品介绍

个人主页是一个整合展示用户个人资料和藏品的页面，功能类似于微信个人主页。用户可以查看自己的个人主页，也可以通过链接查看他人的个人主页。

1.2 需求来源

用户需要一个综合展示页面，整合展示头像/昵称/等级/展品/点赞数等信息。

1.3 范围

• 新建独立页面 my-profile.vue
• 支持查看自己和他人的主页
• 复用现有组件和 API

---

2. 页面结构

2.1 整体布局

┌─────────────────────────────────┐
│  顶部背景                       │
├─────────────────────────────────┤
│  用户信息卡片（固定）           │
│  ┌─────┐                        │
│  │头像 │ 昵称 | 等级徽章         │
│  │     │ UID | 粉丝标签          │
│  └─────┘ 全部点赞数: xxx        │
├─────────────────────────────────┤
│  藏品展品区（可滚动）           │
│  ┌────┬────┬────┐              │
│  │NFT1│NFT2│NFT3│  ...（点击展开）│
│  └────┴────┴────┘              │
└─────────────────────────────────┘

2.2 模块说明

模块	说明
顶部背景	渐变背景图，与整体风格一致
用户信息卡片	头像、昵称、等级、粉丝标签（固定不滚动）
藏品展品区	NFT 藏品网格，可滚动展示

---

3. 功能详细说明

3.1 用户信息卡片

展示字段：

字段	来源	说明
头像	avatar_url	用户头像，有等级边框
昵称	nickname	用户昵称
UID	uid	用户 ID
等级	current_identity.level	粉丝等级
粉丝标签	current_identity.tag	如"小飞侠"
全部点赞数	items[].like_count 求和	藏品总点赞数

交互说明：

• 仅展示，不可点击修改
• 头像使用 Avatar 组件，带等级徽章

3.2 藏品展品区

展示字段：

字段	来源	说明
藏品封面	cover_url	NFT 藏品图片
点赞数	like_count	藏品获得的点赞数

布局说明：

• 3 列网格布局
• 显示数量根据藏品等级区分（后期实现）
• 显示点赞数标签

交互说明：

• 点击"..." → 展开显示余下藏品
• 点击藏品卡片 → 跳转 /pages/asset-detail/asset-detail?asset_id=${nft.asset_id}

3.3 页面参数

参数	说明
target_uid	可选，指定查看的用户 ID

逻辑说明：

• 无 target_uid → 查看自己的主页
• 有 target_uid → 查看指定用户的主页

页面标题：

• 查看自己 → "我的主页"
• 查看他人 → "{用户昵称}的主页"

---

4. API 调用

4.1 查看自己

API	用途
getUserProfileApi()	获取当前用户资料
getMyAssetsApi(page, size)	获取我的藏品列表

4.2 查看他人

API	用途
getUserInfoApi(userId)	获取指定用户信息（需新增）
getUserGalleriesApi(targetUid)	获取他人全部藏品

4.3 API 位置

• 前端 API 文件：frontend/utils/api.js
• 后端已有路由：GET /api/v1/users/:user_id

---

5. 数据字段映射

页面展示	API 字段
头像	avatar_url 或 current_identity.avatar_url
昵称	nickname
等级	current_identity.level
粉丝标签	current_identity.tag
藏品封面	items[].cover_url
单个点赞数	items[].like_count
全部点赞数	items[].like_count 求和

---

6. 技术方案

6.1 文件结构

frontend/pages/my-profile/
  └── my-profile.vue    # 个人主页主文件

6.2 路由注册

在 pages.json 中注册路由：

{
  "path": "pages/my-profile/my-profile"
}

6.3 组件复用

组件	路径	用途
Avatar	pages/components/Avatar.vue	头像展示

藏品展品区说明：

• 藏品展品区用于展示用户已有的藏品列表
• 需新建独立组件或直接在页面中实现网格布局
• 不复用 NftCard 组件（该组件用于藏品市场/列表页）

6.4 页面入口

• profile.vue 的"我的资产"区域可添加入口
• 可通过 uni.navigateTo 跳转

---

7. 实现步骤

1. 在 frontend/pages/my-profile/ 下创建 my-profile.vue
2. 在 pages.json 注册路由
3. 在 frontend/utils/api.js 新增 getUserInfoApi(userId)
4. 实现用户信息卡片模块
5. 实现藏品展品区模块
6. 添加页面入口（可选）

---

8. 验收标准

• 页面可正常访问
• 用户头像、昵称、等级正确显示
• 粉丝标签正确显示
• 藏品网格正确显示
• 点赞数正确显示
• 支持 target_uid 查看他人主页
• 页面标题正确区分"我的主页"和"TA的主页"

---

9. 备注

9.1 后端数据限制

• 后端无浏览数/访问量字段
• 藏品展示使用点赞数替代

9.2 参考页面

• profile.vue - 用户信息展示参考
• exhibition.vue - 藏品网格布局参考