# 👤 用户角色显示功能

## ✅ 已实现的功能

### 1. 用户资料 API

**端点**: `GET /api/user/profile`

**返回数据**:
```json
{
  "user": {
    "id": "用户ID",
    "email": "邮箱",
    "name": "姓名",
    "createdAt": "创建时间",
    "updatedAt": "更新时间",
    "ownedTreesCount": 2,  // 拥有的家族树数量
    "collaborations": [     // 协作的家族树
      {
        "treeId": "家族树ID",
        "treeName": "家族树名称",
        "role": "EDITOR"     // 角色：OWNER/EDITOR/VIEWER
      }
    ]
  }
}
```

### 2. 用户信息卡片增强

**显示内容**:
- ✅ 用户头像（首字母）
- ✅ 用户名
- ✅ 邮箱
- ✅ 用户 ID
- ✅ 拥有的家族树数量
- ✅ 协作家族树列表
- ✅ 每个家族树的角色标签

### 3. 角色标签样式

| 角色 | 显示文本 | 颜色 |
|------|---------|------|
| OWNER | 所有者 | 紫色 🟣 |
| EDITOR | 编辑者 | 蓝色 🔵 |
| VIEWER | 查看者 | 灰色 ⚪ |

---

## 🎨 UI 展示

### 用户信息卡片

```
┌─────────────────────────────────────┐
│ 👤 用户信息                          │
│ 您的账号信息和角色                   │
├─────────────────────────────────────┤
│                                     │
│  [头像]  测试用户                    │
│         test@example.com            │
│         用户 ID: cmiak...            │
│                                     │
│ ─────────────────────────────────── │
│                                     │
│ 拥有的家族树              2 个       │
│                                     │
│ 协作家族树                           │
│ ┌─────────────────────────────────┐ │
│ │ 李氏家族树        [编辑者]       │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ 王氏家族树        [查看者]       │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

---

## 📝 代码实现

### 角色文本映射

```typescript
const getRoleText = (role: string) => {
  const roleMap: Record<string, string> = {
    'OWNER': '所有者',
    'EDITOR': '编辑者',
    'VIEWER': '查看者'
  }
  return roleMap[role] || role
}
```

### 角色颜色映射

```typescript
const getRoleBadgeColor = (role: string) => {
  const colorMap: Record<string, string> = {
    'OWNER': 'bg-purple-100 text-purple-700 border-purple-200',
    'EDITOR': 'bg-blue-100 text-blue-700 border-blue-200',
    'VIEWER': 'bg-gray-100 text-gray-700 border-gray-200'
  }
  return colorMap[role] || 'bg-gray-100 text-gray-700'
}
```

### 获取用户资料

```typescript
useEffect(() => {
  if (session?.user?.id) {
    fetch('/api/user/profile')
      .then(res => res.json())
      .then(data => {
        if (data.user) {
          setUserProfile(data.user)
        }
      })
      .catch(err => console.error('获取用户资料失败:', err))
  }
}, [session?.user?.id])
```

---

## 🔍 测试方法

### 1. 查看用户信息

```bash
# 访问设置页面
http://localhost:3000/settings

# 查看用户信息卡片
- 应显示用户基本信息
- 应显示拥有的家族树数量
- 应显示协作家族树列表（如果有）
```

### 2. 测试 API

```bash
# 登录后访问
curl -b cookies.txt http://localhost:3000/api/user/profile

# 应返回完整的用户资料
```

### 3. 测试不同角色

1. 创建多个家族树
2. 邀请用户作为协作者（不同角色）
3. 查看设置页面
4. 验证角色标签颜色和文本

---

## 📊 数据统计

用户信息卡片显示：

- **拥有的家族树**: 用户作为 OWNER 的家族树数量
- **协作家族树**: 用户作为 EDITOR 或 VIEWER 的家族树列表
- **角色标签**: 每个协作家族树的角色

---

## ✨ 功能特点

1. **实时更新** - 页面加载时自动获取最新数据
2. **角色可视化** - 不同角色用不同颜色标识
3. **信息完整** - 显示所有相关的家族树和角色
4. **响应式设计** - 适配各种屏幕尺寸

---

## 🎯 完成状态

- ✅ 用户资料 API
- ✅ 角色显示
- ✅ 家族树统计
- ✅ 协作列表
- ✅ 角色标签样式
- ✅ 自动数据获取

**用户角色显示功能已完全实现！** 🎉