1

openspec/changes/archive/2026-02-19-unify-balance-page-header-tabs/.openspec.yaml

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

openspec/changes/archive/2026-02-19-unify-balance-page-header-tabs/design.md

@@ -0,0 +1,120 @@
+## Context
+
+余额页面(BalanceView.vue)当前使用 Vant UI 库的默认组件:`van-nav-bar` 作为头部导航,`van-tabs type="card"` 作为标签页切换。而统计页面(statisticsV2)已经采用了更现代的自定义设计:使用 `DateSelectHeader` 组件作为头部,`TimePeriodTabs` 作为分段控制器。
+
+现有代码结构:
+- `Web/src/views/BalanceView.vue` - 主要页面组件
+- `Web/src/components/DateSelectHeader.vue` - 统计页面头部组件(包含日期切换)
+- `Web/src/components/TimePeriodTabs.vue` - 分段控制器组件(周/月/年)
+- `Web/src/assets/theme.css` - CSS 变量定义
+
+余额页面的三个标签页(账单/邮件/消息)需要保留的特定功能:
+- 邮件页:右上角"立即同步"按钮
+- 消息页:右上角"标记全部已读"图标
+
+## Goals / Non-Goals
+
+**Goals:**
+- 统一余额页面和统计页面的视觉风格
+- 使用分段控制器(segmented control)替代卡片式标签
+- 创建简化版头部布局(仅文字标题,无日期切换)
+- 保留所有现有功能(同步按钮、标记已读图标等)
+- 复用现有样式变量,确保主题切换(亮色/暗色)正常工作
+
+**Non-Goals:**
+- 不修改统计页面的任何代码
+- 不改变余额页面的业务逻辑
+- 不创建新的通用组件(直接在 BalanceView.vue 内实现)
+- 不调整底层数据加载逻辑
+
+## Decisions
+
+### 决策 1: 组件复用策略
+
+**选择**: 直接在 BalanceView.vue 内实现简化版头部和标签页,不复用 DateSelectHeader 或 TimePeriodTabs
+
+**理由**:
+- DateSelectHeader 包含日期切换逻辑,余额页面不需要
+- TimePeriodTabs 是三个固定选项(周/月/年),余额页面需要不同的三个选项(账单/邮件/消息)
+- 直接实现可以更灵活地保留右上角操作按钮(同步、标记已读)
+- 代码量较小,不值得抽象为通用组件
+
+**备选方案**:
+- ❌ 修改 TimePeriodTabs 支持自定义选项 → 增加组件复杂度,影响统计页面
+- ❌ 创建新的通用组件 BalanceTabsComponent → 过度设计,只有一个使用场景
+
+### 决策 2: 头部布局结构
+
+**选择**: 采用 `<header>` 标签 + 标题文字 + 右侧操作按钮的扁平布局
+
+**理由**:
+- 与 DateSelectHeader 的视觉效果一致
+- 灵活支持动态显示右侧按钮(根据当前标签页)
+- 无需复杂的嵌套结构
+
+**样式规范**:
+- 使用 `var(--font-2xl)` 作为标题字号
+- 使用 `var(--text-primary)` 作为标题颜色
+- 透明背景:`background: transparent`
+- 内边距:`padding: 8px 24px`
+
+### 决策 3: 分段控制器实现
+
+**选择**: 复制 TimePeriodTabs 的 CSS 结构,修改选项数据
+
+**理由**:
+- 确保视觉效果 100% 一致
+- 避免重复造轮子
+- 样式已经过亮色/暗色主题测试
+
+**关键样式**:
+```scss
+.segmented-control {
+  display: flex;
+  background: var(--segmented-bg);
+  border-radius: 8px;
+  padding: 4px;
+  gap: 4px;
+  height: 40px;
+}
+
+.tab-item.active {
+  background: var(--segmented-active-bg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+```
+
+### 决策 4: 右侧操作按钮布局
+
+**选择**: 使用 `v-if` 条件渲染,根据 `tabActive` 动态显示不同按钮
+
+**理由**:
+- 简洁明了,易于维护
+- 与现有代码风格一致
+- 性能开销可忽略
+
+**实现**:
+```vue
+<van-button v-if="tabActive === 'email'" @click="...">立即同步</van-button>
+<van-icon v-if="tabActive === 'message'" name="passed" @click="..."/>
+```
+
+## Risks / Trade-offs
+
+### 风险 1: CSS 变量未定义
+**风险**: `theme.css` 中可能缺少 `--segmented-bg` 或 `--segmented-active-bg` 变量  
+**缓解**: 实施前检查变量定义,必要时添加兼容值
+
+### 风险 2: 移动端触控区域
+**风险**: 自定义按钮的触控区域可能不如 Vant 组件优化  
+**缓解**: 确保按钮最小高度 44px,添加 `-webkit-tap-highlight-color: transparent`
+
+### 权衡 1: 代码复用 vs 灵活性
+**权衡**: 选择在 BalanceView.vue 内实现而非抽象组件  
+**影响**: 如果未来其他页面需要类似布局,需要重复代码  
+**判断**: 可接受 - 当前只有一个使用场景,过早抽象会增加维护成本
+
+### 权衡 2: 视觉一致性 vs 功能保留
+**权衡**: 需要在统一样式的同时保留特定功能按钮  
+**影响**: 头部布局不能完全照搬 DateSelectHeader  
+**判断**: 功能优先 - 同步和标记已读是核心功能,不能牺牲

