中国家庭族谱可视化工具

一个专为中国家庭设计的数字化族谱管理和可视化系统，支持传统文化元素和现代交互体验。

🌟 主要特性

📊 族谱可视化

• 树状图展示：使用D3.js实现的交互式族谱树
• 多种布局：支持树形、列表、时间线等多种查看模式
• 缩放交互：支持放大缩小、平移等操作
• 节点详情：点击节点查看成员详细信息

👥 成员管理

• 完整信息：姓名、性别、生卒年月、职业、成就等
• 照片支持：支持头像上传和显示
• 关系维护：父母、配偶、子女关系管理
• 批量操作：支持批量导入和导出

🏮 中国传统特性

• 辈分系统：传统辈分排列和字辈管理
• 堂号郡望：支持家族堂号和祖籍信息
• 称谓计算：自动计算家族成员间的传统称谓
• 农历支持：支持农历生日和传统节日

🎨 现代化界面

• 响应式设计：适配桌面端、平板和移动端
• 中国风UI：采用中国红主题和传统元素
• Ant Design：基于成熟的UI组件库
• TypeScript：完整的类型支持和开发体验

🚀 技术栈

• 前端框架：React 18 + TypeScript
• 状态管理：Zustand
• UI组件：Ant Design
• 可视化：D3.js
• 样式：Tailwind CSS
• 构建工具：Vite
• 路由：React Router v6

📦 快速开始

环境要求

• Node.js >= 16
• npm >= 8

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000 开始使用

构建生产版本

npm run build

代码检查

npm run lint

🎯 使用指南

1. 登录系统

• 点击"使用演示账号登录"体验完整功能
• 或使用任意用户名和密码（6位以上）注册登录

2. 查看族谱

• 进入"族谱视图"查看可视化族谱树
• 支持缩放、平移操作
• 点击节点查看成员详情

3. 管理成员

• 在"成员管理"页面添加、编辑、删除成员
• 支持搜索和筛选功能
• 完善成员的详细信息

4. 编辑族谱

• 使用"族谱编辑器"建立成员间的关系
• 拖拽操作调整族谱结构

📁 项目结构

src/
├── components/          # React组件
│   ├── family-tree/     # 族谱视图组件
│   ├── member-management/ # 成员管理组件
│   ├── tree-editor/     # 族谱编辑器
│   └── layout/          # 布局组件
├── pages/               # 页面组件
├── store/               # Zustand状态管理
├── types/               # TypeScript类型定义
├── utils/               # 工具函数
├── assets/              # 静态资源
└── api/                 # API接口

🎨 设计理念

本项目专注于传承中华家族文化，将传统族谱的文化内涵与现代技术相结合：

• 文化传承：保持传统族谱的核心要素
• 现代体验：提供直观易用的交互界面
• 数据安全：本地化存储，保护隐私
• 易于使用：降低数字化门槛

🔮 未来计划

• 后端API接口开发
• 数据云端同步
• 移动端App
• 打印功能优化
• 更多可视化样式
• 家族事件时间线
• 多语言支持

🤝 贡献指南

欢迎提交Issue和Pull Request！

📄 开源协议

MIT License

---

传承家族文化，记录时代变迁 🏮