207 lines
5.5 KiB
Markdown
207 lines
5.5 KiB
Markdown
# 个人主页（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` 中注册路由：
|
||
|
||
```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` - 藏品网格布局参考
|