Loading... # 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. 技术改进 **架构设计**： ```mermaid 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： ```sql 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 关系型数据库 - 外键约束保证数据完整性 - 索引优化查询性能 **认证流程**： ```mermaid 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 力导向图 **物理引擎**： - 节点间斥力计算 - 边的引力约束 - 阻尼系数防止震荡 **自动巡游算法**： ```mermaid 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 可视化方案，为家族族谱管理提供了全新的数字化体验。项目不仅具有实用价值，也为开发者学习前沿技术提供了优秀的参考案例。 *** ## 参考资料 1. [GitHub - yunfengsa/pure-genealogy](https://github.com/yunfengsa/pure-genealogy) 2. [Next.js 15 Documentation](https://nextjs.org/docs) 3. [Supabase Documentation](https://supabase.com/docs) 4. [@xyflow/react](https://reactflow.dev/) 5. [Slate.js Framework](https://docs.slatejs.org/) 最后修改：2026 年 01 月 24 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