Skip to content

预算面板

按支出类别设置月度消费目标,并追踪实际支出对比。预算按使用百分比排序,最紧张的类别显示在最前面。

显示内容

预算项目列表,每项显示类别名称、预算金额、实际支出和颜色编码的进度条。

元素详情
类别名称与交易面板中的分类一致
预算金额月度 NZD 目标(行内可编辑)
实际支出该类别当月支出
进度条支出/预算比例的可视化填充

主要功能

  • 添加预算 —— 选择任何支出类别并设置月度 NZD 金额。
  • 按使用率排序 —— 预算按已使用百分比排序(最高优先),立即显示超支情况。
  • 行内编辑 —— 点击预算金额即可原地编辑。
  • 悬停删除 —— 悬停时每个预算项目会显示删除按钮。

进度条颜色编码

使用率颜色效果
低于 80%绿色标准填充
80% -- 100%黄色警告填充 + 发光效果
超过 100%红色超支填充 + 发光效果

发光效果在 80% 及以上时激活,以引起对接近或超出预算的类别的注意。

数据来源

状态管理字段
useFinanceStorebudgets, categories

所有金额使用 formatNZD() 格式化。

交互操作

操作结果
添加预算类别下拉选择 + 金额输入
点击金额行内编辑模式
悬停行显示删除按钮
删除移除预算项目

相关面板