viber coding一个适合大学生记账的APP

起因

我准备上大学，想要在手机安装一个记账软件

网上有很多开源的，但感觉手搓一个更能适配自己

然后就直接viber Coding了一个

技术栈

• PWA：那样子在手机上安装最方便
• IndexedDB：本地数据库，让我所有数据保存在本地（其实如果要连网反而更麻烦）
• Canvas API：用于统计界面画图
• JavaScript

我给AI提的要求

1. 在我vivo手机安卓系统上运行的记账软件
2. 我手动输入即可
3. 支持一键导出，方便我日后拿回电脑整理
4. 首页打开直接记账
5. 可以有收入记账，但默认支出记账
6. 大量数据统计功能
7. 备注功能
8. 统计页要必须能看到每一笔详细记账
9. 记账支持修改
10. 记账时可以选择日期（默认今天）
11. 支持自定义分类
12. 日历视图
13. 有报销功能
14. 报销功能可以上传图片

AI Run ！

先 \plan ，然后过了一轮就搞定了。

过程中还遇到一些问题：

1. manifest图表必须是png或svg，jpg是不合格的
2. 要让ai自己检查有没有内存泄露风险
3. 让ai自己检查bug，然后自己去修理（这个过程多重复几遍，同时开几个对话，不要在同一个ai里面自查）

部署到手机上

这方面没有经验，折腾了一段时间，不过最后顺利搞定了。

首先，虽然本地局域网用http也能访问，但是下载不方便。

因此采用的办法是部署到GitHub Page上，然后手机用https访问，之后下载

但是下载的话，我用vivo默认浏览器和edge都下载不了。但是可以直接手机安装一个Chrome，就可以安装应用了

done

效果演示

https://zhangxixi.top/money-record

项目地址

已经在GitHub上开源了：

zhangxixi2008/money-record: A money-record application for PWA on my android phone

欢迎随便魔改

README

💰 Money Record 记账

一款纯本地的 PWA 记账应用，无需服务器、无需登录，数据完全存储在你的设备上。支持支出/收入记账、报销专区、多维度统计、图片附件、数据备份，可安装到手机主屏幕像原生 App 一样离线使用。

✨ 核心特性

• 📱 PWA 离线应用 — 安装到手机主屏幕，断网也能用
• 🔒 纯本地存储 — 数据存于 IndexedDB，不上云、不联网、不泄露隐私
• 🏠 首页快捷记账 — 大数字键盘 + 分类网格，3 秒完成一笔
• 💼 报销专区 — 独立追踪报销流程，支持上传发票/收据图片
• 📊 多维度统计 — 饼图 / 折线图 / 柱状图 / 日历视图 / 明细列表
• 📤 一键导出导入 — JSON 备份，方便迁移到电脑整理
• 🌙 深色模式 — 跟随系统或手动切换
• 🎨 自定义分类 — 默认 8 项支出 + 4 项收入，支持增删改排序

📱 安装到手机（PWA）

通过 GitHub Pages（推荐）

1. 将本仓库 Fork 或推送到你自己的 GitHub 仓库
2. 进入仓库 Settings → Pages
3. Source 选择 Deploy from a branch，分支选 main，目录选 / (root)
4. 保存后等待 1~2 分钟，GitHub 会给你一个形如 https://你的用户名.github.io/仓库名/ 的网址
5. 在手机上用 Chrome 浏览器 打开该网址
6. 点右上角 ⋮ 菜单 → 安装应用（或"添加到主屏幕"）
7. 桌面出现「记账」图标，点开即为全屏独立应用

⚠️ vivo 自带浏览器不支持 PWA 安装横幅，请使用 Chrome 或 Edge。

离线使用说明

首次访问会自动注册 Service Worker 并缓存全部资源，之后即使断网也能正常记账。所有数据存储在本地 IndexedDB 中。

📖 功能说明

1. 记账（首页）

• 大数字键盘输入金额，方便单手操作
• 分类网格点选，4 列展示，长按可快速选最近用过的分类
• 高级选项（可折叠）：
  • 备注（如"和同学聚餐"）
  • 日期选择（可记昨天/前天的账）
