唐家族谱网站

基于 Cloudflare Workers 的全栈家族族谱网站，使用树状图展示家族成员关系。

功能特性

• 密码保护访问（访问密码：tangfamily）
• 响应式设计，支持电脑端和手机端
• 树状图展示家族成员信息
• 管理后台用于添加、编辑、删除成员（管理密码：shumengya5201314）
• 数据存储在 Cloudflare KV

项目结构

tangfamily/
├── src/
│   ├── index.ts           # Worker 主文件，包含 API 路由
│   └── init-data.js       # 初始化数据脚本
├── public/
│   ├── index.html         # 访客登录页面
│   ├── tree.html          # 族谱树展示页面
│   ├── admin-login.html   # 管理员登录页面
│   └── admin.html         # 管理后台页面
├── wrangler.jsonc         # Cloudflare Workers 配置
└── package.json

本地开发

1. 安装依赖：

npm install

2. 启动开发服务器：

npm run dev

3. 访问 http://localhost:8787/

初始化数据

项目已包含初始家族成员数据（唐治明、舒邦莲、唐永洪、唐伟）。

方式一：通过管理后台添加

1. 访问 http://localhost:8787/admin-login.html
2. 输入管理员密码：shumengya5201314
3. 在管理后台逐个添加成员

方式二：查看初始化数据

运行以下命令查看初始化数据：

node src/init-data.js

访问说明

访客访问

1. 访问首页
2. 输入密码：tangfamily
3. 查看族谱树

管理员访问

1. 访问 /admin-login.html
2. 输入管理员密码：shumengya5201314
3. 在管理后台进行成员管理

部署到 Cloudflare

1. 登录 Cloudflare 账户：

npx wrangler login

2. 创建 KV 命名空间：

npx wrangler kv:namespace create "FAMILY_DATA"

3. 将输出的 ID 更新到 wrangler.jsonc 中的 kv_namespaces.id 字段

4. 部署 Worker：

npm run deploy

5. 访问你的 Workers 域名即可使用

数据结构

每个家族成员包含以下信息：

• id: 唯一标识符
• name: 姓名
• birthYear: 出生年份
• gender: 性别（男/女）
• fatherId: 父亲 ID（可选）
• motherId: 母亲 ID（可选）

API 接口

• POST /api/login - 登录（访客或管理员）
• GET /api/members - 获取所有成员（需要认证）
• POST /api/members - 添加/更新成员（需要管理员权限）
• POST /api/members/delete - 删除成员（需要管理员权限）

技术栈

• Cloudflare Workers - 边缘计算平台
• Cloudflare KV - 键值存储
• TypeScript - 类型安全
• 原生 HTML/CSS/JavaScript - 前端页面

安全说明

• 所有 API 接口都需要身份验证
• Session Token 存储在 KV 中，有效期 24 小时
• 管理操作需要管理员权限验证
• 建议在生产环境中修改默认密码

自定义

修改密码

编辑 src/index.ts 中的常量：

const VISITOR_PASSWORD = 'tangfamily';
const ADMIN_PASSWORD = 'shumengya5201314';

修改样式

所有样式都内联在 HTML 文件中，可直接修改 public/*.html 文件中的 <style> 标签。

License

MIT