2cf19a45e5
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 23s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
52 lines
2.3 KiB
Markdown
52 lines
2.3 KiB
Markdown
## 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 检查动画流畅度:确保切换动画无卡顿
|