标签与徽章

标签用于表达患者条件、筛选状态与数据模态。默认灰底描边，激活态切换为 cdx-700 实底；徽章使用 11px 等宽字体与 2px 圆角。

返回组件库

05 · TAGS & BADGES · 标签与徽章

Condition Tags

诊断 · 冠心病检验 · LDL > 3.4 用药 · 他汀类随访 ≥ 12 月

Filter Chips

Badges · Role Badges

治理前治理后效率 >100× 管理员编辑者只读访客

<section id="tags" class="section">
    <div class="section-title">05 · TAGS & BADGES · 标签与徽章</div>
    <div class="demo-box">
      <div class="demo-sub">Condition Tags</div>
      <div class="flex flex-wrap gap-2 mb-6">
        <span class="tag"><span class="dot"></span>诊断 · 冠心病</span>
        <span class="tag is-active"><span class="dot"></span>检验 · LDL > 3.4</span>
        <span class="tag"><span class="dot"></span>用药 · 他汀类</span>
        <span class="tag is-active"><span class="dot"></span>随访 ≥ 12 月</span>
      </div>
      <div class="demo-sub">Filter Chips</div>
      <div class="flex flex-wrap gap-2 mb-6">
        <button class="mf-chip is-active">全部</button>
        <button class="mf-chip">检验</button>
        <button class="mf-chip">检查</button>
        <button class="mf-chip">病理</button>
        <button class="mf-chip">用药</button>
      </div>
      <div class="demo-sub">Badges · Role Badges</div>
      <div class="flex flex-wrap gap-3 items-center">
        <span class="badge-warn">治理前</span>
        <span class="badge-ok">治理后</span>
        <span class="inline-block px-3 py-1 font-mono text-[13px] font-semibold bg-cdx-50 text-cdx-700 border border-cdx-200 rounded">效率 &gt;100×</span>
        <span class="role-badge admin"><span class="w-1.5 h-1.5 rounded-full bg-current"></span>管理员</span>
        <span class="role-badge editor"><span class="w-1.5 h-1.5 rounded-full bg-current"></span>编辑者</span>
        <span class="role-badge viewer"><span class="w-1.5 h-1.5 rounded-full bg-current"></span>只读</span>
        <span class="role-badge guest"><span class="w-1.5 h-1.5 rounded-full bg-current"></span>访客</span>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。