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
1.6 KiB
1.6 KiB
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的样式规范
用户体验影响:
- ✅ 正向影响:界面更统一、现代化,视觉体验更连贯
- ✅ 无破坏性变更:所有现有功能保持不变,仅样式调整
- ✅ 移动端触控体验优化:分段控制器更符合移动端交互习惯