61 lines
3.3 KiB
Markdown
61 lines
3.3 KiB
Markdown
## Why
|
||
|
||
预算功能存在三个影响用户体验的问题：
|
||
1. **预算收入年度金额计算错误**：某些收入预算项（如"家庭年终奖金"）的实际金额显示为 0，即使数据库中存在相应的交易记录，影响用户对预算执行情况的准确判断
|
||
2. **存款计划缺少明细展示**：预算计划卡片上显示"计划存款"金额（如 ¥73,878），但用户无法查看该金额是如何计算出来的，缺少透明度
|
||
3. **卡片样式不统一**：预算页面的卡片样式（边距、圆角、阴影）与统计页面不一致，导致视觉风格不统一，影响应用整体一致性
|
||
|
||
## 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` 的数据一致性
|