筛选栏
胶囊选择器两端对齐,边距 16px;日期行居中显示当前月份,左右箭头导航年/月
选择单个日期
选中日期背景 DB60,文字白色,48×48px 矩形圆角 4px
选择日期区间
头尾日期样式同单选(DB60 背景 + 白色文字),区间内日期 DB10 背景 + G60 文字,右上角显示"班""休"等标签
| 属性 | 值 | Token |
| 高度 | 32px | --cal-filter-height |
| 两端边距 | 16px | --cal-filter-side-padding |
| 圆角 | 全圆角 999px | --cal-filter-radius |
| 背景颜色 | #F5F7FA G05 | --cal-filter-bg → --G05 |
| 对齐方式 | 两端对齐(justify-content: space-between) | flexbox |
| 选中项背景 | #FFFFFF G0 白色全圆角 | --cal-filter-active-bg → --G0 |
| 选中项高度 | 28px(上下各 2px) | --cal-filter-slider-height |
| 选中文字颜色 | #223355 G60 | --cal-filter-active-text → --G60 |
| 未选中文字颜色 | #6B7A99 G50 | --cal-filter-text → --G50 |
| 选项文字 | 本年、本月、本周、自定义 | — |
| 当前月份字号 | 16px/500 | --cal-header-font |
| 当前月份颜色 | #223355 G60 | --cal-header-color → --G60 |
| 箭头图标颜色 | #A8B4C8 G40 | --cal-arrow-color → --G40 |
| 箭头图标尺寸 | 16×16px | --cal-arrow-size |
| 上一月/下一月文字颜色 | #6B7A99 G50 | --cal-arrow-label-color → --G50 |
| 上一月/下一月字号 | 12px/400 | — |
| 左侧箭头排列 | 上一年 → 上一月 → "上一月" | — |
| 右侧箭头排列 | "下一月" → 下一月 → 下一年 | — |
| 字号 | 13px/400 | --cal-week-font |
| 颜色 | #A8B4C8 G40 | --cal-week-color → --G40 |
| 排列 | 日 一 二 三 四 五 六 | — |
| 日期格尺寸 | 48×48px | --cal-day-size |
| 日期格圆角 | 4px | --cal-day-radius |
| 日期字号 | 16px/400 | --cal-day-font |
| 默认文字颜色 | #223355 G60 | --cal-day-color → --G60 |
| 其他月份日期颜色 | #CED4E0 G30 | other-month → --G30 |
| 选中背景 | #3388FF DB60 | --cal-day-selected-bg → --DB60 |
| 选中文字颜色 | #FFFFFF G0 白色 | --cal-day-selected-text → --G0 |
| 选中字重 | 500 | font-weight |
| 区间背景 | #E8F1FF DB10 | --cal-day-range-bg → --DB10 |
| 区间文字颜色 | #223355 G60 | --cal-day-range-text → --G60 |
| 标签字号 | 12px/400 | --cal-day-label-font-size |
| 标签背景尺寸 | 12×12px | --cal-day-label-size |
| 标签背景圆角 | 2px | --cal-day-label-radius |
| 标签位置 | 右上角 top:4px right:4px | position:absolute |
| "班"文字颜色 | #3388FF DB60 | --cal-day-label-work → --DB60 |
| "班"背景颜色 | #E8F1FF DB10 | --cal-day-label-work-bg → --DB10 |
| "休"文字颜色 | #F26450 R60 | --cal-day-label-rest → --R60 |
| "休"背景颜色 | #FFECE8 R10 | --cal-day-label-rest-bg → --R10 |
| "假"文字颜色 | #06A17F GB60 | --cal-day-label-leave → --GB60 |
| "假"背景颜色 | #E8FAF1 GB10 | --cal-day-label-leave-bg → --GB10 |
| 默认标签颜色 | #6B7A99 G50 | --cal-day-label-color → --G50 |
| 胶囊滑块 | 0.2s cubic-bezier(.4,0,.2,1) | transition |
| 日期 hover | 0.12s ease | transition |