# 家庭打卡

一个不需要构建工具的轻量家庭打卡 Web App。页面仍然可以直接部署到 NAS 的静态网页服务器，用户、打卡类型和打卡记录保存在 PocketBase，并通过 Realtime 自动同步到所有在线客户端。

## 架构

```text
手机 / 电脑浏览器 ── HTTPS / SSE ── PocketBase
        │
        └── 从 NAS 静态服务器加载 HTML、CSS、JS
```

- NAS 不需要运行 Node、PHP 或数据库服务。
- 当前设备选择的用户保存在 30 天有效期的 Cookie 中，共享业务数据不再保存在浏览器本地。
- 前端没有打包步骤，直接调用 PocketBase REST 和 Realtime API，不依赖外部 SDK。
- 首页动态默认读取 15 条，点击“查看更多”后按每批 15 条继续读取，直到完整历史加载完毕。

## 首次部署

### 1. 创建 PocketBase 集合并迁移数据

使用 PocketBase superuser 在服务器上运行迁移脚本。脚本会创建以下集合，并把 Supabase 的数据导入其中：

- `baopingan_users`
- `baopingan_checkin_types`
- `baopingan_checkins`

```bash
SUPABASE_URL='https://你的项目.supabase.co' \
SUPABASE_KEY='你的 publishable 或 anon key' \
POCKETBASE_URL='https://你的-pocketbase-域名' \
PB_ADMIN_EMAIL='PocketBase superuser 邮箱' \
PB_ADMIN_PASSWORD='PocketBase superuser 密码' \
node pocketbase-migrate.mjs
```

迁移脚本可重复运行：已存在的集合会跳过，已有 record ID 会更新。脚本不会删除 PocketBase 中多出来的记录。Supabase 的 UUID 打卡 ID 会映射为 PocketBase 允许的 15 字符 ID。

### 2. 填写前端配置

迁移完成后，将 PocketBase 地址填入 [`config.js`](config.js)：

```js
window.APP_CONFIG = {
  pocketbaseUrl: 'https://你的-pocketbase-域名'
};
```

### 3. 上传到 NAS

将项目内以下文件原样上传到 NAS 的静态站点目录：

```text
index.html
admin.html
app.js
admin.js
data.js
config.js
styles.css
favicon.svg
apple-touch-icon.png
```

建议通过 HTTPS 访问。PocketBase 的三个集合需要允许匿名客户端读、写、改、删（当前应用仍是家庭内部可信使用模型）。

## 本地预览

不能直接双击 HTML 文件，请用任意静态服务器，例如：

```bash
python3 -m http.server 8000
```

然后访问：

- 用户端：<http://127.0.0.1:8000/>
- 管理端：<http://127.0.0.1:8000/admin.html>

打开两个不同浏览器窗口，即可验证实时同步。

## 权限边界

当前版本延续原型的“家庭内部可信使用”定位：知道站点地址的人可以选择任意家庭成员打卡；管理页也没有管理员登录。PocketBase 集合规则允许匿名客户端读写三张业务集合。

因此建议把站点放在 NAS 内网、VPN 或其他访问控制之后。若要公开到互联网，下一步应接入 PocketBase Auth，并把成员身份和管理员权限写入更严格的 API Rules，而不是在前端放一个管理员密码。

## 数据迁移说明

旧版本各浏览器里的 `localStorage` 数据不会自动上传，避免多台设备首次连接时产生重复或冲突数据。建表脚本会写入默认的三个用户和四种打卡类型；可在 `admin.html` 中继续调整。