我用AI做了个《日历记账系统》📅💰#

初版效果 👀#

整体效果还是不错的👍，主要使用方式也就是通过选择日期，然后添加消费记录。

初版的系统只支持记账、查询和统计功能，功能较少，而且样式不够美观。接下来我也是继续让Deepseek优化和添加功能🛠️

初版优化 ✨#

现在添加一个消费记录导入和导出的功能

其他功能不变的情况下，能否增加一个按时间汇总得到这段时间内所有消费汇总后的金额的功能呢。

可以看到现在功能已经比较完全了✅，可以选择时间段进行汇总计算，并且支持导入、导出记录，样式上也进行了优化。

搭配Cursor优化 🔧#

在使用Deepseek进行一系列优化后，感觉到达了拼接，后面我有使用了Cursor进行优化。

部分对话截图：

目前最终版本 🎯#

我个人比较喜欢的功能就是这个时间汇总功能⏰，可以根据支出、收入计算平均每日消费和剩余可用天数。

最终版本也是采用了毛玻璃+透明背景的效果🎨，目前还没有适配手机端显示，后续会继续进行优化。

功能特性 🌟#

• 📅 日历视图：按月展示每日收支概览，带当日总支出提示点与金额汇总
• ➕ 一键添加记录：日期、金额、类型、收/支、描述
• 🔍 右侧筛选：按日期与类型快速筛选记录（与日历点击联动）
• 📊 数据统计：支持柱状图、折线图、饼图（使用 Chart.js）
• ⏱️ 时间汇总：任意日期范围的收入/支出/净收入、平均每日消费与“剩余可用天数”估算
• 💾 数据持久化：IndexedDB 本地存储；兼容历史 localStorage 数据并提供迁移进度反馈
• 📥📤 导入/导出：支持 JSON 文件导入与一键导出
• 🖥️ 纯前端：单个 HTML 文件即可离线使用

在线预览与使用 🚀#

直接用浏览器打开 bookkeeping.html 即可使用（推荐 Chrome/Edge）🌐。

1. 点击日历的某一天，会自动：
   • 🎯 高亮所选日期
   • 🔄 同步右侧“按日期筛选”输入框
   • 📋 列表即时筛选为该日期
2. 填写“添加消费记录”区域并点击“添加记录”
3. 在“消费记录”页签中，可按日期和类型进行筛选；“清除筛选”恢复全部
4. 在“统计图表”页签中选择图表类型和统计周期，点击“生成图表”
5. 在“时间汇总”区域选择开始/结束日期并“生成汇总”

技术栈 ⚙️#

• 🏗️ 原生 HTML/CSS/JavaScript（无构建依赖）
• 🗄️ IndexedDB（数据持久化）
• 📈 Chart.js（统计图表）
• 🎨 Font Awesome（图标）

项目结构 📁#

1
Desktop/
2
├─ bookkeeping.html   # 应用主文件（包含样式与脚本）
3
└─ README.md          # 本说明文件

数据导入与导出 💾#

• 📤 导出：点击“导出数据”生成包含全部记录的 JSON 文件
• 📥 导入：点击“导入数据”选择符合字段的 JSON，系统会校验并追加至现有数据
• 🔄 首次使用含有历史 localStorage 的旧版本数据时，会自动迁移至 IndexedDB，并显示迁移进度

数据记录的基本字段：

1
{
2
  "id": "时间戳字符串",
3
  "date": "YYYY-MM-DD",
4
  "amount": "字符串化的小数，保留两位",
5
  "type": "food|shopping|transport|entertainment|utilities|other",
6
  "category": "expense|income",
7
  "description": "可选描述"
8
}

开发与自定义 🛠️#

• 💻 所有代码在 bookkeeping.html 中，便于复制与二次开发
• 🎨 UI 主题色在 :root CSS 变量中统一管理，可按需调整
• ➕ 如需扩展消费类型或字段，可在“添加记录”选择与渲染逻辑中同步调整

隐私与数据 🔒#

• 🛡️ 所有数据均保存在本地浏览器 IndexedDB 中，不会上传到服务器
• ⚠️ 更换浏览器/设备或清理站点数据会导致本地数据不可用，请定期导出备份

兼容性 💻#

• 🌐 现代浏览器（Chrome、Edge、Firefox 最新版）。旧版浏览器可能缺少 IndexedDB 或部分特性