# Spec: 存款明细前端展示组件

## ADDED Requirements

### Requirement: 明细数据结构返回
系统 SHALL 返回结构化的明细数据，包含以下信息：
- 收入明细列表（`IncomeItems`）
- 支出明细列表（`ExpenseItems`）
- 计算汇总（`Summary`）

每个明细项包含：
- `Id`: 预算ID
- `Name`: 预算名称
- `Type`: 预算类型（月度/年度）
- `BudgetLimit`: 预算金额
- `ActualAmount`: 实际金额
- `EffectiveAmount`: 计算用金额
- `CalculationNote`: 计算说明（"使用预算"/"使用实际"/"按天折算"/"使用实际（超支）"）
- `IsOverBudget`: 是否超支/未达标

#### Scenario: 月度明细数据结构
- **WHEN** 用户查询2月月度存款明细
- **THEN** 系统返回 JSON 结构包含 `IncomeItems`（工资、奖金等）、`ExpenseItems`（房租、餐饮等）和 `Summary`（收入合计、支出合计、计划存款）

#### Scenario: 年度明细数据结构
- **WHEN** 用户查询2026年度存款明细
- **THEN** 系统返回包含归档月份明细和未来月份明细的完整数据结构

### Requirement: 明细表格展示列
明细表格 SHALL 包含以下列：
- 名称（Name）
- 类型（月度/年度）
- 预算金额（BudgetLimit）
- 实际金额（ActualAmount）
- 计算用金额（EffectiveAmount）
- 计算说明（CalculationNote）

#### Scenario: 明细表格基本展示
- **WHEN** 用户打开存款明细页面
- **THEN** 表格显示所有收入和支出项的上述6列信息

#### Scenario: 不限额预算显示
- **WHEN** 预算项为不记额（NoLimit = true）
- **THEN** 预算金额列显示"不限额"

### Requirement: 超支/未达标高亮显示
系统 SHALL 对超支或未达标的预算项进行高亮显示：
- 支出超预算：实际 > 预算，高亮显示为红色/警告色
- 收入未达标：实际 > 0 且 实际 < 预算，高亮显示为橙色/提示色

#### Scenario: 支出超预算高亮
- **WHEN** 餐饮预算2000，实际2500（超支）
- **THEN** 该行背景色为浅红色，计算说明显示"使用实际（超支）"

#### Scenario: 收入未达标高亮
- **WHEN** 工资预算10000，实际9500（未达标）
- **THEN** 该行背景色为浅橙色，计算说明显示"使用实际"

#### Scenario: 正常范围不高亮
- **WHEN** 房租预算3000，实际3000（正常）
- **THEN** 该行无特殊背景色

### Requirement: 计算过程说明展示
系统 SHALL 在明细下方展示计算过程的文字说明，包括：
- 收入合计的计算公式（如：工资10000 + 奖金5000 = 15000）
- 支出合计的计算公式（如：房租3000 + 餐饮2000 = 5000）
- 计划存款的计算公式（如：15000 - 5000 = 10000）

#### Scenario: 月度计算过程说明
- **WHEN** 用户查看2月月度存款明细
- **THEN** 页面底部显示：
  ```
  收入合计 = 工资10000 + 奖金5000 = 15000
  支出合计 = 房租3000 + 餐饮2000 = 5000
  本月发生的年度支出 = 旅游3000
  月度计划存款 = 15000 - 5000 - 3000 = 7000
  ```

#### Scenario: 年度计算过程说明
- **WHEN** 用户查看2026年度存款明细
- **THEN** 页面底部显示：
  ```
  归档月已实收 = 1月15000 + 2月14000 = 29000
  未来月收入预算 = (工资10000 + 奖金5000) × 10月 = 150000
  归档月已实支 = 1月4800 + 2月5200 = 10000
  未来月支出预算 = (房租3000 + 餐饮2000) × 10月 = 50000
  年度计划存款 = 29000 + 150000 - 10000 - 50000 = 119000
  ```

### Requirement: 归档月份和未来月份分组展示
在年度明细中，系统 SHALL 将数据分为两组展示：
- **已归档月份明细**：显示各归档月的实际收支
- **未来月份预算明细**：显示当前及未来月份的预算和预测

#### Scenario: 年度明细分组
- **WHEN** 用户在3月查询年度存款明细
- **THEN** 页面分为两个表格：
  - 表格1：已归档明细（1月、2月）
  - 表格2：未来月份预算（3~12月）

#### Scenario: 归档月份合并显示
- **WHEN** 同一预算项在多个归档月出现（如工资1月10000、2月10000）
- **THEN** 可选择合并显示为"工资（1~2月）：预算10000/月，实际合计20000"

### Requirement: 响应式布局支持
明细表格 SHALL 支持移动端响应式布局：
- 桌面端：完整表格展示
- 移动端：卡片式折叠展示，点击展开详情

#### Scenario: 移动端卡片展示
- **WHEN** 用户在手机上打开存款明细页面
- **THEN** 每个预算项以卡片形式展示，显示名称、计算用金额和计算说明，点击展开显示完整信息

#### Scenario: 桌面端表格展示
- **WHEN** 用户在桌面浏览器打开存款明细页面
- **THEN** 以完整表格形式展示所有列

### Requirement: 排序和筛选功能
系统 SHALL 支持明细列表的排序和筛选：
- 按预算金额排序（降序/升序）
- 按实际金额排序
- 筛选显示：全部/仅超支/仅未达标

#### Scenario: 按预算金额降序排序
- **WHEN** 用户点击"预算金额"列标题
- **THEN** 列表按预算金额从高到低排序

#### Scenario: 仅显示超支项目
- **WHEN** 用户选择"仅超支"筛选
- **THEN** 列表仅显示 `IsOverBudget = true` 且为支出类的项目

### Requirement: 导出功能
系统 SHALL 支持将明细数据导出为 CSV 或 Excel 格式。

#### Scenario: 导出为 CSV
- **WHEN** 用户点击"导出 CSV"按钮
- **THEN** 浏览器下载包含所有明细数据的 CSV 文件，文件名为"存款明细_YYYYMM.csv"

#### Scenario: 导出为 Excel
- **WHEN** 用户点击"导出 Excel"按钮
- **THEN** 浏览器下载包含所有明细数据的 Excel 文件，保留表格格式和高亮样式