3.3 KiB
3.3 KiB
Why
预算功能存在三个影响用户体验的问题：
- 预算收入年度金额计算错误：某些收入预算项（如"家庭年终奖金"）的实际金额显示为 0，即使数据库中存在相应的交易记录，影响用户对预算执行情况的准确判断
- 存款计划缺少明细展示：预算计划卡片上显示"计划存款"金额（如 ¥73,878），但用户无法查看该金额是如何计算出来的，缺少透明度
- 卡片样式不统一：预算页面的卡片样式（边距、圆角、阴影）与统计页面不一致，导致视觉风格不统一，影响应用整体一致性
What Changes
问题 1：修复收入金额计算
- 诊断问题：通过浏览器测试和后端代码分析，定位
BudgetRepository.GetCurrentAmountAsync方法中的数据查询逻辑问题 - 修复数据查询：检查并修复分类匹配、日期范围和交易类型的过滤逻辑
- 添加测试：编写单元测试复现 bug，确保修复后测试通过
- 验证修复：在浏览器中验证"家庭年终奖金"等收入预算项的实际金额正确显示
问题 2：添加计划明细按钮
- 设计明细弹窗：展示"计划存款"金额的计算逻辑（包括收入预算、支出预算、实际收支等）
- 添加明细按钮：在存款计划卡片头部的 actions 区域添加"明细"图标按钮
- 实现计算逻辑展示：获取并展示存款计划的计算公式和各项数据来源
问题 3：统一卡片样式
- 制定统一规范：以
styles/common.css中的.common-card为基准，统一卡片样式 - 修复预算图表卡片：更新
BudgetChartAnalysis.vue中的.chart-card样式margin: 0 12px 16px（添加左右和底部边距）border-radius: 16px（改为 16px）box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08)（统一阴影效果）- 添加
border: 1px solid var(--van-border-color)
- 修复预算卡片：检查
BudgetCard.vue的样式是否符合规范
Capabilities
New Capabilities
savings-plan-detail-view: 新增存款计划明细弹窗，展示计划存款金额的计算逻辑和数据来源
Modified Capabilities
budget-stats-calculation: 修复预算实际金额的计算逻辑，确保数据库中的交易记录能够正确累加到预算统计中
Impact
受影响的代码：
- 后端：
Repository/BudgetRepository.cs:GetCurrentAmountAsync方法Service/Budget/BudgetStatsService.cs: 可能需要添加日志以便诊断
- 前端：
Web/src/components/Budget/BudgetCard.vue: 添加明细按钮Web/src/components/Budget/BudgetChartAnalysis.vue: 统一.chart-card样式Web/src/views/budgetV2/modules/SavingsBudgetContent.vue: 实现明细弹窗Web/src/styles/common.css: 卡片样式基准参考
受影响的 API：
/api/Budget/GetCategoryStats: 返回的年度和月度统计数据- 可能需要新增 API 获取存款计划的详细计算数据
受影响的页面：
/budget-v2收入标签页：年度仪表盘和预算明细（问题 1）/budget-v2计划标签页：存款计划卡片新增明细按钮（问题 2）/budget-v2所有标签页：统一卡片样式，提升视觉一致性（问题 3）
数据库：
- 需要检查
TransactionRecord和BudgetRecord的数据一致性