• 收入切换：右下角浮动按钮一键切换到收入记账
• 今日记录：首页底部显示当日所有账目

2. 统计

四个视图自由切换：

3. 报销专区

独立于支出统计，专门追踪可报销费用（学校/单位出差、采购等）。

• 三状态流转：待报销 → 已提交 → 已到账
• 顶部汇总卡片：三类金额一目了然，点击可筛选
• 图片附件：
  • 支持上传多张发票/收据照片
  • 自动压缩（最大宽度 1280，JPEG 质量 0.8）减少存储占用
  • 全屏查看器支持左右滑动切换
  • 完全本地存储，不上传任何服务器
• 快速类别：交通费 / 住宿费 / 餐饮费 / 办公用品 / 会议费 / 材料费 / 打印费 / 快递费 / 其他

4. 设置

四个标签页：

• 分类：管理支出/收入分类（新增、编辑、停用、排序、自定义图标和颜色）
• 预算：按月设置支出预算，首页实时显示预算进度条
• 数据：
  • 导出 JSON 备份（包含图片附件，Base64 编码）
  • 导入 JSON 恢复
  • 查看数据统计（账目数、报销数、附件数）
  • 一键清空所有数据
• 外观：浅色 / 深色 / 跟随系统

🗂️ 项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Money Record/
├── index.html              # 应用入口
├── manifest.json           # PWA 配置
├── service-worker.js       # Service Worker（离线缓存）
├── assets/
│   └── icons/
│       ├── icon.svg        # 矢量图标（Chrome/Edge）
│       └── icon-512.jpg    # 位图图标（iOS apple-touch-icon）
├── css/
│   └── style.css           # 全部样式
└── js/
    ├── app.js              # 主应用（路由、初始化、SW 注册）
    ├── db.js               # IndexedDB 封装
    ├── home.js             # 首页记账
    ├── stats.js            # 统计页路由
    ├── stats-charts.js     # 图表视图
    ├── stats-calendar.js   # 日历视图
    ├── stats-list.js       # 明细列表
    ├── reimbursement.js    # 报销专区
    ├── settings.js         # 设置页
    └── charts.js           # Canvas 图表绘制工具

🛠️ 技术栈

• PWA — Service Worker + Web App Manifest，实现可安装、可离线
• IndexedDB — 本地数据库，存储支出/收入/报销/预算/分类/图片附件
• Canvas API — 纯手绘饼图、折线图、柱状图，无任何图表库依赖
• 原生 JavaScript — 零框架、零构建工具，打开即用
• CSS 变量 — 主题切换（浅色/深色）
• 响应式设计 — 移动端优先，适配各种手机屏幕

📦 数据存储说明

数据表结构（IndexedDB: money-record）

备份格式

导出的 JSON 文件结构：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "exportedAt": "2026-08-05T12:00:00.000Z",
  "version": 2,
  "expenses": [...],
  "incomes": [...],
  "reimbursements": [...],
  "budgets": [...],
  "categories": [...],
  "reim_attachments": [
    { "id": 1, "mimeType": "image/jpeg", "size": 102400, "dataURL": "data:image/jpeg;base64,..." }
  ]
}

🚀 本地开发

无需任何构建步骤，直接用静态服务器打开即可：

1
2
3
4

# 任选一种静态服务器
npx http-server . -p 8080
# 或
python -m http.server 8080

浏览器访问 http://localhost:8080。

注意：Service Worker 仅在 HTTPS 或 localhost 下才会注册。本地开发用 localhost 即可；部署到手机必须走 HTTPS（如 GitHub Pages）。

📋 兼容性

• ✅ Android Chrome / Edge — 完整支持，可安装 PWA
• ✅ iOS Safari 16.4+ — 支持 PWA 安装（需手动"添加到主屏幕"）
• ⚠️ vivo / OPPO 自带浏览器 — 不支持 PWA 安装横幅，请用 Chrome
• ✅ 桌面 Chrome / Edge — 可安装为桌面应用

📝 默认分类

支出（8 项）

收入（4 项）

📄 License

MIT