freedak/chinese-family-tree-2

Fork 0

Files

T

freedakgmail 626d7dddde 0.0.0.5

2025-11-23 00:49:16 +08:00

6.1 KiB

Raw Blame History

华夏谱 (HuaXiaPu) - 系统完善计划

本计划旨在将当前的“华夏谱”原型系统转化为一个功能完备、数据安全、体验优秀的家族树管理应用。

阶段一：数据持久化与基础可用性 (Data Persistence & Usability)

优先级：最高 (P0) 目标：解决刷新页面导致数据丢失的问题，确保用户录入的数据能够安全保存。

本地存储 (Local Storage) 集成
- 机制：利用浏览器的 localStorage API。
- 实现：
  - 修改 FamilyContext，在应用启动时优先从 localStorage 读取数据。
  - 在 addMember, updateMember, deleteMember 等所有写操作后，自动同步最新状态到 localStorage。
  - 使用 useEffect 监听数据变化并防抖保存。
- 重置功能：在设置页添加“清除本地缓存”按钮，用于恢复默认演示数据。
数据备份增强
- 优化 JSON 导出：确保导出的 JSON 文件包含完整的时间戳、版本号和元数据。
- 智能导入：导入时进行数据格式校验，防止坏数据崩坏页面；提供“合并”或“覆盖”选项。

阶段二：核心功能增强 (Core Feature Enhancement)

优先级：高 (P1) 目标：补充家谱管理中必不可少的多媒体和标准格式支持。

多媒体支持 (Media Support)
- 头像上传：
  - 方案 A (纯前端)：实现图片裁剪并转换为 Base64 字符串存储（注意控制大小）。
  - 方案 B (云存储)：集成 AWS S3 或类似对象存储服务（需后端支持）。
- 相册功能：允许为每个成员添加多张生活照。
GEDCOM 标准支持
- 导入：引入 GEDCOM 解析库 (e.g., read-gedcom)，支持从其他软件（如 Ancestry, MyHeritage）迁移数据。
- 导出：将内部数据结构转换为标准 .ged 格式，确保数据可迁移性。
族谱可视化升级
- 导出图片：集成 html2canvas 或类似库，允许用户将当前的家谱树导出为高清 PNG/JPG 图片，方便打印。
- 视图切换：增加“垂直视图”（传统吊线图）和“水平视图”的切换。
- 折叠/展开：支持点击节点折叠子分支，优化在大数据量下的查看体验。

阶段三：逻辑校验与体验优化 (Logic & UX)

优先级：中 (P2) 目标：提升数据的准确性，防止逻辑错误的录入。

逻辑校验规则
- 时间校验：出生日期 < 逝世日期；子女出生日期 > 父母出生日期 + X 年。
- 关系校验：防止循环引用（自己不能是自己的祖先）。
- 完整性提示：提示缺失信息的成员（如缺失配偶、缺失生卒年）。
搜索与筛选增强
- 高级搜索：支持按字辈、籍贯、标签、生卒年份范围进行组合筛选。
- 快速定位：搜索结果点击后，在族谱图中自动居中并高亮显示该成员。
界面细节打磨
- 移动端适配：优化移动端的触摸拖拽和缩放体验。
- 暗色模式：完善 Dark Mode 的配色细节。
- 多语言：支持简体中文 / 繁体中文切换。

阶段四：后端集成与协作（远期规划）

优先级：低 (P3) 目标：支持多用户在线协作修谱。

用户系统：集成 NextAuth.js，支持邮箱/手机号登录。
云端数据库：迁移至 PostgreSQL + Prisma，实现数据的云端永久存储。
权限管理：
- 管理员：可编辑所有信息。
- 编辑者：仅可编辑特定分支。
- 浏览者：仅查看，不可编辑。
操作日志：记录谁在什么时候修改了哪条记录（修谱记录）。

建议执行路径

立即执行：完成 阶段一，使应用具备基本的实用价值。
随后：根据用户反馈，选择性实施 阶段二 中的“导出图片”和“GEDCOM支持”。

已完成的高优先级功能 ✅

1. 导出族谱图为图片 ✅

使用 html2canvas 实现
支持导出为高清 PNG 格式
自动重置视图以获取完整族谱
文件名包含日期标识

2. GEDCOM 格式支持 ✅

完整的 GEDCOM 5.5.1 格式导出
GEDCOM 文件导入功能
自动解析个人信息和家庭关系
兼容 Ancestry、MyHeritage 等主流软件

3. 搜索结果在族谱图中定位 ✅

成员列表页面添加定位按钮
点击后跳转到族谱图并高亮显示
高亮样式：黄色边框 + 脉冲动画
支持全局高亮状态管理

4. 图片裁剪和压缩 ✅

使用 react-image-crop 实现裁剪
使用 browser-image-compression 自动压缩
圆形裁剪框，适合头像
支持跳过裁剪直接保存
压缩至 1MB 以下，最大尺寸 1024px

5. 循环引用检测 ✅

深度优先搜索检测循环引用
防止将后代设置为祖先
自我引用检测（不能是自己的父母/配偶）
实时验证并显示错误提示

已完成的中优先级功能 ✅

6. 照片墙（多张照片）✅

使用 react-image-crop 和 browser-image-compression
支持批量上传和裁剪
网格布局展示，点击放大预览
集成到成员表单和详情页

7. 统计图表（饼图、柱状图）✅

使用 ECharts 实现
性别分布饼图
世代分布柱状图
年龄分布饼图
出生年代折线图
集成到首页统计标签页

8. 家族故事模块 ✅

添加/编辑/删除故事功能
支持标题、日期、内容字段
卡片式展示，按时间排序
集成到成员表单和详情页

9. 纪念日浏览器通知 ✅

请求通知权限管理
每日自动检查生日和忌日
浏览器原生通知
未来7天纪念日预告
集成到设置页面

10. PWA 支持 ✅

manifest.json 配置
Service Worker 离线缓存
可安装到主屏幕
自动更新检测
推送通知支持

❌ 未完成的功能

低优先级 ❌ 多用户系统 ❌ 云端同步 ❌ 权限管理 ❌ 操作日志 ❌ AI 辅助功能

6.1 KiB Raw Blame History Unescape Escape