运输计划等业务页把「已选 + 日期快捷 + 检索 + 操作按钮 + 刷新/列设置」收成一行时, 五个独立按钮(全部 / 昨日 / 今日 / 明日 / 本周)最占宽。以下对比三种更省空间的展示,拖拽虚线框右侧可模拟窄屏。
与当前 ListToolbarDateShortcuts 一致。可发现性最好,但水平占位最大。
问题:与大量业务按钮挤同一行时,窄屏必横向滚动或折行;日期快捷本身占约 280~320px。
五个选项合成一块控件,仍一眼可见、单击切换;外框共用,去掉按钮间隙与描边重复。
优点:仍保持「一眼五档」;比五按钮约省 40~70px,视觉更成组。
落地:可直接改 ListToolbarDateShortcuts 样式,API 不变。
收成单个选择器,占宽最小;切换需多点一次。适合按钮极多的页。
取舍:占宽约 112px,单行最稳;但当前档位不再「平铺可见」,高频切「今日/明日」略慢。
显示当前选中文案(如「今日」),点击展开选项。形态接近 Element el-dropdown。
适用:希望保留「当前筛选」可读文案,又不想平铺五档时。交互成本与 B 接近。
工具栏保持单行;优先换日期快捷形态,而不是把业务按钮拆到第二行。
| 方案 | 占宽 | 可发现性 | 切换成本 | 改动成本 | 建议 |
|---|---|---|---|---|---|
| 现状五按钮 | 大 | 最高 | 最低(一击) | — | 弃用(单行场景) |
| A 分段控件 | 中 | 高 | 低(一击) | 低(改组件样式) | 推荐默认 |
| B 下拉选择 | 最小 | 中 | 中(两击) | 低 | 按钮极多时 |
| C 触发菜单 | 小 | 中高 | 中 | 中 | 备选 |