#代码差异

以逐行、可滚动且可复制的方式呈现代码变更，让增加、删除和上下文在不依赖颜色的情况下可辨认。

18−return reconnect()18


return reconnect({ retry: 3 })

npm install @a3s-lab/ui

<figure class="code-diff">
  <figcaption>src/session.ts</figcaption>
  <pre
    tabindex="0"
  ><code><span data-diff-line="-">return reconnect()</span><span data-diff-line="+">return reconnect(&#123; retry: 3 &#125;)</span></code></pre>
</figure>

import "@a3s-lab/ui/a3s.css";

#用法

<figure class="code-diff">
  <figcaption>src/session.ts</figcaption>
  <pre
    tabindex="0"
  ><code><span data-diff-line="-">return reconnect()</span><span data-diff-line="+">return reconnect(&#123; retry: 3 &#125;)</span></code></pre>
</figure>

审查需要旧、新行号槽时增加 data-line-numbers。每行再提供 data-diff-old-line、data-diff-new-line、data-diff-marker 与 data-diff-code；没有行号的槽位仍保留空元素，确保所有行严格对齐。

#契约

#产品边界

代码差异负责阅读呈现，不负责生成补丁、解析版本库或决定变更是否可信。复杂审查流程应组合变更审查与审批组件。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

#可访问性

每行必须保留加减符号或文字含义。代码方向固定为从左到右，容器支持键盘聚焦和横向滚动。