## ADDED Requirements

### Requirement: 页面采用简洁的布局结构
预算 v2 页面 SHALL 采用简洁的布局结构，包含：DateSelectHeader、业务 tabs 和可滚动内容区域。

#### Scenario: 页面加载时显示完整布局
- **WHEN** 用户访问预算 v2 页面
- **THEN** 页面显示以下组件（从上到下）：
  - DateSelectHeader（显示当前年月，左右箭头）
  - van-tabs（支出/收入/计划三个选项，默认选中"支出"）
  - 可滚动内容区域（包含预算统计和列表）

### Requirement: 使用 DateSelectHeader 组件作为页头
预算 v2 页面 SHALL 使用 `@/components/DateSelectHeader.vue` 组件作为页头，替代当前的 `van-nav-bar`。

#### Scenario: 页头显示当前选中的年月
- **WHEN** 用户选择了 2024 年 3 月
- **THEN** 页头显示"2024年3月"

#### Scenario: 点击左箭头切换到上一个月
- **WHEN** 用户点击页头左箭头
- **THEN** 切换到上一个月（如从 2024年3月 切换到 2024年2月）
- **AND** 页面数据自动刷新

#### Scenario: 点击右箭头切换到下一个月
- **WHEN** 用户点击页头右箭头，且当前不是当前月
- **THEN** 切换到下一个月，页面数据自动刷新

#### Scenario: 当前是当前月时禁用右箭头
- **WHEN** 用户在当前月（如今天是 2024年3月15日，页面显示 2024年3月）
- **THEN** 页头右箭头不可点击（不能查看未来月份）

#### Scenario: 点击日期打开日期选择器
- **WHEN** 用户点击页头的日期文字
- **THEN** 显示年月选择器弹窗（van-date-picker，columns-type: ['year', 'month']）

#### Scenario: 日期选择器不能选择未来月份
- **WHEN** 用户在日期选择器中尝试选择未来月份
- **THEN** 显示提示"不能选择未来的月份"
- **AND** 不切换页面日期

### Requirement: 业务 tabs 紧随页头之后
预算页面 SHALL 在 DateSelectHeader 下方直接显示业务 tabs（支出/收入/计划），使用 `van-tabs` 组件。

#### Scenario: 默认选中"支出" tab
- **WHEN** 用户访问预算 v2 页面
- **THEN** 业务 tabs 默认选中"支出"

#### Scenario: 切换到"收入" tab
- **WHEN** 用户点击"收入" tab
- **THEN** 内容区域显示收入预算的统计和列表

#### Scenario: 切换到"计划" tab
- **WHEN** 用户点击"计划" tab
- **THEN** 内容区域显示存款计划的列表

#### Scenario: 切换 tab 时保持页头日期不变
- **WHEN** 用户从"支出" tab 切换到"收入" tab
- **THEN** 页头显示的年月不变
- **AND** 加载该月的收入预算数据

### Requirement: 可滚动内容区域支持下拉刷新
内容区域 SHALL 支持下拉刷新，刷新当前选中的预算数据。

#### Scenario: 下拉刷新当前页面数据
- **WHEN** 用户在内容区域下拉
- **THEN** 显示刷新动画
- **AND** 重新加载当前月份和业务 tab 的数据
- **AND** 刷新完成后显示提示"刷新成功"

### Requirement: 支持左右滑动切换月份
预算页面 SHALL 支持在内容区域左右滑动来切换月份。

#### Scenario: 右滑切换到上一个月
- **WHEN** 用户在内容区域向右滑动超过 50px
- **THEN** 切换到上一个月
- **AND** 页面数据自动刷新

#### Scenario: 左滑切换到下一个月
- **WHEN** 用户在内容区域向左滑动超过 50px，且不是当前月
- **THEN** 切换到下一个月
- **AND** 页面数据自动刷新

#### Scenario: 垂直滑动不触发月份切换
- **WHEN** 用户垂直滑动（滚动内容）
- **THEN** 不触发月份切换

#### Scenario: 当前月时左滑不切换
- **WHEN** 用户在当前月向左滑动
- **THEN** 不切换到下一个月（不能查看未来月份）

### Requirement: 页面底部留出安全距离
内容区域 SHALL 在底部留出足够的安全距离，避免被底部导航栏遮挡。

#### Scenario: 内容区域底部安全距离
- **WHEN** 用户滚动到内容底部
- **THEN** 内容底部与底部导航栏之间有足够的间距（95px + env(safe-area-inset-bottom)）

### Requirement: 支持 keep-alive 缓存
预算 v2 页面 SHALL 支持 Vue Router 的 keep-alive 缓存，提升用户体验。

#### Scenario: 从其他页面返回时保持状态
- **WHEN** 用户从预算页面跳转到其他页面，然后返回
- **THEN** 预算页面保持之前的状态（选中的月份、业务 tab、滚动位置）

#### Scenario: 接收全局事件刷新数据
- **WHEN** 用户在其他页面添加或修改了预算记录，触发 'transactions-changed' 事件
- **THEN** 预算页面自动刷新数据（如果页面处于激活状态）

### Requirement: 加载状态和错误处理
页面 SHALL 提供清晰的加载状态和错误提示。

#### Scenario: 数据加载中显示加载动画
- **WHEN** 页面正在加载预算数据
- **THEN** 显示加载动画（van-loading）

#### Scenario: 数据加载失败显示错误提示
- **WHEN** 数据加载失败（网络错误、API 错误等）
- **THEN** 显示错误提示（van-empty with error image）
- **AND** 提供"重试"按钮

#### Scenario: 点击重试按钮重新加载
- **WHEN** 用户点击"重试"按钮
- **THEN** 清除错误状态
- **AND** 重新加载当前月份和业务 tab 的数据