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
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
@@ -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** 页面自动切换到"周"视图（可选功能）
|
||||
@@ -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** 不显示任何数据
|
||||
@@ -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-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 的数据
|
||||
Reference in New Issue
Block a user