本项目是一套从零搭建的全栈个人财务管理平台,目标是替代功能单一的记账工具,把日常记账、资金账户、借贷往来、预算控制、资产盘点收敛到一个数据自主的系统中。系统由 12 个业务模块、23 个控制器、170 个 REST 接口、36 张数据表构成:记账核心支持三级分类树、商家联想、多平台支付与 CSV 批量导入导出,每笔账单自动联动账户余额并留存流水日志;借贷模块实现未结清 / 已结清 / 已放弃三态模型,支持分期还款与坏账核销;预算模块提供月度 + 年度双层体系与阶梯式执行规则;资产模块通过快照与趋势图呈现净资产变化;报表模块支持从月度 / 年度报表下钻到分类明细。系统还包含完整 RBAC 权限体系、软删除回收站、8 套主题实时切换与中英双语国际化。核心业务流程为:记一笔 → 余额幂等联动 → 报表与预算同步更新;借据从创建、关联账单凭证、分期还款到三态判定的完整生命周期;以及登录后由后端菜单树动态生成侧边菜单、路由与区块双重门控的权限链路。
整体采用前后端分离 + 严格分层架构。前端为 Vue 3(Composition API + script setup)+ TypeScript + Vite + Tailwind CSS v4 + Pinia + Vue Router 5 + ECharts;后端为 NestJS 12,按 Controller(路由 + DTO 校验)→ Service(业务规则)→ Prisma ORM → MySQL 8 分层,对外暴露统一的 /api/v1 RESTful 接口与 JWT 登录态。关键设计决策有四:一是设计 token 驱动主题,所有颜色走 CSS 变量配合 color-mix 生成衍生色,使一套组件零分支适配 8 套主题;二是组件三层抽象收口,PageShell 覆盖 22 个页面、DrawerShell 覆盖 7 处抽屉、ModalShell 覆盖 15 处弹窗,且刻意区分「侧边伴随式用不透明渐变、居中阻断式用玻璃面」两种视觉语义;三是全表软删除配回收站三级操作;四是以权限码而非角色硬编码做门控,并区分查看控整页、编辑控可写块。我独立负责全栈开发,量化结果为 23 个控制器、170 个接口、36 张表、46 个路由页面、262 个 Vue 组件、105 次提交。我主导的浮层三件套重构合并了两个重复确认框、净减 179 行代码且调用方零改动;打通了长期假绿的类型检查闸门,一次修复 17 处真实类型错误。遇到的主要难点包括:solution 风格 tsconfig 导致 vue-tsc --noEmit 不检查任何文件,改用 vue-tsc --build 并挂入 pre-commit 才解决;CSS「一个轴 auto 时另一轴 visible 被计算成 auto」造成弹窗常驻双滚动条,通过重新划分「遮罩层滚、卡片不滚」的滚动责任修复;自动化重构脚本因 includes 守卫被模板中已有内容误导而静默跳过 import,导致三道检查全绿但组件不渲染,改用精确次数断言并新增静态扫描守门;后端 ValidationPipe 只对类 DTO 生效、交叉类型会静默失效,以及数组参数单选被跳过的问题,分别用继承改造与 @Transform 归一化解决。