为什么你的预算应用会失败:计划 vs 现实追踪(DonFlow)
Source: Dev.to
请提供您希望翻译的完整文本内容,我将为您翻译成简体中文并保留原有的格式、Markdown 语法以及技术术语。谢谢!
I Had a Perfect Budget. It Lasted Three Days.
去年一月,我坐下来用电子表格规划了每一美元的月度预算。
食品杂货:$400。外出就餐:$150。订阅服务:$50。交通:$120。感觉很好。井井有条。成年人的感觉。
到 1 月 4 日,我已经因为忘记的朋友生日晚宴而超出了外出就餐的预算。到 1 月 15 日,我已经不知道自己的情况如何。电子表格被抛弃了。听起来熟悉吗?
现有预算应用的问题
我尝试了市面上所有的预算应用——Mint、YNAB、Toshl,等等。它们都只擅长一件事:记录已经发生的事情。它们是数字收据。但没有一个能回答真正重要的问题:
“我现在离我的计划还有多远?”
大多数应用把你的财务当作后视镜。你对交易进行分类,看到饼图,或许会收到超支的通知。到那时,钱已经花掉了。
介绍 DonFlow
DonFlow 是一款前瞻性的工具,能够帮助你:
- 设定预算计划 – 定义每个类别的预期支出金额。
- 导入实际支出 – 来自银行导出或手动录入。
- 查看偏差 – 计划与实际的对比,实时更新。
- 提前预警 – 在超出某个类别之前提醒,而不是事后。
它完全在浏览器中运行——无需服务器、无需注册,数据也不会离开你的机器。所有信息都存储在 IndexedDB 中,确保你的财务数据始终保存在本地设备上。
工作原理
- 创建预算计划 – 添加类别并设定每月金额。
- 导入交易记录 – 粘贴、上传 CSV/Excel 文件,或手动输入。
- 可视化反馈 – DonFlow 会叠加数据并显示:
- 🟢 按计划进行 – 支出在预算范围内
- 🟡 偏离中 – 接近上限
- 🔴 超出预算 – 已经超过计划
无需等到月末报告。
处理银行导出
银行的导出格式千差万别——CSV、XLSX、OFX,随你喜欢。DonFlow 使用 SheetJS 来解析电子表格:
import * as XLSX from 'xlsx';
async function parseTransactionFile(file) {
const buffer = await file.arrayBuffer();
const workbook = XLSX.read(buffer, { type: 'array' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
// Auto-detect columns: date, description, amount
const headers = rows[0].map(h => String(h).toLowerCase());
const dateCol = headers.findIndex(h =>
h.includes('date') || h.includes('날짜'));
const amountCol = headers.findIndex(h =>
h.includes('amount') || h.includes('금액'));
return rows.slice(1).map(row => ({
date: row[dateCol],
amount: parseFloat(row[amountCol]),
description: row[headers.findIndex(h =>
h.includes('desc') || h.includes('memo') || h.includes('적요'))]
}));
}
解析器自动检测英文和韩文的常见标题模式,消除了手动列映射。
使用 IndexedDB 本地存储数据
所有计划和交易都存储在 IndexedDB 中——没有 cookie、没有 localStorage 限制、也不依赖云端:
const DB_NAME = 'donflow';
const DB_VERSION = 1;
function openDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('transactions')) {
db.createObjectStore('transactions', {
keyPath: 'id', autoIncrement: true
});
}
if (!db.objectStoreNames.contains('budgetPlans')) {
db.createObjectStore('budgetPlans', {
keyPath: 'id', autoIncrement: true
});
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
您的数据可以在浏览器刷新后仍然保留,并且可以离线使用。关闭标签页,下周再打开——一切仍然在。
为什么没有服务器?
- Privacy by architecture – 您的金融数据永不触及我控制的服务器。没有数据库泄露风险。
- Zero friction – 无需注册表单,您可以在字面上5秒内开始使用。
- No recurring costs – 我不需要收取订阅费来支付服务器费用。它永久免费。
- Works anywhere – 在公司防火墙后?在飞机上?都没关系。它只是 HTML、CSS 和 JavaScript。
试用演示
查看 DonFlow 实际效果的最快方式是点击 “尝试演示数据” 按钮。它会加载一个示例预算计划以及三个月的交易记录,让您立刻看到:
- 计划与实际的对比是如何工作的
- 漂移警告的显示效果
- 分类随时间的细分情况
无需使用假邮箱或信用卡——只需点击即可探索。
👉 试用 DonFlow (replace with actual demo URL)
路线图 & 开源
DonFlow 是开源且持续开发的项目。即将推出的功能包括:
- OFX/QFX 导入 — 直接支持银行对账单
- 多币种 — 适用于收入一种货币、支出另一种货币的情况
- 预算模板 — 为常见场景(学生、自由职业者、家庭)预设的计划
- 导出为 PDF — 可分享的月度报告
代码托管在 GitHub:
🔗
欢迎贡献代码、提交问题,或仅仅是看看内部实现。
Call to Action
我创建 DonFlow 是为了解决我对只能回顾过去的预算应用的沮丧。如果你也有同样的感受,试试看吧。
您希望支持哪种金融数据格式? OFX?QIF?直接 API 连接到特定银行?留下评论——你的答案可能会影响下一个版本。
DonFlow 免费、开源,完全在你的浏览器中运行。你的钱、你的数据、你的设备。