# 个人主页（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` - 藏品网格布局参考