EmailBill/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/tasks.md

1. 问题 1：修复收入预算实际金额计算

1.1 编写单元测试复现 Bug

• 1.1.1 在 WebApi.Test/ 中创建测试类 BudgetRepositoryTest.cs
• 1.1.2 编写测试用例：创建模拟的收入预算（包含"家庭年终奖金"分类）
• 1.1.3 编写测试用例：创建模拟的交易记录（包含"家庭年终奖金"分类，金额非 0）
• 1.1.4 编写测试用例：调用 GetCurrentAmountAsync 方法，断言返回金额应 > 0
• 1.1.5 运行测试，验证测试失败（复现 bug）

1.2 诊断和修复问题

• 1.2.1 检查 Repository/BudgetRepository.cs 的 GetCurrentAmountAsync 方法
• 1.2.2 验证 SelectedCategories.Split(',') 的分类匹配逻辑是否正确
• 1.2.3 验证日期范围过滤条件（>= startDate 和 <= endDate）
• 1.2.4 验证交易类型过滤条件（Type == TransactionType.Income）
• 1.2.5 根据诊断结果修复查询逻辑
• 1.2.6 添加日志输出以便未来调试（使用 ILogger）

1.3 验证修复

• 1.3.1 运行单元测试，确保测试通过
• 1.3.2 运行完整测试套件：dotnet test WebApi.Test/WebApi.Test.csproj
• 1.3.3 在浏览器中验证：打开 /budget-v2 收入标签页
• 1.3.4 在浏览器中验证：检查"家庭年终奖金"的年度实际金额是否正确显示

2. 问题 2：添加存款计划明细按钮和弹窗

2.1 添加明细按钮

• 2.1.1 打开 Web/src/components/Budget/BudgetCard.vue
• 2.1.2 在 header-actions slot 中添加明细按钮（van-button，icon="info-o"）
• 2.1.3 为存款计划卡片（budget.category === 2）条件渲染明细按钮
• 2.1.4 添加点击事件处理器 @click.stop="showDetailPopup = true"

2.2 创建明细弹窗组件

• 2.2.1 在 Web/src/views/budgetV2/modules/SavingsBudgetContent.vue 中添加 ref 引用 showDetailPopup
• 2.2.2 创建 van-popup 组件，设置 position="bottom", round, :style="{ height: '80%' }"
• 2.2.3 添加弹窗标题："计划存款明细"
• 2.2.4 添加关闭按钮（点击关闭或点击遮罩关闭）

2.3 实现明细内容

• 2.3.1 在弹窗中添加"收入预算"分组卡片
• 2.3.2 计算并显示收入预算总限额（从 budgets 中过滤 category === 1 的预算，求和 limit）
• 2.3.3 计算并显示收入预算实际金额（求和 current）
• 2.3.4 在弹窗中添加"支出预算"分组卡片
• 2.3.5 计算并显示支出预算总限额（从 budgets 中过滤 category === 0 的预算，求和 limit）
• 2.3.6 计算并显示支出预算实际金额（求和 current）
• 2.3.7 添加"计划存款"公式展示：收入预算 - 支出预算 = 计划存款
• 2.3.8 显示计划存款金额（budget.limit）
• 2.3.9 显示实际存款金额（budget.current）
• 2.3.10 计算并显示差额：Math.max(0, budget.limit - budget.current)

2.4 样式优化

• 2.4.1 为明细弹窗添加适当的内边距和间距
• 2.4.2 使用不同颜色区分收入（绿色）和支出（红色）
• 2.4.3 使用 common-card 样式保持与其他页面一致
• 2.4.4 确保暗色主题下的可读性

2.5 验证功能

• 2.5.1 在浏览器中打开 /budget-v2 计划标签页
• 2.5.2 验证存款计划卡片上有明细按钮
• 2.5.3 点击明细按钮，验证弹窗正确打开
• 2.5.4 验证弹窗中的数据计算正确（与卡片上的"计划存款"金额一致）
• 2.5.5 验证关闭弹窗功能正常

3. 问题 3：统一卡片样式

3.1 修复预算图表卡片样式

• 3.1.1 打开 Web/src/components/Budget/BudgetChartAnalysis.vue
• 3.1.2 找到 <style scoped> 中的 .chart-card 样式定义
• 3.1.3 修改 border-radius: 12px 为 border-radius: 16px
• 3.1.4 修改 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) 为 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08)
• 3.1.5 添加 border: 1px solid var(--van-border-color)
• 3.1.6 添加 margin: 0 12px 16px（左右 12px，底部 16px）

3.2 检查和修复其他卡片样式

• 3.2.1 检查 .gauge-card 是否需要特殊处理（保留 padding: 12px 的紧凑布局）
• 3.2.2 打开 Web/src/components/Budget/BudgetCard.vue
• 3.2.3 检查 .budget-card 样式是否符合规范
• 3.2.4 如果 .budget-card 的 margin 为 0，考虑在父容器 SavingsBudgetContent.vue 中添加间距

3.3 验证样式一致性

• 3.3.1 在浏览器中打开 /budget-v2 支出标签页，检查图表卡片样式
• 3.3.2 在浏览器中打开 /budget-v2 收入标签页，检查图表卡片样式
• 3.3.3 在浏览器中打开 /budget-v2 计划标签页，检查存款计划卡片样式
• 3.3.4 在浏览器中打开 /statistics-v2 统计页面，对比卡片样式
• 3.3.5 验证暗色主题和浅色主题下的样式效果
• 3.3.6 验证移动端（不同屏幕尺寸）的显示效果

4. 代码质量和测试

4.1 后端代码检查

• 4.1.1 运行后端测试套件：dotnet test
• 4.1.2 检查是否有编译警告：dotnet build
• 4.1.3 确保所有新增代码有中文注释

4.2 前端代码检查

• 4.2.1 运行 ESLint 检查：cd Web && pnpm lint
• 4.2.2 运行 Prettier 格式化：cd Web && pnpm format
• 4.2.3 构建前端验证无错误：cd Web && pnpm build

4.3 浏览器测试

• 4.3.1 清除浏览器缓存，重新加载应用
• 4.3.2 测试收入预算的实际金额显示（问题 1）
• 4.3.3 测试存款计划明细弹窗（问题 2）
• 4.3.4 测试卡片样式一致性（问题 3）
• 4.3.5 检查浏览器控制台是否有错误或警告

5. 文档和提交

5.1 更新相关文档

• 5.1.1 如果需要，更新 AGENTS.md 中的相关说明
• 5.1.2 检查是否需要更新 README 或其他文档

5.2 Git 提交

• 5.2.1 确保所有修改已保存
• 5.2.2 使用 git status 检查修改的文件
• 5.2.3 创建 commit，使用清晰的 commit message（参考 AGENTS.md 的 commit 规范）
• 5.2.4 如果用户要求，推送到远程仓库