# 唐家族谱网站

基于 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. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

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

## 初始化数据

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

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

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

### 方式二：查看初始化数据

运行以下命令查看初始化数据：
```bash
node src/init-data.js
```

## 访问说明

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

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

## 部署到 Cloudflare

1. 登录 Cloudflare 账户：
```bash
npx wrangler login
```

2. 创建 KV 命名空间：
```bash
npx wrangler kv:namespace create "FAMILY_DATA"
```

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

4. 部署 Worker：
```bash
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` 中的常量：
```typescript
const VISITOR_PASSWORD = 'tangfamily';
const ADMIN_PASSWORD = 'shumengya5201314';
```

### 修改样式

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

## License

MIT