openspec/changes/archive/2026-02-19-unify-balance-page-header-tabs/proposal.md

@@ -0,0 +1,34 @@
+## Why
+
+当前余额页面(BalanceView.vue)使用的是 Vant 默认的 `van-nav-bar` 和 `van-tabs type="card"` 样式,与统计页面(statisticsV2)的现代化分段控制器设计不一致,导致用户在不同页面间切换时体验不连贯。统一两个页面的视觉风格能提升整体应用的一致性和现代感。
+
+## What Changes
+
+- 移除余额页面的 `<van-nav-bar>` 组件
+- 新增自定义文字标题区域(简化版头部,不含日期切换功能)
+- 将 `<van-tabs type="card">` 替换为分段控制器样式(segmented control)
+- 标签文字调整为:账单 / 邮件 / 消息
+- 保留现有功能:同步按钮(邮件页)、标记已读图标(消息页)
+- 样式与统计页面保持一致,使用相同的 CSS 变量和设计规范
+
+## Capabilities
+
+### New Capabilities
+- `balance-segmented-tabs`: 余额页面的分段控制器标签组件,支持账单/邮件/消息三个标签页切换,样式与统计页面一致
+
+### Modified Capabilities
+- `balance-page-header`: 余额页面头部布局从 Vant 导航栏改为自定义文字标题布局,与统计页面视觉风格保持一致
+
+## Impact
+
+**受影响文件**:
+- `Web/src/views/BalanceView.vue` - 主要修改文件,调整头部和标签页结构
+
+**样式依赖**:
+- 复用 `@/assets/theme.css` 中的 CSS 变量
+- 参考 `Web/src/components/DateSelectHeader.vue` 和 `Web/src/components/TimePeriodTabs.vue` 的样式规范
+
+**用户体验影响**:
+- ✅ 正向影响:界面更统一、现代化,视觉体验更连贯
+- ✅ 无破坏性变更:所有现有功能保持不变,仅样式调整
+- ✅ 移动端触控体验优化:分段控制器更符合移动端交互习惯

openspec/changes/archive/2026-02-19-unify-balance-page-header-tabs/specs/balance-page-header/spec.md

@@ -0,0 +1,38 @@
+## MODIFIED 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/changes/archive/2026-02-19-unify-balance-page-header-tabs/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)

openspec/changes/archive/2026-02-19-unify-balance-page-header-tabs/tasks.md

@@ -0,0 +1,51 @@
+## 1. 移除旧组件
+
+- [x] 1.1 删除 BalanceView.vue 中的 `<van-nav-bar>` 组件及相关代码
+- [x] 1.2 删除 `<van-tabs>` 组件及相关代码
+- [x] 1.3 清理不再使用的样式规则(`:deep(.van-nav-bar)` 等)
+
+## 2. 实现自定义头部
+
+- [x] 2.1 创建 `<header>` 标签结构,包含标题文字区域
+- [x] 2.2 实现右侧操作按钮区域,支持动态显示
+- [x] 2.3 添加 `v-if` 逻辑:邮件页显示"立即同步"按钮
+- [x] 2.4 添加 `v-if` 逻辑:消息页显示"标记已读"图标
+- [x] 2.5 编写头部样式:字号 `var(--font-2xl)`,颜色 `var(--text-primary)`,内边距 `8px 24px`
+- [x] 2.6 确保背景透明:`background: transparent`
+
+## 3. 实现分段控制器
+
+- [x] 3.1 创建分段控制器容器 `.segmented-control`,包含三个选项(账单/邮件/消息)
+- [x] 3.2 实现 `.tab-item` 样式:flex 布局,圆角 6px,高度 40px
+- [x] 3.3 实现 `.tab-item.active` 样式:背景 `var(--segmented-active-bg)`,投影效果
+- [x] 3.4 添加点击事件处理:更新 `tabActive` 响应式变量
+- [x] 3.5 添加 hover 效果:未选中项显示半透明背景
+- [x] 3.6 添加过渡动画:`transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`
+
+## 4. 样式变量检查
+
+- [x] 4.1 验证 `theme.css` 中存在 `--segmented-bg` 变量
+- [x] 4.2 验证 `theme.css` 中存在 `--segmented-active-bg` 变量
+- [x] 4.3 如变量缺失,添加兼容值或定义新变量
+
+## 5. 移动端优化
+
+- [x] 5.1 确保分段控制器每个选项的最小高度为 40px
+- [x] 5.2 添加 `-webkit-tap-highlight-color: transparent` 移除触控高亮
+- [x] 5.3 添加 `user-select: none` 防止文字选中
+
+## 6. 功能测试
+
+- [x] 6.1 测试默认加载:账单页为默认选中
+- [x] 6.2 测试点击切换:三个标签页能正常切换
+- [x] 6.3 测试路由参数:URL 参数 `?tab=email` 和 `?tab=message` 能正确切换
+- [x] 6.4 测试同步按钮:邮件页的"立即同步"按钮功能正常
+- [x] 6.5 测试标记已读:消息页的标记已读图标功能正常
+- [x] 6.6 测试主题切换:亮色和暗色主题样式正常
+
+## 7. 视觉验证
+
+- [x] 7.1 对比统计页面,确认头部样式一致(字号、颜色、间距)
+- [x] 7.2 对比统计页面,确认分段控制器样式一致(背景、圆角、投影)
+- [x] 7.3 检查移动端显示:确保布局在小屏幕上正常
+- [x] 7.4 检查动画流畅度:确保切换动画无卡顿

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)