# 家庭打卡

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

## 架构

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

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

## 首次部署

### 1. 创建数据表

1. 创建一个 Supabase 项目。
2. 进入项目的 **SQL Editor**。
3. 复制并运行 [`supabase-schema.sql`](supabase-schema.sql) 的全部内容。

脚本会创建并初始化：

- `users`：家庭成员
- `checkin_types`：打卡类型
- `checkins`：打卡记录
- 三张表的 RLS 规则和 Realtime 配置

### 2. 填写前端配置

在 Supabase 的 **Project Settings → API** 中找到 Project URL 和 Publishable key（旧项目可能显示为 `anon` key），填入 [`config.js`](config.js)：

```js
window.APP_CONFIG = {
  supabaseUrl: 'https://你的项目.supabase.co',
  supabaseKey: '你的 publishable 或 anon key'
};
```

Publishable/anon key 是设计为可放在浏览器中的公开项目标识，不要把 `service_role` secret key 放进前端。

### 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 访问。客户端需要能够访问 `cdn.jsdelivr.net` 和你的 `*.supabase.co` 项目域名。

## 本地预览

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

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

然后访问：

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

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

## 权限边界

当前版本延续原型的“家庭内部可信使用”定位：知道站点地址并拿到公开项目配置的人，可以选择任意家庭成员打卡；管理页也没有管理员登录。RLS 已开启，但策略允许匿名客户端读写三张业务表。

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

## 数据迁移说明

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