fix
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

This commit is contained in:
SunCheng
2026-02-13 22:49:07 +08:00
parent 803f09cc97
commit 162b6d02dd
17 changed files with 2418 additions and 6 deletions

View File

@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-02-12

View File

@@ -0,0 +1,223 @@
## Context
当前预算页面(`BudgetView.vue`)是一个 1000+ 行的单文件组件,存在以下问题:
- 与 calendarV2、statisticsV2 风格不一致(页头和时间段切换设计不同)
- 数据加载逻辑复杂且存在 bug未覆盖分类、存款计划切换、日期同步问题
- 组件职责不清晰,难以维护
参考其他 v2 页面的经验,我们需要重构预算页面以实现:
1. 统一的页头设计DateSelectHeader
2. 模块化的组件结构(主页面 + 子模块)
3. 清晰的数据流和状态管理
4. 简洁高效的用户体验(月度视图为主)
**技术栈约束**
- Vue 3 Composition API + `<script setup>`
- Vant UI 组件库
- 现有的 `@/api/budget` 接口(不修改后端)
- 复用现有的 DateSelectHeader 组件
## Goals / Non-Goals
**Goals:**
- 创建简洁高效的预算 v2 页面
- 使用统一的 DateSelectHeader 组件
- 修复现有 bug数据加载、日期同步、存款计划切换
- 提升代码可维护性(拆分子模块,清晰职责)
- 保持所有现有业务功能(支出/收入/计划预算管理)
**Non-Goals:**
- 不修改后端 API完全前端重构
- 不改变预算业务逻辑(仅重构实现)
- 不添加新的预算功能(如预算模板、智能推荐等)
- 不添加周/年视图(保持月度视图为主)
- 不删除旧的 BudgetView.vue保留作为回退方案后续独立 PR 删除)
## Decisions
### 1. 页面布局结构:简洁的两层布局
**决策**:采用简洁的两层布局结构
```
- DateSelectHeader (年月选择器 + 左右箭头 + 通知图标)
- van-tabs (支出/收入/计划切换)
- 可滚动内容区域
- 下拉刷新
- 预算内容(统计卡片、图表、列表)
```
**理由**
- ✅ 简洁明了,减少复杂度
- ✅ 预算管理以月度为主,不需要周/年视图
- ✅ 与现有预算页面的逻辑一致,降低用户学习成本
**替代方案**
- ❌ 引入 TimePeriodTabs增加复杂度预算管理不需要多时间段
- ❌ 保留当前布局:无法实现风格统一和 bug 修复
### 2. 组件拆分策略:主页面 + 子模块
**决策**:创建 `budgetV2/Index.vue` 作为主页面,按业务功能拆分子模块
```
budgetV2/
├── Index.vue # 主页面布局、时间段切换、tabs
└── modules/
├── ExpenseBudgetContent.vue # 支出预算内容(统计 + 列表)
├── IncomeBudgetContent.vue # 收入预算内容(统计 + 列表)
└── SavingsBudgetContent.vue # 存款计划内容(列表 + 日期切换)
```
**理由**
- ✅ 主页面职责清晰(只负责布局和状态协调)
- ✅ 子模块独立开发和测试
- ✅ 参考 calendarV2 的 modules 模式
**替代方案**
- ❌ 单文件组件:难以维护(当前问题)
- ❌ 更细粒度拆分(如 ExpenseStats.vue, ExpenseList.vue过度设计增加文件数量
### 3. 数据加载策略:月度数据为主
**决策**:专注于月度数据加载,在主页面集中管理数据加载逻辑
```javascript
// Index.vue
const currentDate = ref(new Date()) // 当前年月
const activeTab = ref(BudgetCategory.Expense) // 当前业务 tab
// 统一数据加载函数(月度)
const loadBudgetData = async () => {
const year = currentDate.value.getFullYear()
const month = currentDate.value.getMonth() + 1
// 调用 getBudgetList, getCategoryStats 等月度 API
}
// 子模块通过 props 接收数据
<ExpenseBudgetContent :budgets="expenseBudgets" :stats="expenseStats" />
```
**理由**
- ✅ 简化逻辑,避免周/年数据的复杂处理
- ✅ 预算管理以月度为核心
- ✅ 统一的错误处理和加载状态
**替代方案**
- ❌ 支持多时间段:增加复杂度,预算场景不需要
- ❌ 子模块独立加载数据:重复逻辑,难以同步
### 4. 存款计划特殊处理:独立的日期切换逻辑
**决策**:存款计划保留现有的独立日期切换功能(卡片底部的前后箭头)
- 不受页头的 `currentDate` 影响
- 每个存款计划独立维护自己的 `periodStart` 状态
- 通过 `getSavingsBudget(year, month, type)` 切换日期
**理由**
- ✅ 符合业务需求(存款计划可能需要查看历史数据)
- ✅ 保持现有功能不变
**风险**
- ⚠️ 两套日期状态可能造成用户困惑
- **缓解措施**:在 UI 上明确区分(页头日期用于支出/收入,卡片底部日期用于存款计划)
### 5. 路由策略:创建新路由,保留旧路由
**决策**
- 创建新路由 `/budget-v2`(指向 `budgetV2/Index.vue`
- 保留旧路由 `/budget`(指向 `BudgetView.vue`
- 在导航中将"预算"菜单指向 `/budget-v2`
**理由**
- ✅ 支持灰度发布(可以快速回退)
- ✅ 便于对比测试
**迁移计划**
- 第一阶段:创建新路由,灰度测试
- 第二阶段:确认稳定后,删除旧路由和旧页面
### 6. 组件复用策略
**决策**:最大化复用现有组件,只在必要时调整
- ✅ 直接复用DateSelectHeader月度模式、BudgetEditPopup、SavingsConfigPopup、BudgetCard、BudgetChartAnalysis
- ⚠️ 不使用 TimePeriodTabs简化设计
**理由**
- 减少重复代码
- 保持 UI 一致性
- 简化维护
## Risks / Trade-offs
### Risk 1: 月度数据加载的稳定性
**风险**:数据加载和状态管理需要正确处理各种边界情况
**缓解措施**
- 参考现有 BudgetView 的数据加载逻辑
- 编写单元测试覆盖边界情况
- 详细的代码注释
### Risk 2: 存款计划的双日期状态可能造成用户困惑
**风险**:页头日期和存款计划的独立日期切换可能让用户困惑
**缓解措施**
- 在 UI 上明确区分(页头日期影响支出/收入,存款计划有独立切换)
- 添加帮助提示或引导
### Risk 3: 旧预算页面的兼容性
**风险**:用户习惯了旧页面的交互方式,可能不适应新页面
**缓解措施**
- 保留旧路由作为回退方案
- 收集用户反馈,快速迭代
### Risk 4: API 兼容性
**风险**:现有 API 可能存在未预见的边界情况
**缓解措施**
- 充分测试所有 API 调用
- 添加完善的错误处理
### Trade-off 1: 新旧页面并存增加维护成本
**权衡**:保留旧页面作为回退方案,但会增加短期维护成本
**接受理由**
- 灰度发布的安全性更重要
- 确认稳定后会删除旧页面
### Trade-off 2: 功能简化
**权衡**:不支持周/年视图,只支持月度
**接受理由**
- 预算管理以月度为核心,周/年视图使用频率低
- 简化设计,降低复杂度和维护成本
- 如果后续有需求,可以独立迭代
## Migration Plan
### 阶段 1开发和本地测试1 天)
1. 创建 `budgetV2/Index.vue` 和子模块
2. 实现基础布局DateSelectHeader + 业务 tabs
3. 实现支出/收入/存款三个 tabs 的内容(月度数据)
4. 本地测试所有功能(重点测试数据加载和日期切换)
### 阶段 2灰度发布1 周)
1. 添加新路由 `/budget-v2`
2. 在导航中将"预算"菜单指向新路由
3. 保留旧路由 `/budget` 作为回退
4. 收集用户反馈,修复 bug
### 阶段 3稳定后清理独立 PR
1. 确认新页面稳定后,删除旧路由
2. 删除 `BudgetView.vue`
3. 清理相关的测试代码
### Rollback 策略
如果新页面出现严重 bug
1. 在导航中将"预算"菜单改回 `/budget`
2. 修复 bug 后再次切换到 `/budget-v2`
## Open Questions
1. **BudgetChartAnalysis 组件是否需要调整?**
- 需要评估当前组件是否完全满足月度数据展示需求
- 是否需要调整图表样式或数据格式
2. **未覆盖分类的展示位置?**
- 当前在页头右侧有警告图标
- 新布局中是否保留此功能?位置在哪里?
3. **是否需要支持左右滑动切换月份?**
- 是否需要与其他 v2 页面保持一致?

View File

@@ -0,0 +1,55 @@
## 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 组件库

View File

@@ -0,0 +1,149 @@
## ADDED Requirements
### Requirement: 支持周/月/年三种时间段切换
预算页面 SHALL 支持周度、月度和年度三种时间段切换,每种时间段加载对应的预算数据。
#### Scenario: 切换到周视图
- **WHEN** 用户切换到周视图
- **THEN** 页面加载当前周的预算数据(周一到周日)
- **AND** 页头显示当前周的描述(如"2024年3月第1周"
#### Scenario: 切换到月视图
- **WHEN** 用户切换到月视图
- **THEN** 页面加载当前月的预算数据
- **AND** 页头显示当前年月(如"2024年3月"
#### Scenario: 切换到年视图
- **WHEN** 用户切换到年视图
- **THEN** 页面加载当前年的预算数据(全年汇总)
- **AND** 页头显示当前年份(如"2024年"
### Requirement: 周度视图以周一为起始日
周度视图 SHALL 以周一作为一周的开始,周日作为结束。
#### Scenario: 计算当前周的开始日期
- **WHEN** 今天是 2024年3月13日星期三
- **THEN** 当前周的开始日期是 2024年3月11日星期一
#### Scenario: 跨月的周视图
- **WHEN** 当前周跨越两个月(如 3月30日 到 4月5日
- **THEN** 页面正确加载这 7 天的预算数据
### Requirement: 月度视图加载整月数据
月度视图 SHALL 加载选中月份从第一天到最后一天的预算数据。
#### Scenario: 加载当前月数据
- **WHEN** 用户选择 2024年3月
- **THEN** 页面加载 2024年3月1日 到 2024年3月31日 的预算数据
#### Scenario: 加载不同月份长度
- **WHEN** 用户选择 2024年2月闰年
- **THEN** 页面加载 2024年2月1日 到 2024年2月29日 的预算数据
### Requirement: 年度视图加载全年数据
年度视图 SHALL 加载选中年份从1月到12月的预算数据汇总。
#### Scenario: 加载当前年数据
- **WHEN** 用户选择 2024年
- **THEN** 页面加载 2024年1月1日 到 2024年12月31日 的预算数据
### Requirement: 时间段切换时自动刷新数据
每次切换时间段时,页面 SHALL 自动重新加载对应的预算数据。
#### Scenario: 从月视图切换到周视图
- **WHEN** 用户从月视图切换到周视图
- **THEN** 页面显示加载状态
- **AND** 自动加载当前周的预算数据
- **AND** 更新所有统计卡片和列表
#### Scenario: 从周视图切换到年视图
- **WHEN** 用户从周视图切换到年视图
- **THEN** 页面显示加载状态
- **AND** 自动加载当前年的预算数据
- **AND** 更新所有统计卡片和列表
### Requirement: 切换时间周期时同步更新时间段
使用页头左右箭头或滑动手势切换时间周期时SHALL 根据当前时间段类型(周/月/年)切换到对应的上一个或下一个周期。
#### Scenario: 月视图下点击左箭头
- **WHEN** 当前是月视图,显示 2024年3月
- **AND** 用户点击页头左箭头
- **THEN** 切换到 2024年2月
- **AND** 加载 2024年2月 的预算数据
#### Scenario: 周视图下点击左箭头
- **WHEN** 当前是周视图,显示 2024年3月11日-17日第11周
- **AND** 用户点击页头左箭头
- **THEN** 切换到 2024年3月4日-10日第10周
- **AND** 加载该周的预算数据
#### Scenario: 年视图下点击左箭头
- **WHEN** 当前是年视图,显示 2024年
- **AND** 用户点击页头左箭头
- **THEN** 切换到 2023年
- **AND** 加载 2023年 的预算数据
#### Scenario: 右滑手势切换到上一个周期
- **WHEN** 用户在内容区域向右滑动超过 50px
- **THEN** 根据当前时间段类型(周/月/年)切换到上一个周期
- **AND** 页面数据自动刷新
### Requirement: 不能切换到未来的时间周期
页面 SHALL 禁止用户切换到未来的时间周期(周/月/年)。
#### Scenario: 当前月禁用下一月
- **WHEN** 当前是 2024年3月且今天是 2024年3月15日
- **THEN** 页头右箭头不可点击
#### Scenario: 当前周禁用下一周
- **WHEN** 当前是本周2024年3月11日-17日且今天在这一周内
- **THEN** 页头右箭头不可点击
#### Scenario: 当前年禁用下一年
- **WHEN** 当前是 2024年且今天是 2024年3月15日
- **THEN** 页头右箭头不可点击
#### Scenario: 左滑到当前周期时不切换
- **WHEN** 用户在当前月/周/年向左滑动
- **THEN** 不切换到下一个周期
### Requirement: 日期选择器根据时间段类型调整
点击页头日期打开的日期选择器SHALL 根据当前时间段类型(月/年)显示对应的选择模式。
#### Scenario: 月视图下打开年月选择器
- **WHEN** 当前是月视图
- **AND** 用户点击页头日期
- **THEN** 打开年月选择器columns-type: ['year', 'month']
#### Scenario: 年视图下打开年份选择器
- **WHEN** 当前是年视图
- **AND** 用户点击页头日期
- **THEN** 打开年份选择器type: 'year'
#### Scenario: 周视图下打开年月选择器
- **WHEN** 当前是周视图
- **AND** 用户点击页头日期
- **THEN** 打开年月选择器(选择月份后自动定位到当月的当前周)
### Requirement: 日期选择器确认后更新页面数据
用户在日期选择器中选择日期并确认后,页面 SHALL 自动更新到选中的时间周期并刷新数据。
#### Scenario: 选择历史月份
- **WHEN** 用户在月视图下打开日期选择器
- **AND** 选择 2023年12月 并确认
- **THEN** 页面切换到 2023年12月
- **AND** 加载 2023年12月 的预算数据
#### Scenario: 选择未来月份时显示提示
- **WHEN** 用户在月视图下打开日期选择器
- **AND** 尝试选择未来的月份(如 2024年4月今天是 2024年3月15日
- **THEN** 显示提示"不能选择未来的月份"
- **AND** 不切换页面日期
### Requirement: 时间段类型持久化(可选)
页面 SHOULD 在用户离开后记住上次选择的时间段类型(周/月/年),下次访问时自动恢复。
#### Scenario: 记住上次选择的时间段
- **WHEN** 用户选择了"周"视图
- **AND** 离开预算页面,然后返回
- **THEN** 页面自动切换到"周"视图(可选功能)

View File

@@ -0,0 +1,226 @@
## ADDED Requirements
### Requirement: 支持三种业务类型的预算数据加载
预算页面 SHALL 支持加载支出预算、收入预算和存款计划三种业务类型的月度数据。
#### Scenario: 加载支出预算数据
- **WHEN** 用户切换到"支出" tab
- **THEN** 页面加载当前月份的支出预算列表
- **AND** 显示支出预算的统计信息(总预算、已支出、余额等)
#### Scenario: 加载收入预算数据
- **WHEN** 用户切换到"收入" tab
- **THEN** 页面加载当前月份的收入预算列表
- **AND** 显示收入预算的统计信息(总目标、已收入、差额等)
#### Scenario: 加载存款计划数据
- **WHEN** 用户切换到"计划" tab
- **THEN** 页面加载当前月份的存款计划列表
- **AND** 显示每个存款计划的统计信息(已存、目标、还差等)
### Requirement: 在主页面集中管理数据加载逻辑
数据加载逻辑 SHALL 在主页面Index.vue集中管理通过 props 传递给子模块。
#### Scenario: 主页面加载数据后传递给子模块
- **WHEN** 主页面完成数据加载
- **THEN** 将数据通过 props 传递给对应的子模块ExpenseBudgetContent、IncomeBudgetContent、SavingsBudgetContent
#### Scenario: 子模块不直接调用 API
- **WHEN** 子模块需要刷新数据
- **THEN** 触发事件通知主页面重新加载数据
- **AND** 主页面加载完成后通过 props 更新子模块
### Requirement: 统一的加载状态和错误处理
页面 SHALL 提供统一的加载状态和错误处理机制。
#### Scenario: 数据加载中显示加载状态
- **WHEN** 页面正在加载预算数据
- **THEN** 显示加载动画van-loading
#### Scenario: 数据加载失败显示错误信息
- **WHEN** 数据加载失败网络错误、API 错误等)
- **THEN** 显示错误提示van-empty with error image
- **AND** 提供"重试"按钮
#### Scenario: 点击重试按钮重新加载数据
- **WHEN** 用户点击"重试"按钮
- **THEN** 清除错误状态
- **AND** 重新加载当前月份和业务 tab 的数据
### Requirement: 支持月度预算数据加载
页面 SHALL 调用 `getBudgetList(year, month)` API 加载指定月份的预算列表。
#### Scenario: 加载当月预算列表
- **WHEN** 用户选择 2024年3月
- **THEN** 调用 `getBudgetList('2024-03-01')` 获取预算列表
- **AND** 按业务类型(支出/收入/存款)分组数据
#### Scenario: 加载月度分类统计
- **WHEN** 用户选择 2024年3月
- **THEN** 调用 `getCategoryStats(category, '2024-03-01')` 获取月度统计
- **AND** 显示月度使用率、趋势等信息
#### Scenario: 支持加载历史月份数据
- **WHEN** 用户选择 2023年12月
- **THEN** 调用 `getBudgetList('2023-12-01')` 获取历史月份的预算数据
- **AND** 正确显示历史数据
### Requirement: 加载未覆盖预算的分类
页面 SHALL 加载未设置预算的分类,并在页头显示警告图标(支出和收入 tabs
#### Scenario: 加载未覆盖分类列表
- **WHEN** 用户在支出 tab 下
- **THEN** 调用 `getUncoveredCategories(category, date)` 获取未设置预算的支出分类
- **AND** 如果存在未覆盖分类,在页头显示警告图标
#### Scenario: 点击警告图标显示未覆盖分类详情
- **WHEN** 用户点击页头的警告图标
- **THEN** 打开弹窗显示未覆盖分类列表
- **AND** 每个分类显示名称、交易笔数和总金额
#### Scenario: 存款计划 tab 不显示警告图标
- **WHEN** 用户切换到"计划" tab
- **THEN** 页头不显示警告图标(存款计划不需要覆盖所有分类)
#### Scenario: 未覆盖分类为空时不显示警告图标
- **WHEN** 当前月份所有分类都已设置预算
- **THEN** 页头不显示警告图标
### Requirement: 加载归档月份的总结
对于历史月份(已归档),页面 SHALL 支持加载和显示归档总结。
#### Scenario: 检测是否为归档月份
- **WHEN** 用户选择的月份早于当前月份
- **THEN** 页头显示归档图标comment-o
#### Scenario: 点击归档图标显示总结
- **WHEN** 用户点击页头的归档图标
- **THEN** 调用 `getArchiveSummary(date)` 获取归档总结
- **AND** 在弹窗中显示 AI 生成的总结内容(富文本)
#### Scenario: 归档总结为空时显示提示
- **WHEN** 用户点击归档图标,但该月份没有总结
- **THEN** 弹窗显示"暂无总结"
#### Scenario: 当前月不显示归档图标
- **WHEN** 用户查看当前月份的预算
- **THEN** 页头不显示归档图标
### Requirement: 存款计划支持独立日期切换
存款计划 SHALL 支持独立的日期切换功能,不受页头日期的影响。
#### Scenario: 存款计划卡片底部显示日期切换按钮
- **WHEN** 用户在"计划" tab 下
- **THEN** 每个存款计划卡片底部显示日期切换按钮(左箭头、日期标签、右箭头)
#### Scenario: 点击左箭头查看上一个周期的存款计划
- **WHEN** 用户点击存款计划卡片的左箭头
- **AND** 该存款计划是月度计划,当前显示 2024年3月
- **THEN** 调用 `getSavingsBudget(year, month, type)` 获取 2024年2月 的数据
- **AND** 更新该卡片的显示内容
#### Scenario: 点击右箭头查看下一个周期的存款计划
- **WHEN** 用户点击存款计划卡片的右箭头
- **AND** 下一个周期不是未来周期
- **THEN** 调用 `getSavingsBudget(year, month, type)` 获取下一个周期的数据
- **AND** 更新该卡片的显示内容
#### Scenario: 当前周期时禁用右箭头
- **WHEN** 存款计划卡片显示的是当前周期
- **THEN** 右箭头按钮不可点击
#### Scenario: 年度存款计划按年切换
- **WHEN** 用户点击年度存款计划的左箭头
- **AND** 当前显示 2024年
- **THEN** 调用 `getSavingsBudget(2023, 0, 'year')` 获取 2023年 的数据
#### Scenario: 月度存款计划按月切换
- **WHEN** 用户点击月度存款计划的左箭头
- **AND** 当前显示 2024年3月
- **THEN** 调用 `getSavingsBudget(2024, 2, 'month')` 获取 2024年2月 的数据
### Requirement: 下拉刷新重新加载所有数据
用户下拉刷新时,页面 SHALL 重新加载当前月份和业务 tab 的所有数据。
#### Scenario: 下拉刷新支出预算数据
- **WHEN** 用户在支出 tab 下下拉刷新
- **THEN** 重新调用 `getBudgetList``getCategoryStats``getUncoveredCategories`
- **AND** 刷新完成后显示提示"刷新成功"
#### Scenario: 下拉刷新存款计划数据
- **WHEN** 用户在计划 tab 下下拉刷新
- **THEN** 重新调用 `getBudgetList` 获取存款计划列表
- **AND** 刷新完成后显示提示"刷新成功"
#### Scenario: 刷新失败显示提示
- **WHEN** 下拉刷新时数据加载失败
- **THEN** 显示提示"刷新失败"
- **AND** 保留之前的数据(如果有)
### Requirement: 月份或业务 tab 切换时自动刷新数据
每次切换月份或业务 tab 时,页面 SHALL 自动刷新对应的数据。
#### Scenario: 切换月份时刷新数据
- **WHEN** 用户从 2024年3月 切换到 2024年2月
- **THEN** 自动加载 2024年2月 的预算数据
- **AND** 清除之前的数据和错误状态
#### Scenario: 从支出 tab 切换到收入 tab 时刷新数据
- **WHEN** 用户从支出 tab 切换到收入 tab
- **THEN** 自动加载收入预算数据和统计信息
- **AND** 保持当前月份不变
#### Scenario: 切换时清除旧的加载状态
- **WHEN** 用户切换月份或 tab
- **THEN** 清除之前的加载状态和错误信息
- **AND** 显示新的加载动画
### Requirement: 数据加载失败不影响其他功能
即使某些数据加载失败,页面 SHALL 仍然允许用户切换月份和业务 tab。
#### Scenario: 统计数据加载失败仍可查看列表
- **WHEN** `getCategoryStats` 加载失败
- **THEN** 显示错误提示
- **AND** 预算列表仍然正常显示(如果 `getBudgetList` 成功)
#### Scenario: 未覆盖分类加载失败不影响主功能
- **WHEN** `getUncoveredCategories` 加载失败
- **THEN** 页头不显示警告图标
- **AND** 其他功能(预算列表、统计等)仍然正常工作
#### Scenario: 部分数据加载失败时可重试
- **WHEN** 部分数据加载失败(如统计数据)
- **THEN** 用户可以点击"重试"按钮
- **AND** 只重新加载失败的部分(而非所有数据)
### Requirement: 支持全局事件刷新数据
页面 SHALL 监听全局 'transactions-changed' 事件,自动刷新数据。
#### Scenario: 接收全局事件后刷新数据
- **WHEN** 用户在其他页面添加或修改了预算记录
- **AND** 触发 'transactions-changed' 事件
- **THEN** 预算页面(如果处于激活状态)自动刷新数据
#### Scenario: 页面被缓存时不响应事件
- **WHEN** 预算页面被 keep-alive 缓存(不在当前显示)
- **AND** 触发 'transactions-changed' 事件
- **THEN** 不立即刷新数据(节省性能)
- **AND** 当用户返回预算页面时onActivated再刷新数据
### Requirement: 并发加载多个数据源
页面 SHALL 并发加载多个数据源(预算列表、统计、未覆盖分类等),提升加载速度。
#### Scenario: 并发加载预算列表和统计数据
- **WHEN** 用户切换到支出 tab
- **THEN** 同时调用 `getBudgetList``getCategoryStats``getUncoveredCategories`
- **AND** 等待所有请求完成后隐藏加载状态
#### Scenario: 某个请求失败不阻塞其他请求
- **WHEN** `getUncoveredCategories` 请求失败
- **THEN** 其他请求(`getBudgetList``getCategoryStats`)仍然继续
- **AND** 页面显示部分数据
#### Scenario: 所有请求失败显示错误
- **WHEN** 所有数据加载请求都失败
- **THEN** 显示错误提示和"重试"按钮
- **AND** 不显示任何数据

View File

@@ -0,0 +1,125 @@
## 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-pickercolumns-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 的数据

View File

@@ -0,0 +1,220 @@
## 1. 项目结构准备
- [x] 1.1 创建 `Web/src/views/budgetV2/` 目录
- [x] 1.2 创建 `Web/src/views/budgetV2/modules/` 子目录
- [x] 1.3 创建 `Web/src/views/budgetV2/Index.vue` 主页面文件(空模板)
- [x] 1.4 创建 `Web/src/views/budgetV2/modules/ExpenseBudgetContent.vue` 支出预算子模块(空模板)
- [x] 1.5 创建 `Web/src/views/budgetV2/modules/IncomeBudgetContent.vue` 收入预算子模块(空模板)
- [x] 1.6 创建 `Web/src/views/budgetV2/modules/SavingsBudgetContent.vue` 存款计划子模块(空模板)
## 2. 路由配置
- [x] 2.1 在 `Web/src/router/index.js` 中添加 `/budget-v2` 路由,指向 `budgetV2/Index.vue`
- [x] 2.2 配置路由的 `name: 'BudgetV2'``meta` 信息(用于 keep-alive
- [x] 2.3 保留旧路由 `/budget` 指向 `BudgetView.vue`(作为回退方案)
- [x] 2.4 在导航配置中将"预算"菜单指向新路由 `/budget-v2`
## 3. 主页面布局实现
- [x] 3.1 在 `Index.vue` 中引入 `DateSelectHeader` 组件
- [x] 3.2 添加 `van-tabs` 组件(支出/收入/计划三个 tab
- [x] 3.3 添加可滚动内容区域(包含 `van-pull-refresh`
- [x] 3.4 设置页面容器样式(`page-container-flex` + 底部安全距离)
- [x] 3.5 配置 `defineOptions({ name: 'BudgetV2View' })` 用于 keep-alive
## 4. 状态管理和数据定义
- [x] 4.1 定义当前日期状态 `currentDate = ref(new Date())`
- [x] 4.2 定义业务 tab 状态 `activeTab = ref(BudgetCategory.Expense)`
- [x] 4.3 定义数据状态(`expenseBudgets``incomeBudgets``savingsBudgets``overallStats`
- [x] 4.4 定义 UI 状态(`loading``refreshing``hasError``errorMessage`
- [x] 4.5 定义未覆盖分类状态 `uncoveredCategories = ref([])`
- [x] 4.6 定义归档总结状态(`showSummaryPopup``archiveSummary`
- [x] 4.7 定义日期选择器状态(`showDatePicker``pickerDate`
## 5. DateSelectHeader 集成
- [x] 5.1 配置 DateSelectHeader 的 `type` 属性为 'month'
- [x] 5.2 绑定 DateSelectHeader 的 `current-date` 属性到 `currentDate`
- [x] 5.3 监听 DateSelectHeader 的 `@prev` 事件,实现 `handlePrevMonth()` 方法
- [x] 5.4 监听 DateSelectHeader 的 `@next` 事件,实现 `handleNextMonth()` 方法
- [x] 5.5 监听 DateSelectHeader 的 `@jump` 事件,打开日期选择器
- [x] 5.6 在页头右侧添加未覆盖分类警告图标(根据 `uncoveredCategories` 显示)
- [x] 5.7 在页头右侧添加归档图标(历史月份显示)
## 6. 业务 tabs 实现
- [x] 6.1 配置 `van-tabs` 的三个 tab支出、收入、计划
- [x] 6.2 绑定 `van-tabs``v-model:active``activeTab`
- [x] 6.3 监听 `activeTab` 的变化,触发数据刷新(使用 `watch`
- [x] 6.4 在每个 tab 中引入对应的子模块组件
## 7. 数据加载核心逻辑
- [x] 7.1 实现 `loadBudgetData()` 统一数据加载函数(月度)
- [x] 7.2 实现 `loadMonthlyData(year, month)` 加载月度预算数据
- [x] 7.3 实现 `loadCategoryStats()` 加载分类统计数据
- [x] 7.4 实现 `loadUncoveredCategories()` 加载未覆盖分类(仅支出和收入 tab
- [x] 7.5 实现 `loadArchiveSummary()` 加载归档总结(历史月份)
- [x] 7.6 使用 `Promise.allSettled()` 并发加载多个数据源
## 8. 月份切换逻辑
- [x] 8.1 实现 `handlePrevMonth()` 方法(切换到上一个月)
- [x] 8.2 实现 `handleNextMonth()` 方法(切换到下一个月,禁止未来月份)
- [x] 8.3 实现 `isCurrentMonth()` 方法(判断是否为当前月,禁用右箭头)
- [x] 8.4 在月份切换后自动调用 `loadBudgetData()` 刷新数据
## 9. 日期选择器实现
- [x] 9.1 添加 `van-popup` + `van-date-picker` 组件
- [x] 9.2 配置日期选择器为年月模式columns-type: ['year', 'month']
- [x] 9.3 实现 `onDatePickerConfirm()` 方法(确认日期选择)
- [x] 9.4 在日期选择器中限制不能选择未来的月份
- [x] 9.5 选择日期后自动调用 `loadBudgetData()` 刷新数据
## 10. 左右滑动手势实现
- [x] 10.1 定义触摸状态(`touchStartX`, `touchStartY`, `touchEndX`, `touchEndY`
- [x] 10.2 实现 `handleTouchStart()` 方法(记录触摸起始位置)
- [x] 10.3 实现 `handleTouchMove()` 方法(记录触摸移动位置)
- [x] 10.4 实现 `handleTouchEnd()` 方法(判断滑动方向和距离)
- [x] 10.5 在 `handleTouchEnd()` 中根据滑动方向调用 `handlePrevMonth()``handleNextMonth()`
- [x] 10.6 设置最小滑动距离阈值50px避免误触
- [x] 10.7 确保垂直滑动(滚动内容)不触发月份切换
## 11. 下拉刷新实现
- [x] 11.1 配置 `van-pull-refresh` 组件,绑定 `v-model="refreshing"`
- [x] 11.2 实现 `onRefresh()` 方法(清除错误状态,重新加载数据)
- [x] 11.3 在数据加载完成后设置 `refreshing = false`
- [x] 11.4 显示刷新成功提示
## 12. 加载状态和错误处理
- [x] 12.1 在数据加载中显示 `van-loading` 组件
- [x] 12.2 在数据加载失败时显示 `van-empty` 组件(包含"重试"按钮)
- [x] 12.3 实现 `retryLoad()` 方法(清除错误状态,重新加载数据)
- [x] 12.4 在所有 API 调用中添加 try-catch 错误处理
- [x] 12.5 使用 `Promise.allSettled()` 并发加载,避免单点失败
## 13. 支出预算子模块实现
- [x] 13.1 在 `ExpenseBudgetContent.vue` 中定义 props`budgets`, `stats`, `uncoveredCategories`
- [x] 13.2 复用 `BudgetChartAnalysis` 组件显示统计图表
- [x] 13.3 复用 `BudgetCard` 组件显示预算列表
- [x] 13.4 使用 `van-swipe-cell` 实现左滑删除功能
- [x] 13.5 点击预算卡片打开 `BudgetEditPopup` 编辑弹窗
- [x] 13.6 添加悬浮按钮(`van-floating-bubble`)打开预算列表弹窗
- [x] 13.7 在预算列表弹窗中显示所有支出预算
## 14. 收入预算子模块实现
- [x] 14.1 在 `IncomeBudgetContent.vue` 中定义 props`budgets`, `stats`, `uncoveredCategories`
- [x] 14.2 复用 `BudgetChartAnalysis` 组件显示统计图表
- [x] 14.3 复用 `BudgetCard` 组件显示预算列表(调整显示字段:已收入、目标、差额)
- [x] 14.4 使用 `van-swipe-cell` 实现左滑删除功能
- [x] 14.5 点击预算卡片打开 `BudgetEditPopup` 编辑弹窗
- [x] 14.6 添加悬浮按钮打开预算列表弹窗
## 15. 存款计划子模块实现
- [x] 15.1 在 `SavingsBudgetContent.vue` 中定义 props`budgets`
- [x] 15.2 复用 `BudgetCard` 组件显示存款计划列表(调整显示字段:已存、目标、还差)
- [x] 15.3 在每个存款计划卡片底部添加日期切换按钮(左箭头、日期标签、右箭头)
- [x] 15.4 实现 `handleSavingsNav(budget, offset)` 方法(切换存款计划的日期)
- [x] 15.5 实现 `getSavingsDateLabel(budget)` 方法(格式化存款计划的日期标签)
- [x] 15.6 实现 `disabledSavingsNextNav(budget)` 方法(判断是否禁用右箭头)
- [x] 15.7 调用 `getSavingsBudget(year, month, type)` API 切换存款计划日期
- [x] 15.8 在页头右侧显示储蓄配置图标,点击打开 `SavingsConfigPopup`
## 16. 未覆盖分类弹窗实现
- [x] 16.1 复用 `PopupContainer` 组件创建未覆盖分类弹窗
- [x] 16.2 在弹窗中显示未覆盖分类列表(分类名称、交易笔数、总金额)
- [x] 16.3 使用卡片样式展示每个分类(`uncovered-item`
- [x] 16.4 在弹窗底部添加"我知道了"按钮关闭弹窗
## 17. 归档总结弹窗实现
- [x] 17.1 复用 `PopupContainer` 组件创建归档总结弹窗
- [x] 17.2 调用 `getArchiveSummary(date)` API 获取归档总结
- [x] 17.3 在弹窗中显示富文本内容(使用 `v-html`
- [x] 17.4 如果没有总结,显示"暂无总结"提示
## 18. 预算编辑和删除功能
- [x] 18.1 引入 `BudgetEditPopup` 组件
- [x] 18.2 点击悬浮按钮打开 `BudgetEditPopup`(新增预算)
- [x] 18.3 点击预算卡片打开 `BudgetEditPopup`(编辑预算)
- [x] 18.4 在 `BudgetEditPopup``@success` 事件中调用 `loadBudgetData()` 刷新数据
- [x] 18.5 实现 `handleDelete(budget)` 方法(删除预算)
- [x] 18.6 在删除前显示确认对话框(`showConfirmDialog`
- [x] 18.7 调用 `deleteBudget(id)` API 删除预算
- [x] 18.8 删除成功后调用 `loadBudgetData()` 刷新数据
## 19. 储蓄配置功能
- [x] 19.1 引入 `SavingsConfigPopup` 组件
- [x] 19.2 在存款计划 tab 的页头右侧显示配置图标
- [x] 19.3 点击配置图标打开 `SavingsConfigPopup`
- [x] 19.4 在 `SavingsConfigPopup``@success` 事件中调用 `loadBudgetData()` 刷新数据
## 20. 全局事件监听
- [x] 20.1 在 `onMounted()` 中监听 'transactions-changed' 全局事件
- [x] 20.2 实现 `handleTransactionsChanged()` 方法(刷新数据)
- [x] 20.3 在 `onActivated()` 中处理从缓存恢复时的数据刷新
- [x] 20.4 在 `onBeforeUnmount()` 中移除事件监听器
## 21. 样式和主题
- [x] 21.1 添加页面容器样式(`.budget-v2-wrapper`
- [x] 21.2 添加可滚动内容区域样式(`.budget-scroll-content`
- [x] 21.3 添加底部安全距离样式(`calc(95px + env(safe-area-inset-bottom))`
- [x] 21.4 配置主题变量(使用 `var(--van-primary-color)` 等)
- [x] 21.5 添加深色模式支持(通过 `van-config-provider`
- [x] 21.6 优化移动端滚动体验(`-webkit-overflow-scrolling: touch`
## 22. 辅助函数实现
- [x] 22.1 实现 `formatMoney(val)` 方法(格式化金额显示)
- [x] 22.2 实现 `getPeriodLabel(type)` 方法(获取周期标签:本月/本年)
- [x] 22.3 实现 `getProgressColor(budget)` 方法(计算进度条颜色)
- [x] 22.4 实现 `isArchiveMonth(date)` 方法(判断是否为历史月份)
## 23. 测试和调试
- [x] 23.1 测试页面初始加载(默认当前月、支出 tab
- [x] 23.2 测试月份切换(左右箭头、滑动手势)
- [x] 23.3 测试支出/收入/计划 tab 切换
- [x] 23.4 测试左右滑动手势切换月份
- [x] 23.5 测试下拉刷新功能
- [x] 23.6 测试日期选择器(选择历史月份、禁止未来月份)
- [x] 23.7 测试未覆盖分类功能(警告图标、弹窗)
- [x] 23.8 测试归档总结功能(历史月份)
- [x] 23.9 测试存款计划的独立日期切换
- [x] 23.10 测试预算新增、编辑、删除功能
- [x] 23.11 测试储蓄配置功能
- [x] 23.12 测试错误处理API 失败、网络错误)
- [x] 23.13 测试加载状态显示
- [x] 23.14 测试 keep-alive 缓存和全局事件刷新
- [x] 23.15 测试深色模式切换
## 24. 优化和完善
- [x] 24.1 检查并优化数据加载性能(使用 `Promise.allSettled` 并发加载)
- [x] 24.2 添加必要的加载动画和过渡效果
- [x] 24.3 添加代码注释(业务逻辑复杂的部分)
- [x] 24.4 检查并修复 ESLint 警告
- [x] 24.5 验证所有 API 调用的错误处理
- [x] 24.6 验证移动端适配(安全距离、触摸手势)
## 25. 文档和发布
- [x] 25.1 更新 README.md如果需要
- [ ] 25.2 创建 PR 并填写详细的变更说明
- [ ] 25.3 在 PR 中添加测试截图或录屏
- [ ] 25.4 请求代码审查
- [ ] 25.5 合并 PR 并部署到测试环境
- [ ] 25.6 收集用户反馈并快速迭代

View File

@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-02-13