freedakgmail
177 lines
5.6 KiB
Markdown
177 lines
5.6 KiB
Markdown
# 版本历史详细视图
|
||
|
||
## ✅ 功能完成
|
||
|
||
版本历史现在直接显示每个版本的详细内容，不需要点击。
|
||
|
||
## 🎯 显示效果
|
||
|
||
### 布局结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 📜 版本历史 │
|
||
│ 共 5 个版本 │
|
||
├─────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ [更新] 版本 5 2025-11-24 13:18 │ │
|
||
│ │ 👤 虞女士 │ │
|
||
│ │ │ │
|
||
│ │ 家族关系 │ │
|
||
│ │ 父亲: xxx 母亲: xxx │ │
|
||
│ │ 配偶: xxx 子女: xxx │ │
|
||
│ │ │ │
|
||
│ │ 详细信息 │ │
|
||
│ │ 姓名: xxx 性别: 男 │ │
|
||
│ │ 出生: xxx 世代: 3 │ │
|
||
│ │ 手机: xxx 邮箱: xxx │ │
|
||
│ │ ... │ │
|
||
│ │ │ │
|
||
│ │ 简介 │ │
|
||
│ │ 这是一段简介... │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ [更新] 版本 4 2025-11-24 12:20 │ │
|
||
│ │ ... │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
## 📋 显示内容
|
||
|
||
### 1. 版本头部
|
||
- 操作类型标签（创建/更新/删除）
|
||
- 版本号
|
||
- 修改时间（精确到分钟）
|
||
|
||
### 2. 操作人
|
||
- 显示修改人姓名或邮箱
|
||
|
||
### 3. 家族关系（最上方）
|
||
- 父亲、母亲
|
||
- 配偶、子女
|
||
- 岳父/公公、岳母/婆婆
|
||
- **两列布局**
|
||
|
||
### 4. 详细信息
|
||
- 基本信息：姓名、性别、出生日期等
|
||
- 联系方式：手机、电话、邮箱、地址
|
||
- 其他信息：世代、字辈、字、号等
|
||
- **两列布局**
|
||
|
||
### 5. 简介
|
||
- 显示前3行（line-clamp-3）
|
||
- 单独一行显示
|
||
|
||
## 🎨 样式设计
|
||
|
||
### 颜色标识
|
||
- **创建**：`bg-green-100 text-green-700 border-green-200`
|
||
- **更新**：`bg-blue-100 text-blue-700 border-blue-200`
|
||
- **删除**：`bg-red-100 text-red-700 border-red-200`
|
||
|
||
### 布局特点
|
||
- 每个版本独立卡片
|
||
- 版本间间距：`space-y-6`
|
||
- 内容两列布局：`grid grid-cols-2`
|
||
- 标签和值左右对齐：`flex justify-between`
|
||
|
||
### 响应式
|
||
- 滚动区域高度：600px
|
||
- 自动滚动条
|
||
- 移动端自适应
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 数据格式化
|
||
|
||
```typescript
|
||
const formatValue = (value: any) => {
|
||
if (value === null || value === undefined) return '-'
|
||
if (typeof value === 'boolean') return value ? '是' : '否'
|
||
if (Array.isArray(value)) return value.length > 0 ? value.join(', ') : '-'
|
||
return String(value)
|
||
}
|
||
```
|
||
|
||
### 字段分组
|
||
|
||
1. **家族关系字段**：
|
||
- `fatherId`, `motherId`
|
||
- `spouseIds`, `childrenIds`
|
||
- `spouseFatherName`, `spouseMotherName`
|
||
|
||
2. **详细信息字段**：
|
||
- 基本信息、日期、地点
|
||
- 联系方式
|
||
- 其他属性
|
||
|
||
3. **简介字段**：
|
||
- `bio`
|
||
|
||
### 渲染逻辑
|
||
|
||
```typescript
|
||
const renderVersionDetail = (snapshot: any) => {
|
||
return (
|
||
<div className="mt-3 space-y-4">
|
||
{/* 家族关系 */}
|
||
<div>...</div>
|
||
|
||
{/* 详细信息 */}
|
||
<div>...</div>
|
||
|
||
{/* 简介 */}
|
||
{snapshot.bio && <div>...</div>}
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
## ✨ 优势
|
||
|
||
1. **一目了然**：无需点击即可查看所有版本详情
|
||
2. **信息完整**：显示版本的完整快照
|
||
3. **布局清晰**：家族关系在最上方，详细信息两列显示
|
||
4. **易于对比**：多个版本垂直排列，便于比较
|
||
5. **性能优化**：使用 ScrollArea 虚拟滚动
|
||
|
||
## 📊 字段映射
|
||
|
||
| 字段 | 中文标签 | 显示位置 |
|
||
|------|---------|---------|
|
||
| fatherId | 父亲 | 家族关系 |
|
||
| motherId | 母亲 | 家族关系 |
|
||
| spouseIds | 配偶 | 家族关系 |
|
||
| childrenIds | 子女 | 家族关系 |
|
||
| fullName | 姓名 | 详细信息 |
|
||
| gender | 性别 | 详细信息 |
|
||
| birthDate | 出生日期 | 详细信息 |
|
||
| phone | 手机 | 详细信息 |
|
||
| email | 邮箱 | 详细信息 |
|
||
| bio | 简介 | 单独显示 |
|
||
| ... | ... | ... |
|
||
|
||
## 💡 使用场景
|
||
|
||
1. **查看修改历史**：了解成员信息的变化过程
|
||
2. **数据审计**：追踪谁在什么时候修改了什么
|
||
3. **错误恢复**：查看历史版本，准备回滚
|
||
4. **信息对比**：比较不同版本的差异
|
||
|
||
## 🔮 未来增强
|
||
|
||
1. **版本对比**：选择两个版本进行详细对比
|
||
2. **版本回滚**：一键恢复到历史版本
|
||
3. **变更高亮**：突出显示与上一版本的差异
|
||
4. **搜索过滤**：按时间、操作人筛选版本
|
||
5. **导出功能**：导出版本历史为PDF/Excel
|
||
|
||
## 📝 注意事项
|
||
|
||
1. **数据量**：版本过多时可能影响加载速度
|
||
2. **隐私**：确保只有有权限的用户能查看
|
||
3. **存储**：每个版本保存完整快照，注意存储空间
|
||
4. **性能**：使用分页或虚拟滚动优化大量版本的显示
|