列表工具栏溢出优化 · Fresh Mint

当「已选计数 + 日期快捷 + 简易检索 + 业务按钮 + 刷新/列设置」挤在同一行时, flex-wrap 会折成两行。当前选定方向: 列表工具栏带文案的操作按钮去掉前置图标(保留描边/主色实心形态),用更小的水平占位换单行概率。 右侧刷新/列设置仍为纯图标按钮,不受影响。

0. 现状:全部平铺 → 折行

模拟合同列表工具栏:日期快捷 + 检索 + 8 个操作按钮,窄屏或中等宽度必折两行。

需优化
拖拽右侧边缘缩小容器宽度,观察折行:

合同列表

已选 2 项
合同编号合同名称状态
HT-2026-001某某化工原料采购合同草稿
HT-2026-002年度框架协议审批中

问题:折行后占用纵向空间,已选与主操作扫描节奏被打断;窄屏时第二行按钮不易被发现。

选定方案 · 工具栏文案按钮去掉前置图标

保留现有描边 / 主色实心按钮形态,只去掉文案前的图标与图标间距,降低每个按钮约 16px + gap 的占位。

已选定
有前置图标(现状) 动作区宽约 — px
无前置图标(选定) 动作区宽约 — px
对照:文字按钮仍带图标 动作区宽约 — px
节省幅度(相对「有图标描边」) —
去掉前置图标:约省 —
仅改文字按钮但仍留图标:约省 —
结论:在保留按钮形态的前提下,去图标比改文字链更划算、也更贴合现有视觉。
整行模拟(去图标后),拖窄观察折行是否缓解:

合同列表 · 无前置图标

已选 2 项
合同编号合同名称状态
HT-2026-001某某化工原料采购合同草稿

落地范围建议:仅列表工具栏 .list-toolbar 内「有文案的 el-button」去掉前置图标; 弹窗底栏、表格操作列、筛选区搜索/重置等可暂不改。 注意:现有 OpenSpec「按钮须携带图标」需同步放宽为「工具栏文案按钮可不带图标」。

方案 A · 主操作外露 +「更多」下拉

高频主路径始终可见;低频/场景化动作收入「更多」。保持单行、左起扫描、仅首按钮主色。

备选

合同列表

已选 2 项
合同编号合同名称状态
HT-2026-001某某化工原料采购合同草稿
HT-2026-002年度框架协议审批中

收纳原则: ① 主创建/主编辑类外露;② 依赖选中行的低频动作(上传、导出、导入)进「更多」; ③ 场景切换型动作(审批通过/驳回)可按当前 Tab 动态外露或进「更多」; ④ 日期快捷与简易检索建议迁出工具栏(见方案 C),避免与操作按钮抢宽。 落地可用 Element Plus el-dropdown。

方案 B · 单行不换行 + 横向滚动

工具栏 flex-wrap: nowrap,中间操作区 overflow-x: auto。实现成本低,但可发现性差。

备选

合同列表

已选 2 项
合同编号合同名称状态
HT-2026-001某某化工原料采购合同草稿

适用:临时兜底或按钮数量偶发超标的页。不推荐作为全站默认——右侧按钮容易被「藏」在滚动条外。

方案 C · 元信息下沉 + 主操作区精简

把「日期快捷 / 简易检索」从操作行拆出(独立轻量条或并回筛选区),操作行只保留 CRUD + 更多。

可与 A 组合

合同列表

已选 2 项
快捷筛选
合同编号合同名称状态
HT-2026-001某某化工原料采购合同草稿
HT-2026-002年度框架协议审批中

说明:这里用虚线次级条演示「元信息下沉」。产品上更干净的做法是:日期快捷/检索回到上方 filter-block,工具栏只做「已选 → 动作 → 刷新/列设置」。

对比与落地建议

全站默认建议 A;复杂业务页(合同/价格函)用 A + 把日期/检索移出操作行。

方案 单行稳定 可发现性 与规范兼容 实现成本 建议
去掉前置图标 中高 高 需放宽「按钮必带图标」 低 已选定
A 更多下拉 高 中高 高 中 备选
B 横向滚动 高 低 中 低 备选
C 元信息下沉 高(组合后) 高 高 低~中 备选
全部平铺 + 有图标 + wrap 低 高但占高 符合旧规范 — 弃用

落地约定(草案): .list-toolbar 内带可见文案的操作按钮不再放前置 el-icon; 「刷新 / 列设置」等无文案图标钮保留;弹窗 footer、筛选区、表格操作列暂保持有图标。