freedakgmail
4.4 KiB
4.4 KiB
成员详情页版本历史功能
✅ 功能已完成
成员详情页现在显示版本历史，可以查看成员信息的所有修改记录。
📍 页面布局
新布局（左右分栏）
左侧（2/3宽度）：
- 详细信息（出生日期、年龄、逝世日期等）
- 联系方式（手机、电话、邮箱、地址）
- 生平事迹
- 照片墙
- 家族故事
- 家族关系（父母、配偶、子女）
右侧（1/3宽度）：
- 版本历史列表
🎯 版本历史功能
显示内容
- ✅ 版本号
- ✅ 操作类型（创建/更新/删除）
- ✅ 修改时间
- ✅ 修改人
- ✅ 变更摘要（前3个字段）
交互功能
- ✅ 点击版本高亮显示
- ✅ 滚动查看所有历史
- ✅ 自动选中最新版本
显示示例
┌─────────────────────────────┐
│ 版本历史 │
│ 共 5 个版本 │
├─────────────────────────────┤
│ [更新] 版本 5 ▶ │
│ 2025-11-24 13:18:32 │
│ 虞女士 │
│ • 简介 │
│ • 邮箱 │
│ 等 4 项 │
├─────────────────────────────┤
│ [更新] 版本 4 │
│ 2025-11-24 12:20:57 │
│ 虞女士 │
│ • 手机 │
│ • 地址 │
├─────────────────────────────┤
│ [创建] 版本 1 │
│ 2025-11-23 10:00:00 │
│ 虞女士 │
└─────────────────────────────┘
🔧 技术实现
新增文件
1. 版本历史组件
文件： components/members/member-version-history.tsx
功能：
- 获取并显示成员的所有历史版本
- 支持点击选择版本
- 显示变更摘要
- 自动关联用户信息
2. API 端点
文件： app/api/trees/[treeId]/members/[memberId]/history/route.ts
功能：
- 获取成员的历史记录
- 批量查询用户信息
- 按版本号倒序排列
修改文件
成员详情页
文件： app/members/[id]/page.tsx
修改：
- 导入版本历史组件
- 重新组织布局（左右分栏）
- 将详细信息和联系方式移到左侧
- 右侧显示版本历史
📊 数据流
用户访问成员详情页
↓
加载成员基本信息
↓
调用 API 获取版本历史
↓
/api/trees/[treeId]/members/[memberId]/history
↓
查询 MemberHistory 表
↓
批量查询 User 表（获取修改人信息）
↓
组合数据并返回
↓
前端显示版本历史列表
↓
用户点击版本（未来可查看详情）
🎨 UI 设计
颜色标识
- 创建：绿色 (bg-green-100 text-green-700)
- 更新：蓝色 (bg-blue-100 text-blue-700)
- 删除：红色 (bg-red-100 text-red-700)
选中状态
- 边框：
border-primary - 背景：
bg-primary/5 - 阴影：
shadow-sm - 指示器：右侧箭头图标
响应式设计
- 桌面：左右分栏（2:1）
- 移动：上下堆叠
🔮 未来功能
第一阶段（已完成）
- ✅ 显示版本历史列表
- ✅ 显示变更摘要
- ✅ 支持版本选择
第二阶段（计划中）
- 点击版本查看完整快照
- 版本对比功能
- 版本回滚功能
- 导出版本历史
💡 使用说明
-
查看版本历史
- 访问任意成员详情页
- 右侧自动显示版本历史
- 最新版本默认选中
-
查看变更详情
- 每个版本显示前3个变更字段
- 超过3个显示总数提示
-
查看修改人
- 每个版本显示修改人姓名或邮箱
- 显示修改时间
📝 注意事项
- 权限：所有有权访问成员的用户都能查看版本历史
- 性能：历史记录按需加载，不影响页面性能
- 存储：每个版本保存完整快照，占用一定存储空间
✨ 优势
- 完整追溯：可以查看成员信息的完整修改历史
- 责任明确：记录每次修改的操作人
- 数据安全：支持未来的版本回滚功能
- 审计友好：满足数据审计需求