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