记账本：从 0 到 1 的 React PWA 记账应用

记账本（AccountBook）是我最近完成的一个个人全栈项目，从需求到上线 Android APK 全程一个人。这篇文章复盘它的关键决策和踩过的坑。

需求定位：一个「认真」的个人记账工具

市面上的记账 App 很多，但要么广告多，要么数据在别人手里。我想要的是：

• 多账户：微信、支付宝、银行卡、现金分开记；
• 预算：总预算 + 分类预算，超支有提醒；
• 资产视角：账户快照 + 资产趋势，知道钱在哪、涨没涨；
• 年度报告：热力图、品牌统计、环比同比，让数据说话；
• 数据自主：云端同步，但数据是我的，可以完整导出备份。

功能清单最终沉淀为：搜索筛选、记账模板、分类预算、年度报告、品牌统计、日历热力图、资产增强、周期账单、左滑删除、双栏布局、深色模式、完整备份。

技术选型

前端是熟悉的组合：React 18 + Vite 5 + TypeScript + Tailwind CSS 4，图表用 Recharts，Excel 导入导出用 xlsx。

数据层选 Supabase：

• PostgREST 直接映射为类型安全的查询，不用写后端；
• Realtime 订阅表变更，任何一端记一笔，所有端秒级刷新——Web 和手机同时开着的体验非常好；
• 行级安全 + 匿名凭证，个人项目够用且免费额度充足。

数据库 6 张表：categories（分类）、accounts（账户）、transactions（流水）、account_snapshots（账户快照）、budgets（预算）、wishlist（愿望单）。

Capacitor 打包 Android 的坑

把 PWA 变成 APK 用的是 Capacitor。几个值得记下的点：

• 构建环境：本地 Gradle 构建 + 签名配置（keystore.properties 分离密钥，密钥文件永不入库）；
• 本地资源模式：使用 Capacitor 的本地资源加载，APK 完全离线可用；
• 图标资源：需要一套完整的 mipmap 分辨率，写了个脚本从一张源图自动生成全尺寸。

APK 只有 3.5MB，下载安装即用。你可以在项目页下载 v1.1 试玩。

PWA 与部署

PWA 离线缓存让 Web 版在手机浏览器里接近原生体验；部署在 Cloudflare Pages，wrangler pages deploy 一条命令发布，国内 CDN 回源速度也不错。

复盘

最大的收获不是功能本身，而是完整走了一遍「个人产品的生命周期」：需求 → 数据建模 → 全栈开发 → 移动端打包 → 云端发布。这套流程和我在企业项目里的方法论是同一套，只是规模不同。

下一步计划：报表导出增强、多币种、以及把年度报告做得更「年度」。

记账本在线体验：https://accountbook.pages.dev · APK 下载：项目页