徽章标签

用途

行内状态回执,成功 / 失败 / 信息三档语义,可内嵌小操作钮做一键修复。用例参考:重扫校验的「重扫一致」与「重扫读到「××」+ 应用」(应用后徽章与列表圆点即转绿)、词库自动纠名的「字典纠正:原文 → 纠正后」。

设计规范 · macOS 26 / 27

• 配色对齐 Apple 语义色:绿底 rgba(40,200,90,.18) + 文字 #1a8a3a(暗 #5adc82)对应 systemGreen——macOS 明值 #28CD41,复核侧栏的状态圆点即精确取该值;红底 rgba(255,69,58,.16) + 文字 #c0392b(暗 #ff786e)对应 systemRed(明 #FF3B30 / 暗 #FF453A)。
• 低透明度语义底 + 加深文字:同一对色值在明暗两种外观下都可读,无需分别调底色。蓝 info 同法:底 rgba(10,132,255,.16) 即 systemBlue(暗值 #0A84FF)的透明底,文字 #0a72d6(暗 #5aaaff)——信息性提示,非成败判定。
• HIG 无障碍:状态不能只靠颜色传达——勾 / 叉线形图标(stroke 3、圆头)与颜色双通道并行。

状态与交互

• 徽章本体为非交互展示件(select-none),内嵌钮才可点:小号玻璃钮(rounded-md px-2 text-xs,普通按钮的缩小变体)且必带 title 说明后果。
• 单行不折行;超长由使用方约束宽度(参考实现 max-w 520px + overflow-hidden)。多枚并排间距 gap-1。

参考实现

Web 参考:BadgeTag.vue(kind: ok / bad / info),线形 / 填充图标见 shared/icons.ts,内嵌小钮样式见 review 的 APPLY_BUTTON。侧栏「新 / 已存在」pill 是其缩小近亲(见「侧边栏」)。