质检工单 · 样本类型过滤选型

针对「细胞存储质检 / 科研捐赠质检」Tab 下的样本类型过滤条件。现网为筛选区 el-select 下拉框;本目录提供 6 种替代方案 HTML 原型,均可点击交互。

现状:QcWorkOrderTabPanel.vue 在 isInboundSampleTab 时于 filter-grid 增加「样本类型」下拉,与关键词、工单状态等并列。
目标:探索更直观、少占筛选栅格、或便于「一眼扫类型」的交互方式。
并排对比全部方案 → 01 现网基线

01 · 现网基线(下拉框)

筛选栅格内 el-select,需展开下拉选择。作为对照组。

对照

02 · 筛选下方 Chip 条

从 filter-grid 移出,横向胶囊 + 数量角标;点击即筛,无需搜索按钮。

推荐

03 · Segmented 分段控件

主 Tab 下方、筛选区上方;灰底轨道 + 白底激活块,B 端 Segmented 风格。

推荐

04 · 二级 Tab 条

样本类型作为次级 Tab,带下划线与数量;与主 Tab 层级关系清晰。

05 · 工具栏内联 Chip

与「已选 N 项 / 导出」同排,节省纵向空间;适合类型较少场景。

06 · 左侧类型导航

列表区左栏固定样本类型,右侧卡片流;类型多时可扫视全量。

07 · 图标卡片宫格

利用样本类型 Logo/首字做卡片选择,视觉识别强;占用略多纵向空间。