针对 QcWorkOrderSampleGroup.vue 中「同一样本下样本接收 + 生产过程两条工单」的切换区域。
共两组 HTML 原型,均可点击交互。
去掉轨道连体容器,每个 Tab 独立白底胶囊,间距 16 / 24 / 32px 三档对比。
现网对照:panel-pill-tabs__track 绿底容器。
独立边框 + 来源色,间距 16px。
推荐 最新分离感更强。
最新最大间距 + 略放大点击区域。
最新加大色块面积、两条工单始终可见、未选中显式「切换/点击」 affordance。
整宽 50/50 绿/琥珀分栏,未选中降饱和 + 👆 动画提示。
推荐 第二组列表单选形态,未选中行「切换至此」按钮。
第二组居中 oversized 二选一开关,emoji + 粗体类别名。
推荐 第二组56px 大图标 + 虚线边框 = 可点击,视觉重量最大。
第二组提示横幅 + 并排 Chip,未选中绿色「切换」按钮。
第二组Master-Detail,左侧工单列表始终可见。
第二组在现有 pill-tab 形态上微调,改动量较小。
胶囊 Tab、双卡片、步骤条、Segmented、色条 Tab 等 6 套。
第一组