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

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

### 1.1 编写单元测试复现 Bug

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

### 1.2 诊断和修复问题

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

### 1.3 验证修复

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

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

### 2.1 添加明细按钮

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

### 2.2 创建明细弹窗组件

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

### 2.3 实现明细内容

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

### 2.4 样式优化

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

### 2.5 验证功能

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

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

### 3.1 修复预算图表卡片样式

- [x] 3.1.1 打开 `Web/src/components/Budget/BudgetChartAnalysis.vue`
- [x] 3.1.2 找到 `<style scoped>` 中的 `.chart-card` 样式定义
- [x] 3.1.3 修改 `border-radius: 12px` 为 `border-radius: 16px`
- [x] 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)`
- [x] 3.1.5 添加 `border: 1px solid var(--van-border-color)`
- [x] 3.1.6 添加 `margin: 0 12px 16px`（左右 12px，底部 16px）

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

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

### 3.3 验证样式一致性

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

## 4. 代码质量和测试

### 4.1 后端代码检查

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

### 4.2 前端代码检查

- [x] 4.2.1 运行 ESLint 检查：`cd Web && pnpm lint`
- [x] 4.2.2 运行 Prettier 格式化：`cd Web && pnpm format`
- [x] 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 更新相关文档

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

### 5.2 Git 提交

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