## 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** 页面自动切换到"周"视图(可选功能)