2cf19a45e5
4.2 KiB
Context
余额页面(BalanceView.vue)当前使用 Vant UI 库的默认组件:van-nav-bar 作为头部导航,van-tabs type="card" 作为标签页切换。而统计页面(statisticsV2)已经采用了更现代的自定义设计:使用 DateSelectHeader 组件作为头部,TimePeriodTabs 作为分段控制器。
现有代码结构:
Web/src/views/BalanceView.vue- 主要页面组件Web/src/components/DateSelectHeader.vue- 统计页面头部组件(包含日期切换)Web/src/components/TimePeriodTabs.vue- 分段控制器组件(周/月/年)Web/src/assets/theme.css- CSS 变量定义
余额页面的三个标签页(账单/邮件/消息)需要保留的特定功能:
- 邮件页:右上角"立即同步"按钮
- 消息页:右上角"标记全部已读"图标
Goals / Non-Goals
Goals:
- 统一余额页面和统计页面的视觉风格
- 使用分段控制器(segmented control)替代卡片式标签
- 创建简化版头部布局(仅文字标题,无日期切换)
- 保留所有现有功能(同步按钮、标记已读图标等)
- 复用现有样式变量,确保主题切换(亮色/暗色)正常工作
Non-Goals:
- 不修改统计页面的任何代码
- 不改变余额页面的业务逻辑
- 不创建新的通用组件(直接在 BalanceView.vue 内实现)
- 不调整底层数据加载逻辑
Decisions
决策 1: 组件复用策略
选择: 直接在 BalanceView.vue 内实现简化版头部和标签页,不复用 DateSelectHeader 或 TimePeriodTabs
理由:
- DateSelectHeader 包含日期切换逻辑,余额页面不需要
- TimePeriodTabs 是三个固定选项(周/月/年),余额页面需要不同的三个选项(账单/邮件/消息)
- 直接实现可以更灵活地保留右上角操作按钮(同步、标记已读)
- 代码量较小,不值得抽象为通用组件
备选方案:
- ❌ 修改 TimePeriodTabs 支持自定义选项 → 增加组件复杂度,影响统计页面
- ❌ 创建新的通用组件 BalanceTabsComponent → 过度设计,只有一个使用场景
决策 2: 头部布局结构
选择: 采用 <header> 标签 + 标题文字 + 右侧操作按钮的扁平布局
理由:
- 与 DateSelectHeader 的视觉效果一致
- 灵活支持动态显示右侧按钮(根据当前标签页)
- 无需复杂的嵌套结构
样式规范:
- 使用
var(--font-2xl)作为标题字号 - 使用
var(--text-primary)作为标题颜色 - 透明背景:
background: transparent - 内边距:
padding: 8px 24px
决策 3: 分段控制器实现
选择: 复制 TimePeriodTabs 的 CSS 结构,修改选项数据
理由:
- 确保视觉效果 100% 一致
- 避免重复造轮子
- 样式已经过亮色/暗色主题测试
关键样式:
.segmented-control {
display: flex;
background: var(--segmented-bg);
border-radius: 8px;
padding: 4px;
gap: 4px;
height: 40px;
}
.tab-item.active {
background: var(--segmented-active-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
决策 4: 右侧操作按钮布局
选择: 使用 v-if 条件渲染,根据 tabActive 动态显示不同按钮
理由:
- 简洁明了,易于维护
- 与现有代码风格一致
- 性能开销可忽略
实现:
<van-button v-if="tabActive === 'email'" @click="...">立即同步</van-button>
<van-icon v-if="tabActive === 'message'" name="passed" @click="..."/>
Risks / Trade-offs
风险 1: CSS 变量未定义
风险: theme.css 中可能缺少 --segmented-bg 或 --segmented-active-bg 变量
缓解: 实施前检查变量定义,必要时添加兼容值
风险 2: 移动端触控区域
风险: 自定义按钮的触控区域可能不如 Vant 组件优化
缓解: 确保按钮最小高度 44px,添加 -webkit-tap-highlight-color: transparent
权衡 1: 代码复用 vs 灵活性
权衡: 选择在 BalanceView.vue 内实现而非抽象组件
影响: 如果未来其他页面需要类似布局,需要重复代码
判断: 可接受 - 当前只有一个使用场景,过早抽象会增加维护成本
权衡 2: 视觉一致性 vs 功能保留
权衡: 需要在统一样式的同时保留特定功能按钮
影响: 头部布局不能完全照搬 DateSelectHeader
判断: 功能优先 - 同步和标记已读是核心功能,不能牺牲