存款记账本产品系统Vibe Coding

我要开发同款
星河2026年08月12日
26阅读

技术信息

语言技术
HTML5CSSJavaScriptVue
系统类型
Web
行业分类
项目任务

作品详情

行业场景

随着移动支付普及,年轻人收支记录分散在多个平台,很难看清自己真实的存钱进度和花钱去向。市面上的记账软件功能臃肿、数据存云端有隐私顾虑、部分功能还要付费。本项目旨在做
一个零门槛、数据完全本地、单文件免安装的个人记账与储蓄规划工具,尤其面向存款目标不明确、想养成记账习惯的普通用户,帮他们用一张表看清收入、支出、存款目标与未来规划。

功能介绍

项目包含五大功能模块:
1. 概览仪表盘:存款目标进度条、累计净额趋势、每月收支对比柱状图、支出分类占比饼图、基于历史数据的趋势预测。
2. 记账:收入/支出快速记录,支持分类、备注、按月筛选、关联存款目标,可编辑删除,所有数据实时保存。
3. 定期存款管理:新增定期存款,按约定利率自动计算到期本息,并显示到期倒计时提醒。
4.
储蓄计算器:正向测算(每月存多少、存多久,到期可得多少)、反向规划(目标金额自动算出每月需存多少),支持按月按年、复利、小数年限。
5. 设置与数据:目标管理、预算与利率默认值、自定义分类、明暗主题切换、数据一键导出/导入/重置。整个应用只依赖一个本地 HTML 文件,双击即可打开使用。

项目实现

个人独立完成全项目。负责产品设计、前端开发与测试。技术栈:原生 JavaScript(ES6)+ HTML5 + CSS3 变量实现明暗主题,图表用 Chart.js,数据存
localStorage。项目为单文件架构,无构建步骤、无后端,离线也能使用核心记账功能。
实现亮点:1)Chart.js 加载失败时图表模块自动降级,记账功能不受影响;2)定期存款利息按银行口径做月末日期钳制,避免跨月少算;3)反向规划支持小数年限,测算曲线与最终结
果完全一致;4)空数据、无目标等边界情况均有兜底处理,不崩溃。
难点:单文件内模块划分与代码组织,以及无测试框架下的纯手工功能验证。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论