针对「细胞存储质检 / 科研捐赠质检」Tab 下的样本类型过滤条件。现网为筛选区
el-select 下拉框;本目录提供 6 种替代方案 HTML 原型,均可点击交互。
QcWorkOrderTabPanel.vue 在 isInboundSampleTab 时于 filter-grid
增加「样本类型」下拉,与关键词、工单状态等并列。筛选栅格内 el-select,需展开下拉选择。作为对照组。
对照从 filter-grid 移出,横向胶囊 + 数量角标;点击即筛,无需搜索按钮。
推荐主 Tab 下方、筛选区上方;灰底轨道 + 白底激活块,B 端 Segmented 风格。
推荐样本类型作为次级 Tab,带下划线与数量;与主 Tab 层级关系清晰。
与「已选 N 项 / 导出」同排,节省纵向空间;适合类型较少场景。
列表区左栏固定样本类型,右侧卡片流;类型多时可扫视全量。
利用样本类型 Logo/首字做卡片选择,视觉识别强;占用略多纵向空间。