拥抱私有化| Lumi 流光记账 - Y.H.2HANG ' Blog - 道阻且长,行则将至-小张的学习笔记

拥抱私有化| Lumi 流光记账

设计初衷是提供一个简洁、高效、且具备良好移动体验的个人财务管理工具,帮助用户轻松记录每一笔收支。在技术选型上,采用了轻量级的Web架构,后端基于PHP语言和PDO进行数据库操作。前端充分利用Bootstrap 5和HTML5/CSS3实现了响应式和美观的界面设计,并通过manifest.json 配置使其具备PWA的特性。

软件的核心操作围绕快速记账和实时资产查看展开。用户通过login页面登录后进入系统首页。在系统首页的顶部日期栏,通过左右箭头切换月份或年份,点击日期文本则可在“月份视图”和“年份视图”间切换,从而灵活调整统计范围。


moqv66ww.png
moqv6ftj.png

首页通过数字滚动效果展示的净资产总额,下方横向滚动条则细致罗列了各个资金账户的名称与当前余额。

月份视图会显示本月预算的使用进度条,当支出超出预算时,进度条会以红色警示。记账环节设计了计算器式输入流程,可以直接在输入框内使用内置的计算器进行四则运算,最终计算结果将作为交易金额被提交保存。


moqv7mpw.png
moqv7zb7.png

报表页提供了数据分析。页面顶部首展示了当前日期范围内的总支出和总收入统计。用户可以点击任一分类排行项,触发数据穿透功能。弹出详情模态框,查询并显示该分类在当前时间范围内的所有交易明细列表。


moqva9rz.png
moqvaj48.png

管理页是进行系统配置和基础数据维护的中心。用户可以在此页面完成三个主要任务:预算设置、资金账户管理和收支分类管理。预算设置允许用户为当前的月份设定一个支出上限。

在资金账户管理区域,用户可以随时添加新的账户、编辑现有账户的名称和余额,或者删除不再使用的账户。


moqvb5xh.png
moqvbfb7.png

收支分类管理以网格形式展示了所有已创建的分类,并支持用户新建分类,新建时可以自定义分类的名称、类型(收入或支出)以及一个代表性的Font Awesome图标。


moqvbqu8.png

打赏