设计初衷是提供一个简洁、高效、且具备良好移动体验的个人财务管理工具,帮助用户轻松记录每一笔收支。在技术选型上,采用了轻量级的Web架构,后端基于PHP语言和PDO进行数据库操作。前端充分利用Bootstrap 5和HTML5/CSS3实现了响应式和美观的界面设计,并通过manifest.json 配置使其具备PWA的特性。
软件的核心操作围绕快速记账和实时资产查看展开。用户通过login页面登录后进入系统首页。在系统首页的顶部日期栏,通过左右箭头切换月份或年份,点击日期文本则可在“月份视图”和“年份视图”间切换,从而灵活调整统计范围。
首页通过数字滚动效果展示的净资产总额,下方横向滚动条则细致罗列了各个资金账户的名称与当前余额。
月份视图会显示本月预算的使用进度条,当支出超出预算时,进度条会以红色警示。记账环节设计了计算器式输入流程,可以直接在输入框内使用内置的计算器进行四则运算,最终计算结果将作为交易金额被提交保存。
报表页提供了数据分析。页面顶部首展示了当前日期范围内的总支出和总收入统计。用户可以点击任一分类排行项,触发数据穿透功能。弹出详情模态框,查询并显示该分类在当前时间范围内的所有交易明细列表。
管理页是进行系统配置和基础数据维护的中心。用户可以在此页面完成三个主要任务:预算设置、资金账户管理和收支分类管理。预算设置允许用户为当前的月份设定一个支出上限。
在资金账户管理区域,用户可以随时添加新的账户、编辑现有账户的名称和余额,或者删除不再使用的账户。
收支分类管理以网格形式展示了所有已创建的分类,并支持用户新建分类,新建时可以自定义分类的名称、类型(收入或支出)以及一个代表性的Font Awesome图标。











