pure-genealogy

在数字时代，如何系统性地记录和传承家族历史？传统纸质族谱难以维护、不易共享，而通用家谱软件又往往缺乏对中文语境的支持——比如字辈、官职、配偶关系等关键信息。

pure-genealogy 是一个完全开源、深度中文化、支持多维可视化的现代化家族族谱管理系统。它不仅是一个工具，更是一种数字家史的载体。

项目基于 Next.js 15（App Router） + React 19 + Supabase 构建，无需自建后端，开箱即用，且完全免费。

为什么专为中文设计？

大多数家谱工具以西方家庭结构为默认模型，忽略了中文家族特有的文化元素。pure-genealogy 从底层数据到界面交互，全面适配中文需求：

• 字辈字段：专门记录“辈分字”，支持按字辈统计分布
• 配偶直显：在族谱图中直接显示配偶姓名，而非隐藏在详情页
• 日期格式：生卒年采用公历/农历兼容逻辑（前端可扩展）
• UI 文案：全中文界面，包括“父亲”“母亲”“在世”“官职”等术语
• 水墨美学：登录页、导出图、世代标尺均融入东方视觉元素

多维可视化：不只是树状图

2D 族谱图（/family-tree/graph）

• 基于 Dagre 算法 自动生成层级布局，清晰展示代际关系
• 左侧动态生成 “世代标尺”，标注第几代，辅以松柏绿渐变色
• 点击任一成员，触发：
  • “金线溯源”：高亮所有祖先路径
  • “金扇繁衍”：展开所有子孙分支
• 支持一键导出 高清 PNG 图片（含背景与水印），适合打印或分享

3D 关系网（/family-tree/graph-3d）

• 使用 力导向图算法 构建沉浸式三维网络
• 新增 “自动巡游”（Auto Tour） 功能：输入任意两人，系统自动计算最短亲属路径，并控制相机沿路径飞行演示
• 适合探索远亲关系或复杂联姻网络

家族统计仪表盘（/family-tree/statistics）

• 人口总数、性别比例、在世/已故分布
• 世代增长趋势图：观察家族繁衍节奏
• 字辈频率统计：哪些字辈使用最多？是否断代？
• 年龄分布热力图

历史时间轴（/family-tree/timeline）

• 横向时间轴展示所有成员的生卒年
• 直观呈现家族历史跨度与关键时间节点

沉浸式成员档案：“Living Book” 体验

每位成员的详情页采用独创的 “Living Book” 设计：

• 正面：结构化档案（姓名、父母、配偶、官职、居住地等）
• 背面：富文本生平传记，由 Slate.js 编辑器支持
  • 支持加粗、引用、段落排版
  • 阅读模式下可启用 “逐字书写”或“毛笔扫过” 动效，增强阅读仪式感
• PC 端模拟书卷翻页，移动端为全屏卡片，响应式适配

技术架构与部署

🛠️ 核心技术栈

• 前端：Next.js 15（App Router + Server Actions）、React 19、TypeScript
• UI：shadcn/ui + Tailwind CSS，支持明暗主题切换
• 数据库 & 认证：Supabase（PostgreSQL + Auth + Realtime）
• 可视化：
  • 2D：@xyflow/react
  • 3D：react-force-graph-3d
  • 图表：recharts
• 富文本：Slate.js（生平编辑）
• 工具：ESLint、Lucide Icons、html-to-image（导出图片）

系统功能

• 完整用户认证（注册/登录/密码重置）
• 多端数据实时同步（Supabase Realtime）
• Excel/CSV 批量导入导出
• 成员搜索与快速筛选

快速部署指南

1. 克隆项目

   git clone https://github.com/yunfengsa/pure-genealogy.git
   cd pure-genealogy
   

2. 安装依赖

   npm install
   

3. 配置 Supabase
   • 创建 .env.local，填入：

     NEXT_PUBLIC_SUPABASE_URL=你的_Supabase_URL
     NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=你的_Anon_Key
     

4. 初始化数据库
   在 Supabase SQL Editor 中执行建表脚本（含 family_members 表及索引）
5. 启动开发服务器

   npm run dev
   

   访问 http://localhost:3000 即可开始使用。

项目采用 MIT 开源许可证，可自由用于个人、家族或非商业用途。