pure-genealogy

1周前发布 12 00

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

所在地:
中国
收录时间:
2026-01-22
其他站点:
pure-genealogypure-genealogy

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

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 开源许可证,可自由用于个人、家族或非商业用途。

数据统计

相关导航

暂无评论

none
暂无评论...