## 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 检查动画流畅度:确保切换动画无卡顿