feat(calendar): simplify holiday highlight styles and improve accessibility
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 27s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 27s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
- Introduced a new visual style for holiday highlights in the calendar component, replacing complex gradients with solid colors for better clarity. - Removed the holiday badge to reduce visual noise and enhance user experience. - Ensured that holiday information remains accessible through long-press interactions. - Updated specifications to reflect the new design decisions and requirements for both light and dark themes. - Added tasks for implementation, including style adjustments and accessibility enhancements.
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
## Context
|
||||
|
||||
当前 `Calendar.vue` 组件使用复杂的 CSS 样式来高亮显示节假日:
|
||||
- 休息日使用绿色渐变背景 (`linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%)`)
|
||||
- 调休工作日使用橙色渐变背景 (`linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%)`)
|
||||
- 右上角显示红色徽章("休"或"班")
|
||||
|
||||
这些装饰性元素增加了视觉复杂度,与 design tokens 系统的简洁性原则不符。用户反馈在多状态叠加(选中、有数据、节假日)时视觉混乱。
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- 简化节假日视觉样式,使用纯色背景替代渐变
|
||||
- 移除节假日徽章,减少视觉噪音
|
||||
- 确保所有节假日功能(识别、长按查看)保持不变
|
||||
- 提升多状态叠加时的视觉一致性
|
||||
|
||||
**Non-Goals:**
|
||||
- 不修改节假日数据获取逻辑(API、数据结构)
|
||||
- 不影响长按浮层的交互逻辑
|
||||
- 不改变日历的其他视觉状态(选中、有数据、超预算)
|
||||
|
||||
## Decisions
|
||||
|
||||
### 决策 1: 纯色背景替代渐变
|
||||
**选择**: 使用 CSS 变量定义的单一背景色(如 `--bg-success-subtle` 和 `--bg-warning-subtle`)
|
||||
|
||||
**理由**:
|
||||
- 渐变背景在小尺寸 (32px×32px) 的日期单元格中效果不明显,反而增加渲染成本
|
||||
- 纯色更符合 Material Design 和现代 UI 设计趋势
|
||||
- 与现有 design tokens 系统一致,易于主题切换(深色模式)
|
||||
|
||||
**替代方案及弃用原因**:
|
||||
- **保留渐变但简化**: 仍需维护额外的颜色定义,不能复用 design tokens
|
||||
- **使用边框样式**: 边框在视觉上不够突出,易被忽略
|
||||
|
||||
### 决策 2: 移除节假日徽章
|
||||
**选择**: 完全移除右上角的"休"/"班"徽章,仅依赖背景颜色和长按浮层
|
||||
|
||||
**理由**:
|
||||
- 徽章在 9px 字号下可读性差,尤其对老年用户不友好
|
||||
- 背景颜色已足够区分休息日(绿色)和工作日(橙色)
|
||||
- 长按浮层提供详细信息,徽章信息冗余
|
||||
- 减少绝对定位元素,简化布局
|
||||
|
||||
**替代方案及弃用原因**:
|
||||
- **使用图标替代文字**: 图标需要额外的视觉学习成本
|
||||
- **移至日期数字下方**: 占用交易金额显示区域,产生新的冲突
|
||||
|
||||
### 决策 3: 状态优先级规则
|
||||
**选择**: 选中状态 > 数据状态 > 节假日状态
|
||||
|
||||
**理由**:
|
||||
- 选中状态是用户当前关注焦点,应具有最高优先级
|
||||
- 交易数据是核心业务信息,优先于装饰性节假日样式
|
||||
- 节假日信息可通过长按浮层补充查看
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
### 风险 1: 颜色区分度下降
|
||||
**描述**: 移除徽章后,仅依赖背景颜色区分休息日和工作日,色盲用户可能无法区分绿色和橙色
|
||||
|
||||
**缓解措施**:
|
||||
- 在 ARIA 标签中补充文本信息(如 `aria-label="2026-01-01 春节 休息日"`)
|
||||
- 未来可考虑引入无障碍模式,使用图案纹理辅助颜色
|
||||
|
||||
### 风险 2: 现有用户习惯改变
|
||||
**描述**: 已习惯徽章样式的用户可能一时不适应纯色背景
|
||||
|
||||
**缓解措施**:
|
||||
- 本次为视觉优化,不涉及功能变更,用户可快速适应
|
||||
- 长按查看详情功能保持不变,信息获取路径未阻断
|
||||
|
||||
### Trade-off: 简洁性 vs 信息丰富度
|
||||
**选择**: 优先简洁性,通过交互(长按)补充详细信息
|
||||
|
||||
**理由**: 日历首屏展示的核心是日期和交易数据,节假日信息为辅助,适合按需查看
|
||||
|
||||
## Migration Plan
|
||||
|
||||
本次为纯前端样式优化,无需数据库迁移或 API 变更。
|
||||
|
||||
**部署步骤**:
|
||||
1. 修改 `Calendar.vue` 的 SCSS 样式
|
||||
2. 移除 `.holiday-badge` 相关模板代码
|
||||
3. 调整 `.day-holiday` 和 `.day-workday` 类的样式为纯色背景
|
||||
4. 测试多种状态组合(选中+节假日、有数据+节假日)
|
||||
5. 验证长按浮层功能正常
|
||||
6. 构建并部署
|
||||
|
||||
**回滚策略**:
|
||||
- 前端样式修改,可快速通过 Git revert 回滚
|
||||
- 无数据依赖,回滚无风险
|
||||
|
||||
## Open Questions
|
||||
|
||||
无待定问题。设计方案已明确。
|
||||
Reference in New Issue
Block a user