我的物料领用记录 · 双 Tab 样式 Demo

针对【生产管理 → 我的物料领用记录】页面中【领用记录】【消耗明细】两个 Tab 不够醒目、首次进入不易发现可点击的问题,提供 7 套可选样式。色值对齐 Fresh Mint(#10b981)。

现状问题:当前使用居中胶囊 Tab(panel-pill-tabs),字号 13px、灰底轨道, 夹在标题与筛选区之间视觉权重低,用户容易把它当成静态标签而非可切换的视图。

01 · 现状基线

与线上一致的居中胶囊 Tab,作为对比参照。

当前线上
   [ 领用记录 | 消耗明细 ]

02 · 全宽双轨滑块

50/50 等分全宽轨道,白色滑块平滑移动。点击区域最大,辨识度最高。

强烈推荐
┌────────领用记录────────┬────────消耗明细────────┐

03 · 图标信息卡片

图标 + 标题 + 副标题说明,双列大卡片。业务含义一目了然。

推荐
[📋 领用记录] [📊 消耗明细]

04 · 左对齐下划线

加大字号(15px)+ 左对齐 + 绿色底边指示。经典 Tab 模式,改动适中。

经典
领用记录 消耗明细 ———

05 · 标题行内嵌 Tab

Tab 放在标题右侧同一行,节省纵向空间,与标题形成视觉组合。

紧凑
| 我的物料领用记录    [ 领用记录 | 消耗明细 ]

06 · 左对齐胶囊 + 引导提示

保留胶囊风格但左对齐、加大尺寸,上方加一行「切换视图」引导文案。

渐进改良
↕ 点击下方切换查看不同记录 [ 领用记录 | 消耗明细 ]

07 · 竖条强调 + 浅绿底

激活 Tab 左侧主色竖条 + 浅绿渐变底,与列表标题竖条视觉统一。

推荐
|领用记录 消耗明细