fix

2026-02-15 10:10:28 +08:00
parent e51a3edd50
commit a88556c784
92 changed files with 6751 additions and 776 deletions
--- a/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/.openspec.yaml
+++ b/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-14
--- a/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/design.md
+++ b/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/design.md
@@ -0,0 +1,165 @@
+## Context
+
+EmailBill 是一个预算跟踪应用，包含 .NET 10 后端和 Vue 3 前端。预算模块负责计算和展示预算执行情况，包括收入、支出和存款计划。
+
+**当前问题**：
+1. 预算收入的实际金额计算错误，`BudgetRepository.GetCurrentAmountAsync` 方法查询交易记录时可能存在过滤条件问题
+2. 存款计划卡片缺少透明度，用户无法了解"计划存款"金额的计算依据
+3. 预算页面的卡片样式与统计页面不一致，影响视觉统一性
+
+**技术栈**：
+- 后端：.NET 10, FreeSql ORM, xUnit 测试
+- 前端：Vue 3 Composition API, Vant UI, SCSS
+- 数据库：SQLite
+
+**约束**：
+- 保持向后兼容，不破坏现有 API 契约
+- 遵循项目现有的代码风格（中文注释、文件作用域命名空间）
+- 样式修改需保持暗色主题兼容性
+
+## Goals / Non-Goals
+
+**Goals:**
+- 修复收入预算实际金额的计算错误，确保数据准确性
+- 为存款计划添加明细展示功能，提升透明度
+- 统一预算页面与统计页面的卡片样式，提升 UI 一致性
+- 添加单元测试覆盖修复的逻辑
+
+**Non-Goals:**
+- 不重构整个预算计算系统
+- 不改变预算数据模型结构
+- 不修改其他页面的卡片样式
+- 不改变存款计划的计算算法本身
+
+## Decisions
+
+### 决策 1：问题 1 的修复策略
+
+**决定**：采用 TDD（测试驱动开发）方式修复计算错误
+
+**方案对比**：
+- **方案 A（选择）**：先编写失败的单元测试复现 bug，然后修复代码，最后验证测试通过
+  - ✅ 确保 bug 被正确理解和修复
+  - ✅ 防止回归
+  - ⏱️ 需要额外编写测试
+- **方案 B**：直接修复代码，手动验证
+  - ❌ 无法保证不引入新问题
+  - ❌ 缺少回归保护
+
+**实施细节**：
+1. 在 `WebApi.Test/` 中创建测试用例，使用实际数据复现"家庭年终奖金"的计算错误
+2. 诊断 `BudgetRepository.GetCurrentAmountAsync` 的查询条件：
+   - 检查 `SelectedCategories` 的 `Contains` 匹配逻辑
+   - 验证日期范围过滤是否正确（`>=` 和 `<=`）
+   - 确认 `TransactionType` 过滤条件
+3. 修复后运行测试验证
+
+### 决策 2：存款计划明细的数据来源
+
+**决定**：前端计算明细，不新增后端 API
+
+**方案对比**：
+- **方案 A（选择）**：前端基于现有数据计算明细
+  - ✅ 不增加后端复杂度
+  - ✅ 响应速度快
+  - ⚠️ 前端需要理解计算逻辑
+- **方案 B**：新增后端 API 返回计算明细
+  - ⏱️ 需要设计新的 DTO 和 API
+  - 🔄 增加网络往返
+
+**实施细节**：
+1. 明细弹窗展示内容：
+   - **收入预算总计**：所有收入预算的限额和实际值
+   - **支出预算总计**：所有支出预算的限额和实际值
+   - **计划存款公式**：`收入预算 - 支出预算 = 计划存款`
+   - **实际存款**：从 budget 对象获取
+   - **差额**：`计划存款 - 实际存款`
+2. 使用 Vant 的 Popup 组件实现弹窗
+3. 在 `BudgetCard.vue` 的 `header-actions` slot 添加"明细"图标按钮（`icon="info"`）
+
+### 决策 3：样式统一的方案
+
+**决定**：直接修改 `.chart-card` 样式，使其继承或匹配 `.common-card`
+
+**方案对比**：
+- **方案 A（选择）**：修改 `BudgetChartAnalysis.vue` 中的 `.chart-card` 样式
+  - ✅ 改动最小，影响范围可控
+  - ✅ 立即见效
+- **方案 B**：将所有预算卡片改为使用 `.common-card` 类
+  - ⏱️ 需要大量 HTML 结构修改
+  - ⚠️ 可能影响现有布局逻辑
+- **方案 C**：创建新的统一卡片组件
+  - 🔄 过度设计
+  - ⏱️ 需要重构多个页面
+
+**实施细节**：
+1. 修改 `Web/src/components/Budget/BudgetChartAnalysis.vue` 的 `.chart-card` 样式：
+   ```scss
+   .chart-card {
+     background: var(--van-background-2);
+     border-radius: 16px;  // 改为 16px
+     padding: 16px;
+     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);  // 统一阴影
+     border: 1px solid var(--van-border-color);  // 添加边框
+     margin: 0 12px 16px;  // 添加边距
+   }
+   ```
+2. 检查 `.gauge-card` 的特殊样式是否需要保留
+3. 验证暗色主题下的效果
+
+## Risks / Trade-offs
+
+**风险 1：问题 1 的修复可能影响其他预算类型**
+- **缓解**：编写覆盖支出、收入、存款三种类型的测试用例
+- **回退**：保留 git 历史，可快速回滚
+
+**风险 2：明细弹窗的计算逻辑可能与后端不一致**
+- **缓解**：参考 `BudgetSavingsService.cs` 的计算逻辑，确保前端实现一致
+- **验证**：与后端计算结果进行对比测试
+
+**风险 3：样式修改可能在某些设备或浏览器上显示异常**
+- **缓解**：修改后在浏览器中测试深色/浅色主题
+- **回退**：样式改动独立 commit，可快速回滚
+
+**权衡：前端计算 vs 后端计算**
+- 选择前端计算明细可以减少 API 开销，但增加了前端复杂度
+- 如果未来计算逻辑变得更复杂，可能需要迁移到后端
+
+## Migration Plan
+
+**部署步骤**：
+1. 后端修复和测试：
+   - 运行 `dotnet test` 确保所有测试通过
+   - 构建后端：`dotnet build`
+2. 前端修改：
+   - 运行 `pnpm lint` 检查代码风格
+   - 构建前端：`pnpm build`
+3. 浏览器验证：
+   - 测试收入预算的实际金额显示
+   - 测试存款计划明细弹窗
+   - 验证卡片样式一致性
+
+**回滚策略**：
+- 所有改动都在独立分支，可快速回滚
+- 数据库无结构变更，无需数据迁移
+
+**验证清单**：
+- [ ] 收入预算的"家庭年终奖金"实际金额正确显示
+- [ ] 存款计划卡片有明细按钮，点击显示计算详情
+- [ ] 预算页面的卡片样式与统计页面一致
+- [ ] 所有单元测试通过
+- [ ] 前端 ESLint 无错误
+
+## Open Questions
+
+1. **问题 1 的具体原因**：`SelectedCategories` 匹配问题还是日期范围问题？
+   - 需要查看实际数据库中的 `TransactionRecord` 和 `BudgetRecord` 数据
+   - 建议在修复前添加详细的日志输出
+
+2. **明细弹窗是否需要支持历史月份查询？**
+   - 当前设计仅展示当前周期的明细
+   - 如果需要历史查询，可能需要后端 API 支持
+
+3. **样式修改是否需要同步到其他使用 `.chart-card` 的组件？**
+   - 需要检查是否有其他页面使用了相同的类名
+   - 建议全局搜索 `.chart-card` 确认影响范围
--- a/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/proposal.md
+++ b/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/proposal.md
@@ -0,0 +1,60 @@
+## 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` 的数据一致性
--- a/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/specs/budget-stats-calculation/spec.md
+++ b/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/specs/budget-stats-calculation/spec.md
@@ -0,0 +1,97 @@
+## ADDED Requirements
+
+### Requirement: 预算实际金额正确查询交易记录
+预算统计系统 SHALL 准确查询并汇总数据库中的交易记录，以计算预算的实际金额。
+
+#### Scenario: 查询收入预算的交易记录
+- **WHEN** 系统计算收入类型预算的实际金额
+- **THEN** 系统 SHALL 查询 `TransactionRecord` 表
+- **AND** 查询条件 SHALL 包含：
+  - 交易类型为 `Income`
+  - 交易发生时间在预算的统计时间段内（`OccurredAt >= startDate AND OccurredAt <= endDate`）
+  - 交易分类在预算的 `SelectedCategories` 列表中
+- **AND** 系统 SHALL 对符合条件的交易金额求和
+
+#### Scenario: 查询支出预算的交易记录
+- **WHEN** 系统计算支出类型预算的实际金额
+- **THEN** 系统 SHALL 查询 `TransactionRecord` 表
+- **AND** 查询条件 SHALL 包含：
+  - 交易类型为 `Expense`
+  - 交易发生时间在预算的统计时间段内
+  - 交易分类在预算的 `SelectedCategories` 列表中
+- **AND** 系统 SHALL 对符合条件的交易金额求和
+
+### Requirement: 分类匹配逻辑正确
+系统 SHALL 正确匹配交易记录的分类字段与预算的 SelectedCategories。
+
+#### Scenario: 分类字段完全匹配
+- **WHEN** 交易记录的 `Classify` 字段为 "家庭年终奖金"
+- **AND** 预算的 `SelectedCategories` 包含 "家庭年终奖金"
+- **THEN** 该交易记录 SHALL 被包含在实际金额计算中
+
+#### Scenario: 分类字段不匹配
+- **WHEN** 交易记录的 `Classify` 字段为 "工资"
+- **AND** 预算的 `SelectedCategories` 不包含 "工资"
+- **THEN** 该交易记录 SHALL NOT 被包含在实际金额计算中
+
+#### Scenario: SelectedCategories 为空字符串
+- **WHEN** 预算的 `SelectedCategories` 为空字符串或 null
+- **THEN** 系统 SHALL 不应用分类过滤
+- **AND** 所有符合时间和类型条件的交易记录 SHALL 被包含在计算中
+
+### Requirement: 日期范围过滤正确
+系统 SHALL 使用正确的日期范围边界条件过滤交易记录。
+
+#### Scenario: 交易在统计期间内
+- **WHEN** 交易的 `OccurredAt` 为 2026-02-10
+- **AND** 统计的 `startDate` 为 2026-02-01，`endDate` 为 2026-02-28
+- **THEN** 该交易记录 SHALL 被包含在实际金额计算中
+
+#### Scenario: 交易在统计期间开始日
+- **WHEN** 交易的 `OccurredAt` 等于 `startDate`
+- **THEN** 该交易记录 SHALL 被包含在实际金额计算中（包含边界）
+
+#### Scenario: 交易在统计期间结束日
+- **WHEN** 交易的 `OccurredAt` 等于 `endDate`
+- **THEN** 该交易记录 SHALL 被包含在实际金额计算中（包含边界）
+
+#### Scenario: 交易在统计期间之前
+- **WHEN** 交易的 `OccurredAt` 早于 `startDate`
+- **THEN** 该交易记录 SHALL NOT 被包含在实际金额计算中
+
+#### Scenario: 交易在统计期间之后
+- **WHEN** 交易的 `OccurredAt` 晚于 `endDate`
+- **THEN** 该交易记录 SHALL NOT 被包含在实际金额计算中
+
+### Requirement: 年度统计汇总所有月份数据
+当计算年度预算统计时，系统 SHALL 正确汇总整年的交易数据。
+
+#### Scenario: 计算年度收入实际金额
+- **WHEN** 系统计算某个收入预算的年度实际金额
+- **AND** 该预算的 `Type` 为 `Year`
+- **THEN** 系统 SHALL 汇总从当年 1 月 1 日到 12 月 31 日的所有符合条件的交易记录
+- **AND** 如果当前时间在年度中间，系统 SHALL 汇总从 1 月 1 日到当前日期的交易记录
+
+#### Scenario: 月度预算在年度统计中的处理
+- **WHEN** 系统计算年度统计
+- **AND** 某个月度预算（`Type` 为 `Month`）存在归档数据
+- **THEN** 系统 SHALL 包含该月度预算在各个历史月份的归档实际金额
+- **AND** 系统 SHALL 累加所有历史月份的归档金额
+
+### Requirement: 测试覆盖关键场景
+系统 SHALL 包含单元测试覆盖预算实际金额计算的关键场景。
+
+#### Scenario: 测试覆盖收入预算计算
+- **WHEN** 运行单元测试套件
+- **THEN** SHALL 存在测试用例验证收入预算的实际金额计算
+- **AND** 测试用例 SHALL 包含多个交易记录，验证汇总逻辑
+
+#### Scenario: 测试覆盖分类匹配
+- **WHEN** 运行单元测试套件
+- **THEN** SHALL 存在测试用例验证分类匹配逻辑
+- **AND** 测试用例 SHALL 包含匹配和不匹配的场景
+
+#### Scenario: 测试覆盖日期范围
+- **WHEN** 运行单元测试套件
+- **THEN** SHALL 存在测试用例验证日期范围过滤
+- **AND** 测试用例 SHALL 包含边界条件（startDate, endDate, 期间内外）
--- a/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/specs/savings-plan-detail-view/spec.md
+++ b/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/specs/savings-plan-detail-view/spec.md
@@ -0,0 +1,67 @@
+## ADDED Requirements
+
+### Requirement: 存款计划明细按钮可见
+存款计划卡片 SHALL 在卡片头部的操作区域显示一个明细按钮，使用信息图标（info）表示。
+
+#### Scenario: 用户查看存款计划卡片
+- **WHEN** 用户打开预算页面的"计划"标签
+- **THEN** 每个存款计划卡片的头部 SHALL 显示一个信息图标按钮
+- **AND** 该按钮 SHALL 位于"查询关联账单"按钮之后
+
+### Requirement: 明细弹窗展示计划存款计算逻辑
+当用户点击明细按钮时，系统 SHALL 展示一个弹窗，清晰地说明计划存款金额的计算方式和数据来源。
+
+#### Scenario: 用户点击明细按钮
+- **WHEN** 用户点击存款计划卡片上的明细按钮
+- **THEN** 系统 SHALL 打开一个全屏弹窗
+- **AND** 弹窗标题 SHALL 显示"计划存款明细"
+
+### Requirement: 明细弹窗展示收入预算信息
+明细弹窗 SHALL 展示收入预算的汇总信息，包括总预算限额和实际收入金额。
+
+#### Scenario: 查看收入预算信息
+- **WHEN** 明细弹窗打开
+- **THEN** 系统 SHALL 显示"收入预算"分组
+- **AND** 该分组 SHALL 包含以下信息：
+  - 预算限额（所有收入预算的总和）
+  - 实际收入（当前已实现的收入总额）
+
+### Requirement: 明细弹窗展示支出预算信息
+明细弹窗 SHALL 展示支出预算的汇总信息，包括总预算限额和实际支出金额。
+
+#### Scenario: 查看支出预算信息
+- **WHEN** 明细弹窗打开
+- **THEN** 系统 SHALL 显示"支出预算"分组
+- **AND** 该分组 SHALL 包含以下信息：
+  - 预算限额（所有支出预算的总和）
+  - 实际支出（当前已发生的支出总额）
+
+### Requirement: 明细弹窗展示计划存款公式
+明细弹窗 SHALL 清晰展示计划存款的计算公式，帮助用户理解金额来源。
+
+#### Scenario: 查看计划存款公式
+- **WHEN** 明细弹窗打开
+- **THEN** 系统 SHALL 显示计算公式："计划存款 = 收入预算 - 支出预算"
+- **AND** 公式中的各项数值 SHALL 与上方展示的收入和支出预算数据一致
+
+### Requirement: 明细弹窗展示实际存款和差额
+明细弹窗 SHALL 展示实际存款金额和与计划存款的差额。
+
+#### Scenario: 查看实际存款信息
+- **WHEN** 明细弹窗打开
+- **THEN** 系统 SHALL 显示"实际存款"金额（从当前 budget 对象获取）
+- **AND** 系统 SHALL 显示"还差"金额，计算方式为：计划存款 - 实际存款
+- **AND** 如果实际存款超过计划，差额 SHALL 显示为 0
+
+#### Scenario: 差额为负数时
+- **WHEN** 实际存款超过计划存款
+- **THEN** 系统 SHALL 将"还差"显示为 0
+- **AND** 系统 SHALL 使用成功色（绿色）高亮实际存款金额
+
+### Requirement: 明细弹窗支持关闭
+用户 SHALL 能够随时关闭明细弹窗。
+
+#### Scenario: 用户关闭弹窗
+- **WHEN** 用户点击弹窗外部区域或返回按钮
+- **THEN** 系统 SHALL 关闭明细弹窗
+- **AND** 用户 SHALL 返回到存款计划卡片视图
--- a/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/tasks.md
+++ b/openspec/changes/archive/2026-02-14-fix-budget-income-calculation/tasks.md
@@ -0,0 +1,132 @@
+## 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 如果用户要求，推送到远程仓库