1

openspec/specs/balance-page-header/spec.md

@@ -0,0 +1,38 @@
+## ADDED Requirements
+
+### Requirement: 页面头部布局
+余额页面 SHALL 使用自定义头部布局,包含标题文字和右侧操作按钮区域,替代原有的 `van-nav-bar` 组件。
+
+#### Scenario: 头部显示
+- **WHEN** 用户打开余额页面
+- **THEN** 系统在顶部显示"账单"文字标题(不带返回按钮或边框)
+
+#### Scenario: 头部样式
+- **WHEN** 用户查看头部区域
+- **THEN** 系统使用 `var(--font-2xl)` 字号和 `var(--text-primary)` 颜色显示标题,背景透明
+
+### Requirement: 右侧操作按钮
+头部右侧 SHALL 根据当前选中的标签页动态显示不同的操作按钮。
+
+#### Scenario: 邮件页同步按钮
+- **WHEN** 用户切换到"邮件"标签
+- **THEN** 系统在头部右侧显示"立即同步"按钮
+
+#### Scenario: 消息页标记已读图标
+- **WHEN** 用户切换到"消息"标签
+- **THEN** 系统在头部右侧显示"标记全部已读"图标
+
+#### Scenario: 账单页无操作按钮
+- **WHEN** 用户切换到"账单"标签
+- **THEN** 系统不在头部右侧显示任何操作按钮
+
+### Requirement: 视觉风格一致性
+头部布局 SHALL 与统计页面的 `DateSelectHeader` 组件保持视觉风格一致。
+
+#### Scenario: 内边距规范
+- **WHEN** 用户查看头部区域
+- **THEN** 系统使用 `padding: 8px 24px` 作为头部内边距
+
+#### Scenario: 主题适配
+- **WHEN** 用户切换应用主题(亮色/暗色)
+- **THEN** 头部文字颜色自动更新为对应主题的 `var(--text-primary)` 值

openspec/specs/balance-segmented-tabs/spec.md

@@ -0,0 +1,45 @@
+## ADDED Requirements
+
+### Requirement: 分段控制器布局
+余额页面的标签切换 SHALL 使用分段控制器(segmented control)样式,包含三个选项:账单、邮件、消息。
+
+#### Scenario: 分段控制器显示
+- **WHEN** 用户打开余额页面
+- **THEN** 系统显示分段控制器,包含"账单"、"邮件"、"消息"三个选项
+
+#### Scenario: 默认选中账单
+- **WHEN** 用户首次打开余额页面且 URL 无 tab 参数
+- **THEN** 系统默认选中"账单"标签
+
+### Requirement: 标签页切换交互
+用户 SHALL 能够点击分段控制器中的任意选项切换标签页。
+
+#### Scenario: 点击切换标签
+- **WHEN** 用户点击"邮件"选项
+- **THEN** 系统切换到邮件视图,并更新分段控制器的选中状态
+
+#### Scenario: 路由参数切换
+- **WHEN** 用户通过底部导航栏跳转到余额页面且携带 `?tab=message` 参数
+- **THEN** 系统自动选中"消息"标签
+
+### Requirement: 视觉样式一致性
+分段控制器 SHALL 使用与统计页面相同的样式规范和 CSS 变量。
+
+#### Scenario: 亮色主题样式
+- **WHEN** 应用处于亮色主题
+- **THEN** 分段控制器使用 `var(--segmented-bg)` 作为背景色,选中项使用 `var(--segmented-active-bg)`
+
+#### Scenario: 暗色主题样式
+- **WHEN** 应用处于暗色主题
+- **THEN** 分段控制器自动应用暗色主题对应的 CSS 变量值
+
+### Requirement: 移动端触控体验
+分段控制器 SHALL 针对移动端优化触控体验。
+
+#### Scenario: 触控区域
+- **WHEN** 用户在移动设备上点击选项
+- **THEN** 系统确保每个选项的可点击区域高度不小于 40px
+
+#### Scenario: 触控反馈
+- **WHEN** 用户点击未选中的选项
+- **THEN** 系统显示背景色过渡动画(0.3s cubic-bezier)