badge.md
组件 · COMPONENT

徽章与档位 Badge

一切不可点的标识。圆＝徽章不可点，方角＝控件可点——这条信号让用户看形状就知道能不能点。

来源设计系统源码源screens/v4/course/TierPill.jsx源lib/courseTiers.js源Tag.jsx机读components/badge.md

课时档位

免费绿 / 会员黄 / 拓展红——黑白系统里唯一被允许的功能信号色，配色全部走 --zzm-tier-* 令牌。level 就是课节的 required_level：0、1 归免费，2 会员，3 拓展。

TierPill
免费会员拓展
import { TierPill } from './screens/v4/course/TierPill.jsx'

export function Tiers() {
  return (
    <>
      <TierPill level={0} />
      <TierPill level={2} />
      <TierPill level={3} />
    </>
  )
}
反光扫过shine：一道反光时不时扫过；delay 逐个错开，避免同屏齐刷
免费会员拓展
import { TierPill } from './screens/v4/course/TierPill.jsx'

export function TiersShine() {
  return (
    <>
      <TierPill level={0} shine delay={0} />
      <TierPill level={2} shine delay={0.7} />
      <TierPill level={3} shine delay={1.4} />
    </>
  )
}
属性取值默认说明
level0 · 1 · 2 · 30课节档位（required_level）
shinebooleanfalse挂反光（.zzm-pill-shine）
delaynumber（秒）0反光错峰延时，经 --zzm-shine-delay 传入
styleobject—只放 margin 等布局

小标签与圆徽

Tag · RoundBadge9.5px · 600 · 字距 1px · 圆角 4
试看会员◆
import { Tag, StatusPill, RoundBadge } from './extracted/Tag.jsx'

export function Tags() {
  return (
    <>
      <Tag tone="accent">试看</Tag>
      <Tag tone="neutral">会员</Tag>
      <RoundBadge>◆</RoundBadge>
    </>
  )
}

状态胶囊

StatusPill通过 / 中性 / 拦截
验证通过 · 可发送冷却中 · 60s请求过多 · 暂时拦截
import { Tag, StatusPill, RoundBadge } from './extracted/Tag.jsx'

export function Pills() {
  return (
    <>
      <StatusPill tone="ok">验证通过 · 可发送</StatusPill>
      <StatusPill tone="neutral">冷却中 · 60s</StatusPill>
      <StatusPill tone="danger">请求过多 · 暂时拦截</StatusPill>
    </>
  )
}

铁律

✓ 要徽章、标签、状态不可点
✗ 不要给徽章加点击事件——要能点就改成按钮
✓ 要档位色只出现在档位胶囊上
✗ 不要用档位绿、黄去表达别的意思