162b6d02dd
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 26s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
2.5 KiB
2.5 KiB
Why
当前预算页面（BudgetView.vue）存在多个问题：
- 风格不一致：与其他 v2 页面（calendarV2、statisticsV2）的页头设计不一致，使用的是自定义的
van-nav-bar而非统一的DateSelectHeader组件 - 代码质量问题：页面存在多个 bug，包括状态管理混乱、数据刷新逻辑不清晰、存款计划日期切换不稳定等问题
- 维护困难：代码结构复杂（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 组件库