当「已选计数 + 日期快捷 + 简易检索 + 业务按钮 + 刷新/列设置」挤在同一行时,
flex-wrap 会折成两行。当前选定方向:
列表工具栏带文案的操作按钮去掉前置图标(保留描边/主色实心形态),用更小的水平占位换单行概率。
右侧刷新/列设置仍为纯图标按钮,不受影响。
模拟合同列表工具栏:日期快捷 + 检索 + 8 个操作按钮,窄屏或中等宽度必折两行。
问题:折行后占用纵向空间,已选与主操作扫描节奏被打断;窄屏时第二行按钮不易被发现。
保留现有描边 / 主色实心按钮形态,只去掉文案前的图标与图标间距,降低每个按钮约 16px + gap 的占位。
落地范围建议:仅列表工具栏 .list-toolbar 内「有文案的 el-button」去掉前置图标;
弹窗底栏、表格操作列、筛选区搜索/重置等可暂不改。
注意:现有 OpenSpec「按钮须携带图标」需同步放宽为「工具栏文案按钮可不带图标」。
高频主路径始终可见;低频/场景化动作收入「更多」。保持单行、左起扫描、仅首按钮主色。
收纳原则:
① 主创建/主编辑类外露;② 依赖选中行的低频动作(上传、导出、导入)进「更多」;
③ 场景切换型动作(审批通过/驳回)可按当前 Tab 动态外露或进「更多」;
④ 日期快捷与简易检索建议迁出工具栏(见方案 C),避免与操作按钮抢宽。
落地可用 Element Plus el-dropdown。
工具栏 flex-wrap: nowrap,中间操作区 overflow-x: auto。实现成本低,但可发现性差。
适用:临时兜底或按钮数量偶发超标的页。不推荐作为全站默认——右侧按钮容易被「藏」在滚动条外。
把「日期快捷 / 简易检索」从操作行拆出(独立轻量条或并回筛选区),操作行只保留 CRUD + 更多。
说明:这里用虚线次级条演示「元信息下沉」。产品上更干净的做法是:日期快捷/检索回到上方
filter-block,工具栏只做「已选 → 动作 → 刷新/列设置」。
全站默认建议 A;复杂业务页(合同/价格函)用 A + 把日期/检索移出操作行。
| 方案 | 单行稳定 | 可发现性 | 与规范兼容 | 实现成本 | 建议 |
|---|---|---|---|---|---|
| 去掉前置图标 | 中高 | 高 | 需放宽「按钮必带图标」 | 低 | 已选定 |
| A 更多下拉 | 高 | 中高 | 高 | 中 | 备选 |
| B 横向滚动 | 高 | 低 | 中 | 低 | 备选 |
| C 元信息下沉 | 高(组合后) | 高 | 高 | 低~中 | 备选 |
| 全部平铺 + 有图标 + wrap | 低 | 高但占高 | 符合旧规范 | — | 弃用 |
落地约定(草案):
.list-toolbar 内带可见文案的操作按钮不再放前置 el-icon;
「刷新 / 列设置」等无文案图标钮保留;弹窗 footer、筛选区、表格操作列暂保持有图标。