日期快捷展示 · Fresh Mint

运输计划等业务页把「已选 + 日期快捷 + 检索 + 操作按钮 + 刷新/列设置」收成一行时, 五个独立按钮(全部 / 昨日 / 今日 / 明日 / 本周)最占宽。以下对比三种更省空间的展示,拖拽虚线框右侧可模拟窄屏。

0. 现状:五个独立描边按钮

与当前 ListToolbarDateShortcuts 一致。可发现性最好,但水平占位最大。

占宽大
日期区宽约 — px

运输计划列表 · 现状

已选 1 项
计划编号计划日期客户名称
YS-2026-0012026-07-31某某化工

问题:与大量业务按钮挤同一行时,窄屏必横向滚动或折行;日期快捷本身占约 280~320px。

A. 分段控件(Segmented)

五个选项合成一块控件,仍一眼可见、单击切换;外框共用,去掉按钮间隙与描边重复。

推荐
日期区宽约 — px

运输计划列表 · 分段控件

已选 1 项
计划编号计划日期客户名称
YS-2026-0012026-07-31某某化工

优点:仍保持「一眼五档」;比五按钮约省 40~70px,视觉更成组。 落地:可直接改 ListToolbarDateShortcuts 样式,API 不变。

B. 下拉选择(Select)

收成单个选择器,占宽最小;切换需多点一次。适合按钮极多的页。

最省宽
日期区宽约 — px

运输计划列表 · 下拉选择

已选 1 项
计划编号计划日期客户名称
YS-2026-0012026-07-31某某化工

取舍:占宽约 112px,单行最稳;但当前档位不再「平铺可见」,高频切「今日/明日」略慢。

C. 日历触发 + 弹出菜单

显示当前选中文案(如「今日」),点击展开选项。形态接近 Element el-dropdown。

备选
日期区宽约 — px(随当前文案变化)

运输计划列表 · 触发菜单

已选 1 项
计划编号计划日期客户名称
YS-2026-0012026-07-31某某化工

适用:希望保留「当前筛选」可读文案,又不想平铺五档时。交互成本与 B 接近。

对比与建议

工具栏保持单行;优先换日期快捷形态,而不是把业务按钮拆到第二行。

方案 占宽 可发现性 切换成本 改动成本 建议
现状五按钮 大 最高 最低(一击) — 弃用(单行场景)
A 分段控件 中 高 低(一击) 低(改组件样式) 推荐默认
B 下拉选择 最小 中 中(两击) 低 按钮极多时
C 触发菜单 小 中高 中 中 备选
选定方案: 选定后回复我选项代号即可落地到运输计划页