chinese-family-tree-2/用户角色显示功能.md

👤 用户角色显示功能

✅ 已实现的功能

1. 用户资料 API

端点: GET /api/user/profile

返回数据:

{
  "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 个       │
│                                     │
│ 协作家族树                           │
│ ┌─────────────────────────────────┐ │
│ │ 李氏家族树        [编辑者]       │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ 王氏家族树        [查看者]       │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

---

📝 代码实现

角色文本映射

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

角色颜色映射

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'
}

获取用户资料

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. 查看用户信息

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

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

2. 测试 API

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

# 应返回完整的用户资料

3. 测试不同角色

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

---

📊 数据统计

用户信息卡片显示：

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

---

✨ 功能特点

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

---

🎯 完成状态

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

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