freedakgmail
189 lines
4.8 KiB
Markdown
189 lines
4.8 KiB
Markdown
# 👤 用户角色显示功能
|
|
|
|
## ✅ 已实现的功能
|
|
|
|
### 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
|
|
- ✅ 角色显示
|
|
- ✅ 家族树统计
|
|
- ✅ 协作列表
|
|
- ✅ 角色标签样式
|
|
- ✅ 自动数据获取
|
|
|
|
**用户角色显示功能已完全实现！** 🎉
|