## Context

`SavingsBudgetContent.vue` 是一个显示存款计划列表和明细的组件。每个存款计划卡片可以点击查看详细信息,弹窗会显示:
1. 收入预算(预算限额和实际收入)
2. 支出预算(预算限额和实际支出)
3. 计划存款公式(收入预算 - 支出预算 = 计划存款)
4. 存款结果(计划存款、实际存款、还差)

问题在于弹窗模板引用了 `incomeLimit`、`incomeCurrent`、`expenseLimit`、`expenseCurrent` 这些计算属性,但在 `<script setup>` 中并未定义,导致弹窗内容为空。

父组件 `Index.vue` 维护了三个独立的预算数组:
- `expenseBudgets` - 支出预算列表
- `incomeBudgets` - 收入预算列表  
- `savingsBudgets` - 存款计划列表

当前 `SavingsBudgetContent.vue` 只接收 `savingsBudgets` 数组,无法访问收入和支出预算数据。

## Goals / Non-Goals

**Goals:**
- 修复存款明细弹窗显示为空的问题
- 正确显示收入预算和支出预算的限额及实际值
- 确保计算逻辑与后端逻辑一致
- 保持组件的单一职责,不引入不必要的依赖

**Non-Goals:**
- 不修改存款计划的计算逻辑(后端已有)
- 不改变预算数据的加载方式
- 不重构整个预算页面的架构

## Decisions

### 决策 1: 数据传递方式

**选择:** 通过 props 传递收入和支出预算数据

**理由:**
- **为什么不用 provide/inject?** 数据流更清晰,易于追踪和调试
- **为什么不在子组件中调用 API?** 违反单一数据源原则,会导致重复加载和不一致
- **为什么不用 Pinia store?** 这是页面级别的临时数据,不需要全局状态管理

**实现:**
在 `Index.vue` 中传递 `incomeBudgets` 和 `expenseBudgets` 给 `SavingsBudgetContent.vue`:
```vue
<SavingsBudgetContent
  :budgets="savingsBudgets"
  :income-budgets="incomeBudgets"
  :expense-budgets="expenseBudgets"
  @savings-nav="handleSavingsNav"
/>
```

### 决策 2: 匹配收入/支出预算的逻辑

**选择:** 根据 `periodStart` 和 `type` 进行匹配

**理由:**
- 存款计划、收入预算、支出预算都有相同的 `periodStart`(周期开始时间)和 `type`(月度/年度)字段
- 同一周期、同一类型的预算应该对应同一个存款计划
- 后端逻辑中存款 = 收入预算限额 - 支出预算限额

**实现:**
在 `SavingsBudgetContent.vue` 中添加计算属性:
```javascript
const matchedIncomeBudget = computed(() => {
  if (!currentBudget.value) return null
  return props.incomeBudgets?.find(
    b => b.periodStart === currentBudget.value.periodStart 
      && b.type === currentBudget.value.type
  )
})

const matchedExpenseBudget = computed(() => {
  if (!currentBudget.value) return null
  return props.expenseBudgets?.find(
    b => b.periodStart === currentBudget.value.periodStart 
      && b.type === currentBudget.value.type
  )
})

const incomeLimit = computed(() => matchedIncomeBudget.value?.limit || 0)
const incomeCurrent = computed(() => matchedIncomeBudget.value?.current || 0)
const expenseLimit = computed(() => matchedExpenseBudget.value?.limit || 0)
const expenseCurrent = computed(() => matchedExpenseBudget.value?.current || 0)
```

### 决策 3: 处理数据缺失情况

**选择:** 使用默认值 0,不显示错误提示

**理由:**
- 如果找不到对应的收入或支出预算,说明用户可能还未设置
- 显示 0 比显示错误信息更友好,符合"计划存款 = 收入 - 支出"的语义
- 用户可以在主界面看到预算设置情况,弹窗只是详情展示

## Risks / Trade-offs

### [风险] 如果收入/支出预算数据未加载完成

**缓解措施:** 
- 父组件 `Index.vue` 已经统一加载所有预算数据
- 弹窗在用户点击时打开,此时数据应已加载完成
- 使用可选链和默认值避免运行时错误

### [权衡] Props 增加导致组件耦合度提高

**接受理由:**
- 父组件本身就维护了所有预算数据,传递给子组件是合理的
- 子组件不负责数据加载,只负责展示,职责依然清晰
- 如果未来需要重构,可以考虑引入 Pinia store 统一管理预算数据

### [权衡] 按周期和类型匹配可能不够健壮

**接受理由:**
- 这是后端设计的数据模型,前端保持一致
- 后端保证同一周期同一类型只有一条预算记录
- 如果后端逻辑变更,前端需要同步调整(这是正常的维护成本)