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

1. 移除旧组件

• 1.1 删除 BalanceView.vue 中的 <van-nav-bar> 组件及相关代码
• 1.2 删除 <van-tabs> 组件及相关代码
• 1.3 清理不再使用的样式规则(:deep(.van-nav-bar) 等)

2. 实现自定义头部

• 2.1 创建 <header> 标签结构,包含标题文字区域
• 2.2 实现右侧操作按钮区域,支持动态显示
• 2.3 添加 v-if 逻辑:邮件页显示"立即同步"按钮
• 2.4 添加 v-if 逻辑:消息页显示"标记已读"图标
• 2.5 编写头部样式:字号 var(--font-2xl),颜色 var(--text-primary),内边距 8px 24px
• 2.6 确保背景透明:background: transparent

3. 实现分段控制器

• 3.1 创建分段控制器容器 .segmented-control,包含三个选项(账单/邮件/消息)
• 3.2 实现 .tab-item 样式:flex 布局,圆角 6px,高度 40px
• 3.3 实现 .tab-item.active 样式:背景 var(--segmented-active-bg),投影效果
• 3.4 添加点击事件处理:更新 tabActive 响应式变量
• 3.5 添加 hover 效果:未选中项显示半透明背景
• 3.6 添加过渡动画:transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)

4. 样式变量检查

• 4.1 验证 theme.css 中存在 --segmented-bg 变量
• 4.2 验证 theme.css 中存在 --segmented-active-bg 变量
• 4.3 如变量缺失,添加兼容值或定义新变量

5. 移动端优化

• 5.1 确保分段控制器每个选项的最小高度为 40px
• 5.2 添加 -webkit-tap-highlight-color: transparent 移除触控高亮
• 5.3 添加 user-select: none 防止文字选中

6. 功能测试

• 6.1 测试默认加载:账单页为默认选中
• 6.2 测试点击切换:三个标签页能正常切换
• 6.3 测试路由参数:URL 参数 ?tab=email 和 ?tab=message 能正确切换
• 6.4 测试同步按钮:邮件页的"立即同步"按钮功能正常
• 6.5 测试标记已读:消息页的标记已读图标功能正常
• 6.6 测试主题切换:亮色和暗色主题样式正常

7. 视觉验证

• 7.1 对比统计页面,确认头部样式一致(字号、颜色、间距)
• 7.2 对比统计页面,确认分段控制器样式一致(背景、圆角、投影)
• 7.3 检查移动端显示:确保布局在小屏幕上正常
• 7.4 检查动画流畅度:确保切换动画无卡顿