freedakgmail
172 lines
4.4 KiB
Markdown
172 lines
4.4 KiB
Markdown
# 成员详情页版本历史功能
|
||
|
||
## ✅ 功能已完成
|
||
|
||
成员详情页现在显示版本历史，可以查看成员信息的所有修改记录。
|
||
|
||
## 📍 页面布局
|
||
|
||
### 新布局（左右分栏）
|
||
|
||
**左侧（2/3宽度）**：
|
||
1. 详细信息（出生日期、年龄、逝世日期等）
|
||
2. 联系方式（手机、电话、邮箱、地址）
|
||
3. 生平事迹
|
||
4. 照片墙
|
||
5. 家族故事
|
||
6. 家族关系（父母、配偶、子女）
|
||
|
||
**右侧（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）
|
||
- 移动：上下堆叠
|
||
|
||
## 🔮 未来功能
|
||
|
||
### 第一阶段（已完成）
|
||
- ✅ 显示版本历史列表
|
||
- ✅ 显示变更摘要
|
||
- ✅ 支持版本选择
|
||
|
||
### 第二阶段（计划中）
|
||
- [ ] 点击版本查看完整快照
|
||
- [ ] 版本对比功能
|
||
- [ ] 版本回滚功能
|
||
- [ ] 导出版本历史
|
||
|
||
## 💡 使用说明
|
||
|
||
1. **查看版本历史**
|
||
- 访问任意成员详情页
|
||
- 右侧自动显示版本历史
|
||
- 最新版本默认选中
|
||
|
||
2. **查看变更详情**
|
||
- 每个版本显示前3个变更字段
|
||
- 超过3个显示总数提示
|
||
|
||
3. **查看修改人**
|
||
- 每个版本显示修改人姓名或邮箱
|
||
- 显示修改时间
|
||
|
||
## 📝 注意事项
|
||
|
||
1. **权限**：所有有权访问成员的用户都能查看版本历史
|
||
2. **性能**：历史记录按需加载，不影响页面性能
|
||
3. **存储**：每个版本保存完整快照，占用一定存储空间
|
||
|
||
## ✨ 优势
|
||
|
||
1. **完整追溯**：可以查看成员信息的完整修改历史
|
||
2. **责任明确**：记录每次修改的操作人
|
||
3. **数据安全**：支持未来的版本回滚功能
|
||
4. **审计友好**：满足数据审计需求
|