0.0.1.0

2025-11-23 03:07:39 +08:00
parent 626d7dddde
commit e92884ae53
679 changed files with 208175 additions and 1183474 deletions
@@ -0,0 +1,188 @@
+# 👤 用户角色显示功能
+
+## ✅ 已实现的功能
+
+### 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
+- ✅ 角色显示
+- ✅ 家族树统计
+- ✅ 协作列表
+- ✅ 角色标签样式
+- ✅ 自动数据获取
+
+**用户角色显示功能已完全实现！** 🎉