预算面板
按支出类别设置月度消费目标,并追踪实际支出对比。预算按使用百分比排序,最紧张的类别显示在最前面。
显示内容
预算项目列表,每项显示类别名称、预算金额、实际支出和颜色编码的进度条。
| 元素 | 详情 |
|---|---|
| 类别名称 | 与交易面板中的分类一致 |
| 预算金额 | 月度 NZD 目标(行内可编辑) |
| 实际支出 | 该类别当月支出 |
| 进度条 | 支出/预算比例的可视化填充 |
主要功能
- 添加预算 —— 选择任何支出类别并设置月度 NZD 金额。
- 按使用率排序 —— 预算按已使用百分比排序(最高优先),立即显示超支情况。
- 行内编辑 —— 点击预算金额即可原地编辑。
- 悬停删除 —— 悬停时每个预算项目会显示删除按钮。
进度条颜色编码
| 使用率 | 颜色 | 效果 |
|---|---|---|
| 低于 80% | 绿色 | 标准填充 |
| 80% -- 100% | 黄色 | 警告填充 + 发光效果 |
| 超过 100% | 红色 | 超支填充 + 发光效果 |
发光效果在 80% 及以上时激活,以引起对接近或超出预算的类别的注意。
数据来源
| 状态管理 | 字段 |
|---|---|
useFinanceStore | budgets, categories |
所有金额使用 formatNZD() 格式化。
交互操作
| 操作 | 结果 |
|---|---|
| 添加预算 | 类别下拉选择 + 金额输入 |
| 点击金额 | 行内编辑模式 |
| 悬停行 | 显示删除按钮 |
| 删除 | 移除预算项目 |