# checkin-workbench

**Repository Path**: li-luoqiang/checkin-workbench

## Basic Information

- **Project Name**: checkin-workbench
- **Description**: 汪汪签到局 · Paw Check-in Bureau
一个单文件、零依赖、开箱即用的个人每日打卡工作台。打开 index.html 即用，数据仅存在本机浏览器（localStorage），无需后端、无需账号、无需联网。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-09-07
- **Last Updated**: 2026-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 汪汪签到局 · Paw Check-in Bureau

一个单文件、零依赖、开箱即用的个人每日打卡工作台。打开 `index.html` 即用，数据仅存在本机浏览器（localStorage），无需后端、无需账号、无需联网。

## 功能概览

- **首页**：每日一句、今日打卡概览环形图、置顶任务、快速记录、本周趋势曲线

- **多模块打卡**：每日习惯 / TRAE 签到 / 健康打卡 / 学习打卡 / 奖励记录 / 打卡日记

- **洞察页**：各模块完成度柱状图、支出构成环形图

- **打卡日历**：习惯打卡模块提供月历视图，可补打卡 / 撤销

- **置顶任务**：跨模块收藏重要任务，首页就地打卡或调进度

- **自定义模块**：在 `index.html` 的 `CONFIG` 区一处配置即可增改模块

- **头像上传**：点击抽屉左上角头像可更换

- **数据导入 / 导出**：把全部数据导出为 JSON 文件，或在换机 / 备份后一键导入恢复

## 快速开始

1. 下载本项目目录（包含 `index.html` 和 `workbench-assets/`）
2. 双击打开 `index.html`（推荐用 Chrome / Edge 等现代浏览器）
3. 即可开始打卡记录，数据自动保存在本机

> 也可托管到任意静态服务器（GitHub Pages、Vercel、Netlify、Nginx 等），把整个目录上传即可。

## 数据存储

- 数据保存在浏览器的 `localStorage`，键名由 `CONFIG.storageKey` 决定（默认 `checkin-workbench-v1`）

- 清除浏览器缓存 / 隐私模式关闭后，数据会丢失，请定期用「导出」备份

- 换浏览器、换电脑：先在旧环境「导出」得到 JSON，再在新环境「导入」即可

## 导入 / 导出

在抽屉（左上角菜单按钮）底部「数据管理」区域：

- **导出**：一键下载 `checkin-workbench-YYYY-MM-DD.json`，包含全部模块数据、打卡记录、置顶状态和头像

- **导入**：选择此前导出的 JSON 文件，确认后覆盖当前数据。导入前会显示各模块条数对比，避免误操作

导入文件兼容两种结构：

1. 本项目导出的完整 payload（含 `app`、`version`、`data` 字段）
2. 纯 data 对象（直接是各模块的键值对）

## 项目结构

```
checkin-workbench/
├── index.html              # 全部代码（HTML + CSS + JS），单文件
└── workbench-assets/
    └── greet-banner.jpg    # 首页 hero 背景图
```

## 自定义配置

打开 `index.html`，找到 `<script>` 顶部的 `CONFIG` 对象，可改：

- `storageKey`：换 key 可强制重置数据

- `owner` / `slogan` / `brand`：抽屉顶部品牌信息

- `quotes`：每日一句（按周一→周日轮换）

- `overview`：首页四个环形概览的取数逻辑

- `trend`：本周趋势曲线的数据来源

- `quickAdd`：首页快速记录按钮

- `modules`：模块定义。每个模块通过 `type` 决定展示样式，支持 `todo` / `checkin` / `progress` / `finance` / `note` 五种类型

### 模块 type 说明

| type       | 适用场景      | 关键字段                                              |
| ---------- | --------- | ------------------------------------------------- |
| `todo`     | 今日计划 / 待办 | `done`、`priority`、`note`                          |
| `checkin`  | 习惯打卡      | `log`（按日期 `{}` 记录），自动统计连续天数                       |
| `progress` | 长期计划      | `current`、`target`、`unit`，进度条                     |
| `finance`  | 记账        | `type`(income/expense)、`amount`、`category`、`date` |
| `note`     | 日记 / 内容记录 | `title`、`content`、`mood`、`date`                   |

每个模块还可通过 `fields` 数组追加自定义字段（支持 `text` / `number` / `select` / `textarea`），以及 `seed` 数组定义初始示例数据。

## 主题换肤

`index.html` 顶部 `:root` 集中定义了全部 CSS 变量（页面底色、模块色、圆角、阴影等），改一处即可整站换肤。

## 浏览器兼容

- 推荐现代浏览器（Chrome / Edge / Safari / Firefox 最新版）

- 使用了 `localStorage`、`FileReader`、`URL.createObjectURL`、`structuredClone`、`color-mix` 等 API，老旧浏览器可能不兼容

- 移动端友好，最大宽度 480px，支持安全区域 `env(safe-area-inset-bottom)`

## 隐私说明

- 全部数据只存在你自己的浏览器里，不上传任何服务器

- 导出的 JSON 文件请自行妥善保管，里面包含你的全部打卡内容