Pure Genealogy 技术分析：Next.js 15 + Supabase 构建的现代化族谱管理系统
一、新闻概述
1. 标题
Pure Genealogy：基于 Next.js 15 和 Supabase 的全中文家族族谱管理系统
2. 发布时间
2024 年（GitHub 开源项目）
3. 来源
GitHub 开源仓库：yunfengsa/pure-genealogy
二、核心内容
1. 事件摘要
A. 主要内容
Pure Genealogy 是一个采用前沿技术栈构建的家庭族谱管理系统，完全支持中文环境。项目融合了 2D/3D 可视化、富文本编辑、实时同步等多种现代化特性。
B. 核心亮点
- 采用 Next.js 15 (App Router) 和 React 19 最新技术
- Supabase 全栈后端解决方案
- 2D 族谱图支持世代标尺、松柏绿瀑布式代际渐变色
- 3D 关系网支持自动巡游功能
- Living Book 详情页采用拟物化 3D 翻书交互
- Slate.js 富文本编辑器支持生平传记
2. 关键信息
A. 版本信息
- v2.0 升级引入全新 2D 族谱图渲染引擎
- TypeScript 99.1% 代码覆盖率
B. 重要数据
- GitHub Stars：126
- Forks：16
- MIT 开源许可
C. 涉及产品与技术
- Next.js 15、React 19
- Supabase (PostgreSQL + Auth + Realtime)
- shadcn/ui、Tailwind CSS
- @xyflow/react、react-force-graph-3d
- Slate.js
3. 背景介绍
A. 项目定位
面向中文用户的家族族谱管理工具，解决传统族谱系统界面陈旧、交互体验差、可视化单一等问题。
B. 技术演进
从传统纸质族谱到数字化管理，从单一列表展示到多维可视化呈现。
三、详细报道
1. 主要内容
A. 核心功能模块
成员档案管理：
- 记录姓名、字辈、父母、配偶、生卒年、居住地、官职等详细信息
- 支持 Excel/CSV 批量导入导出
- 富文本生平事迹编辑
多视图可视化：
- 2D 族谱图：基于 Dagre 算法的层级树状图
- 3D 力导向图：星空般的三维节点展示
- 统计仪表盘：世代增长趋势、字辈统计
- 历史时间轴：横向展示家族历史跨度
B. 技术改进
架构设计：
graph TB
subgraph Frontend[前端]
A[Next.js 15 App Router]
B[React 19 Components]
C[shadcn/ui UI组件]
D[Tailwind CSS 样式]
end
subgraph Visualization[可视化层]
E[@xyflow/react 2D图]
F[react-force-graph-3d 3D图]
G[recharts 图表]
end
subgraph Editing[编辑功能]
H[Slate.js 富文本]
I[html-to-image 导出]
end
subgraph Backend[后端服务]
J[Supabase PostgreSQL]
K[Supabase Auth]
L[Supabase Realtime]
end
A --> B
B --> C
C --> D
B --> E
B --> F
B --> G
B --> H
H --> I
A --> J
A --> K
A --> L
C. 数据模型设计
核心数据表 family_members：
CREATE TABLE family_members (
id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
name text NOT NULL,
generation integer,
sibling_order integer,
father_id bigint REFERENCES family_members(id),
gender text CHECK (gender IN ('男', '女')),
official_position text,
is_alive boolean DEFAULT true,
spouse text,
remarks text,
birthday date,
death_date date,
residence_place text,
updated_at timestamp with time zone DEFAULT now() NOT NULL
);D. 可视化特性详解
2D 族谱图特性：
- 世代标尺：左侧自动生成水墨风标尺
- 代际渐变：松柏绿瀑布式色彩深浅
- 金线溯源：点击节点高亮祖先路径
- 金扇繁衍：点击节点高亮子孙路径
- 高清导出：支持带背景和水印的图片导出
3D 关系网特性：
- 自动巡游：计算任意两名成员间最短路径
- 相机飞行：自动控制视角漫游
- 力导向布局：物理引擎驱动的节点分布
2. 技术细节
A. 性能优化
- Server Actions 减少客户端负载
- 实时订阅采用增量更新
- 图片懒加载与缓存策略
- 索引优化查询性能
B. 用户体验设计
Living Book 详情页：
- PC 端：拟物化书卷质感，支持 3D 翻书动画
- 移动端：全屏卡片展示
- 正面：成员档案信息
- 背面：富文本生平传记
阅读模式动效：
- 逐字书写效果
- 毛笔扫过艺术动效
C. 安全与认证
- Supabase Auth 完整认证流程
- 支持注册、登录、密码重置
- 登录页采用水墨山水风格设计
- 行级安全策略 (Row Level Security)
3. 数据与事实
A. 技术栈对比
| 技术领域 | 选择方案 | 替代方案 | 选择理由 |
|---|---|---|---|
| 前端框架 | Next.js 15 | Create React App | App Router、Server Components |
| 状态管理 | Supabase Realtime | Redux | 实时同步能力 |
| 可视化 2D | @xyflow/react | D3.js | React 集成度高 |
| 可视化 3D | react-force-graph-3d | Three.js | 开箱即用 |
| 样式方案 | Tailwind CSS | CSS Modules | 开发效率高 |
B. 项目结构
/
├── app/ # Next.js App Router 核心
│ ├── auth/ # 认证流程
│ ├── family-tree/ # 族谱功能
│ │ ├── graph/ # 2D 视图
│ │ ├── graph-3d/ # 3D 视图
│ │ ├── statistics/ # 统计仪表盘
│ │ ├── timeline/ # 时间轴
│ │ └── biography-book/ # 传记书模式
│ └── ...
├── components/ # React 组件
│ ├── ui/ # shadcn/ui 基础组件
│ ├── rich-text/ # Slate 富文本组件
│ └── ...
├── lib/ # 工具函数与配置
└── hooks/ # 自定义 Hooks四、影响分析
1. 技术趋势
A. 前端技术演进
- App Router 成为 Next.js 推荐模式
- Server Components 减少客户端负担
- Server Actions 简化数据 mutation
B. 全栈无服务化
- Supabase 降低后端开发门槛
- PostgreSQL + 实时订阅成为标准组合
- 行级安全策略增强数据安全
2. 应用场景
A. 目标用户
- 家族宗亲会
- 地方文化研究机构
- 个人族谱爱好者
- 教育机构历史文化教学
B. 竞争对比
| 特性 | Pure Genealogy | 传统族谱系统 |
|---|---|---|
| 技术架构 | 现代化全栈 | 传统单体 |
| 可视化 | 2D/3D 多维 | 单一列表 |
| 实时同步 | 支持 | 不支持 |
| 中文支持 | 深度定制 | 基础支持 |
| 开源许可 | MIT | 闭源 |
3. 生态影响
A. 开源社区价值
- 提供完整的 Next.js 15 实战案例
- 展示 Supabase 全栈应用最佳实践
- 2D/3D 可视化集成参考
B. 学习资源意义
- React 19 实际应用场景
- 富文本编辑器集成方案
- 大规模数据可视化实践
五、技术深度解析
1. 核心技术选型分析
A. Next.js 15 的优势
Server Components：
- 减少客户端 JavaScript 体积
- 直接访问后端资源
- 提升首屏加载速度
App Router：
- 基于文件系统的路由
- 嵌套布局与数据加载
- Streaming 与 Suspense 支持
B. Supabase 集成方案
数据库设计：
- PostgreSQL 关系型数据库
- 外键约束保证数据完整性
- 索引优化查询性能
认证流程：
sequenceDiagram
participant U as 用户
participant F as 前端应用
participant S as Supabase Auth
participant D as PostgreSQL
U->>F: 提交登录表单
F->>S: 调用 signInWithPassword
S->>D: 验证用户凭证
D-->>S: 返回用户数据
S-->>F: 返回 Session
F-->>U: 登录成功，跳转首页
实时订阅：
- WebSocket 持久连接
- 增量数据推送
- 多端自动同步
2. 可视化技术实现
A. 2D 族谱图算法
Dagre 层级布局：
- 自动计算节点位置
- 处理边交叉问题
- 优化边长和节点间距
交互实现：
- 金线溯源：递归查找父节点路径
- 金扇繁衍：递归遍历子节点树
- 路径高亮：动态样式类切换
B. 3D 力导向图
物理引擎：
- 节点间斥力计算
- 边的引力约束
- 阻尼系数防止震荡
自动巡游算法：
graph LR
A[起始节点] --> B{BFS搜索}
B --> C[构建关系树]
C --> D[提取最短路径]
D --> E[计算相机关键帧]
E --> F[插值动画过渡]
六、各方反应
1. 社区反馈
A. GitHub 社区
- 126 Stars 表明社区关注度
- 16 Forks 显示二次开发活跃度
B. 技术亮点认可
- Next.js 15 早期采用者
- Supabase 全栈应用典范
- 中文本地化深度定制
2. 用户价值
A. 正面评价
- 界面美观、交互流畅
- 可视化功能直观易懂
- 中文化体验优秀
B. 改进空间
- 大规模数据性能优化
- 移动端体验进一步优化
- 更多导出格式支持
七、未来展望
1. 技术演进方向
- AI 辅助家族关系推断
- 区块链数据存证
- 跨平台移动应用
2. 功能扩展可能
- DNA 数据集成
- 历史地图关联
- 家族故事自动生成
- 多语言国际化支持
八、总结
Pure Genealogy 项目展示了现代前端技术栈在传统文化领域的创新应用。通过 Next.js 15 的性能优势、Supabase 的全栈能力、以及创新的 2D/3D 可视化方案，为家族族谱管理提供了全新的数字化体验。项目不仅具有实用价值，也为开发者学习前沿技术提供了优秀的参考案例。