溯源与锚点

锚点用于把结构化结果关联回原始病历文本。默认显示虚线下划线，hover 显示 cdx-50 背景，命中态使用琥珀金高亮。

返回组件库
13 · TRACEABILITY · 溯源与锚点
Anchor 溯源锚点（hover / 命中态）
患者张三于 2026-03-15 入院，主诊断为冠状动脉粥样硬化性心脏病， 入院时LDL-C 4.2 mmol/L，予以阿托伐他汀 40mg qd治疗。 随访 3 个月后复查LDL-C 降至 2.1 mmol/L，达标。
Mark 命中高亮
NLP 提取结果：冠心病 → 标准编码 I25.1， 关联检验项 LDL-C、TC、HDL-C， 推荐用药 他汀类。
Synonym Group 同义词组
冠心病 → 冠状动脉硬化 → CHD → 冠状动脉粥样硬化性心脏病 
<section id="anchors" class="section">
    <div class="section-title">13 · TRACEABILITY · 溯源与锚点</div>
    <div class="demo-box">
      <div class="demo-sub">Anchor 溯源锚点（hover / 命中态）</div>
      <div class="text-[14px] leading-[2] text-ink-800 mb-6">
        患者<span class="anchor">张三</span>于 2026-03-15 入院，主诊断为<span class="anchor is-hl">冠状动脉粥样硬化性心脏病</span>，
        入院时<span class="anchor">LDL-C 4.2 mmol/L</span>，予以<span class="anchor">阿托伐他汀 40mg qd</span>治疗。
        随访 3 个月后复查<span class="anchor is-hl">LDL-C 降至 2.1 mmol/L</span>，达标。
      </div>

      <div class="demo-sub">Mark 命中高亮</div>
      <div class="text-[14px] leading-[2] text-ink-800 mb-6">
        NLP 提取结果：<mark>冠心病</mark> → 标准编码 <mark class="cdx">I25.1</mark>，
        关联检验项 <mark>LDL-C</mark>、<mark>TC</mark>、<mark>HDL-C</mark>，
        推荐用药 <mark class="cdx">他汀类</mark>。
      </div>

      <div class="demo-sub">Synonym Group 同义词组</div>
      <div class="demo-box" style="background:#FAFAFA;border:1px dashed #E4E4E7">
        <div class="flex items-center gap-3 flex-wrap">
          <span class="inline-block px-3 py-1.5 text-[13px] bg-[#FBF9F4] border border-[#E8DCC1] rounded-sm text-[#6E582C]">冠心病</span>
          <span class="text-ink-400">→</span>
          <span class="inline-block px-3 py-1.5 text-[13px] bg-[#FBF9F4] border border-[#E8DCC1] rounded-sm text-[#6E582C]">冠状动脉硬化</span>
          <span class="text-ink-400">→</span>
          <span class="inline-block px-3 py-1.5 text-[13px] bg-[#FBF9F4] border border-[#E8DCC1] rounded-sm text-[#6E582C]">CHD</span>
          <span class="text-ink-400">→</span>
          <span class="inline-block px-4 py-1.5 text-[14px] font-semibold bg-cdx-50 border border-cdx-200 rounded-sm text-cdx-700">冠状动脉粥样硬化性心脏病</span>
        </div>
      </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 检查清单逐项核对。