变更审阅

变更审阅把一组有明确边界的文件变更、范围摘要和最终决定放在一起，让用户在行动前确认自己正在接受什么。

审阅界面更新

3 个文件 · 新增 44 行 · 删除 9 行

审阅中

src/css/components/device-simulator.css+21 −3
site/docs/next/zh/components/device-simulator.mdx+18 −6
visual-tests/component-quality.visual.spec.ts+5

安装Terminal

npm install @a3s-lab/ui@0.4.1

<section
  class="change-review"
  data-state="reviewing"
  aria-labelledby="review-title"
>
  <header>
    <div>
      <h2 id="review-title">审阅界面更新</h2>
      <p data-review-summary>3 个文件 · 新增 44 行 · 删除 9 行</p>
    </div>
    <span class="status-badge" data-state="active">审阅中</span>
  </header>
  <ul data-review-files>
    <li>
      <code>src/app.css</code>
      <span data-review-delta>+4 −1</span>
    </li>
  </ul>
  <footer>
    <button type="button" class="btn" data-variant="outline">要求修改</button>
    <button type="button" class="btn">接受变更</button>
  </footer>
</section>

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

用法

标题说明变更目的，摘要给出完整范围，文件列表保留可核对的路径，决定按钮直接写明后果。组件不加载差异内容，也不替宿主提交决定。

<section
  class="change-review"
  data-state="reviewing"
  aria-labelledby="review-title"
>
  <header>
    <div>
      <h2 id="review-title">审阅界面更新</h2>
      <p data-review-summary>3 个文件 · 新增 44 行 · 删除 9 行</p>
    </div>
    <span class="status-badge" data-state="active">审阅中</span>
  </header>
  <ul data-review-files>
    <li>
      <code>src/app.css</code>
      <span data-review-delta>+4 −1</span>
    </li>
  </ul>
  <footer>
    <button type="button" class="btn" data-variant="outline">要求修改</button>
    <button type="button" class="btn">接受变更</button>
  </footer>
</section>

参数

API	取值	用途
`data-state`	`pending`、`reviewing`、`accepted`、`rejected`、`conflict`、`error`	当前审阅生命周期
`data-review-summary`	推荐	文件数、增删行数和其他范围摘要
`data-review-files`	必填	当前决定覆盖的文件列表
`data-review-delta`	推荐	每个文件的新增和删除数量
`data-review-status`	推荐	不仅依靠状态徽标样式时使用的可见生命周期标签
直接子 `footer`	有决定时	与整组变更相关的最终操作

状态与变体

pending 表示审阅材料仍在准备，不能提前显示可执行决定；reviewing 允许用户检查和决定；accepted 与 rejected 保留最终结果；conflict 保留原提案并说明竞争修订；error 说明材料无法加载或决定无法提交。

变更需要重新审阅

审阅期间有 1 个文件被更新

存在冲突

src/css/components/device-simulator.css修订已变化

<section class="change-review" data-state="conflict" aria-labelledby="change-conflict-title">
  <header>
    <div><h2 id="change-conflict-title">变更需要重新审阅</h2><p data-review-summary>审阅期间有 1 个文件被更新</p></div>
    <span class="status-badge" data-state="warning">存在冲突</span>
  </header>
  <ul data-review-files>
    <li><code>src/css/components/device-simulator.css</code><span data-review-delta>修订已变化</span></li>
  </ul>
  <footer><button type="button" class="btn" data-size="sm" data-variant="outline">加载最新变更</button></footer>
</section>

逐行或逐文件接受属于更丰富的差异检查器，不应伪装成普通复选框列表。文件数很多时先提供摘要和过滤，再进入完整代码差异；不要在一张卡片中渲染无限文件。

可访问性

根区域通过标题关联获得名称。文件数、增删数量和冲突必须使用文本与符号表达，不能只依赖红绿颜色。代码路径允许视觉截断，但完整路径应保留在 DOM、标题属性或可访问说明中。决定按钮写清影响范围；不可逆或高风险接受动作需要额外的审批请求或警报对话框，而不是靠按钮颜色制造警告。异步提交时保留焦点和审阅内容，失败后说明原因与重试路径。宿主负责差异来源、可信修订、权限、提交与回滚，组件只负责审阅摘要和决定边界。

#变更审阅

#用法

#参数

#状态与变体

#可访问性

变更审阅

用法

参数

状态与变体

可访问性