56 lines
2.5 KiB
Markdown
56 lines
2.5 KiB
Markdown
|
## Why
|
|||
|
|
|
|||
|
|
当前预算页面（BudgetView.vue）存在多个问题：
|
|||
|
|
1. **风格不一致**：与其他 v2 页面（calendarV2、statisticsV2）的页头设计不一致，使用的是自定义的 `van-nav-bar` 而非统一的 `DateSelectHeader` 组件
|
|||
|
|
2. **代码质量问题**：页面存在多个 bug，包括状态管理混乱、数据刷新逻辑不清晰、存款计划日期切换不稳定等问题
|
|||
|
|
3. **维护困难**：代码结构复杂（1000+ 行），组件职责不清晰，难以维护和扩展
|
|||
|
|
|
|||
|
|
需要重写预算页面以解决这些问题，并保持页面简洁高效。
|
|||
|
|
|
|||
|
|
## What Changes
|
|||
|
|
|
|||
|
|
- **页头重构**：使用 `DateSelectHeader` 组件替代当前的 `van-nav-bar`，实现年月选择器（支持左右箭头切换月份）
|
|||
|
|
- **业务 tabs 布局调整**：将"支出/收入/计划"tabs 紧随页头之后，保持原有业务逻辑
|
|||
|
|
- **预算内容重构**：
|
|||
|
|
- 保留现有的预算统计、分类列表、图表分析等核心功能
|
|||
|
|
- 重构数据加载逻辑，消除现有 bug（未覆盖分类加载、存款计划切换、日期同步等问题）
|
|||
|
|
- 优化组件结构，将复杂逻辑拆分为可复用的子模块
|
|||
|
|
- 改善状态管理，统一数据流
|
|||
|
|
- **统一交互体验**：
|
|||
|
|
- 实现左右滑动切换月份
|
|||
|
|
- 统一下拉刷新行为
|
|||
|
|
- 统一加载状态和错误处理
|
|||
|
|
|
|||
|
|
## Capabilities
|
|||
|
|
|
|||
|
|
### New Capabilities
|
|||
|
|
- `budget-v2-page-layout`: 新的预算 v2 页面布局，包含 DateSelectHeader + 业务 tabs + 内容区域
|
|||
|
|
- `budget-v2-data-loading`: 重构后的预算数据加载逻辑，消除现有 bug
|
|||
|
|
|
|||
|
|
### Modified Capabilities
|
|||
|
|
_无_
|
|||
|
|
|
|||
|
|
## Impact
|
|||
|
|
|
|||
|
|
**前端影响**：
|
|||
|
|
- **新增文件**：
|
|||
|
|
- `Web/src/views/budgetV2/Index.vue` - 新的预算 v2 主页面
|
|||
|
|
- `Web/src/views/budgetV2/modules/` - 预算子模块（图表、列表、编辑等）
|
|||
|
|
- **修改文件**：
|
|||
|
|
- `Web/src/router/index.js` - 添加新路由或更新现有预算路由
|
|||
|
|
- 可能需要调整现有的 `@/components/Budget/` 下的组件以适配新结构
|
|||
|
|
- **复用组件**：
|
|||
|
|
- `@/components/DateSelectHeader.vue` - 页头年月选择器
|
|||
|
|
- `@/components/Budget/BudgetCard.vue` - 预算卡片
|
|||
|
|
- `@/components/Budget/BudgetEditPopup.vue` - 预算编辑弹窗
|
|||
|
|
- `@/components/Budget/SavingsConfigPopup.vue` - 储蓄配置弹窗
|
|||
|
|
- `@/components/Budget/BudgetChartAnalysis.vue` - 预算图表分析
|
|||
|
|
|
|||
|
|
**后端影响**：
|
|||
|
|
- 无需修改后端 API（复用现有的预算相关接口）
|
|||
|
|
|
|||
|
|
**依赖关系**：
|
|||
|
|
- 依赖现有的 `@/api/budget` 模块提供的 API
|
|||
|
|
- 依赖 `@/stores/` 中的相关状态管理（如有）
|
|||
|
|
- 依赖 Vant UI 组件库
|