For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.3.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.3.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.3.0/components/log-viewer.md.
A3S UI
  • 简体中文
  • v0.3.0

      • 日志查看器

      Log Viewer 是用于构建输出、Workload 日志和 Agent 执行流的有界、框架无关表面。传输、过滤、保留与重连由宿主应用负责。

      实时预览

      构建输出

      BuildRun build_01JY7K · 有序记录

      数据流过滤
      已连接最近 500 条有序记录
      #104stdout
      已解析不可变源版本。
      #105stdout
      正在构建 linux/amd64 Artifact。
      #106–108已压缩记录 · 3 条
      #109stderr
      正在重试 Registry 连接。

      使用

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";
      <section class="log-viewer" aria-label="执行日志">
  <header>
    <div>
      <h2>执行日志</h2>
      <p>有序语义输出</p>
    </div>
  </header>
  <div data-log-meta><span>已连接</span><span>最近 500 条记录</span></div>
  <div role="log" aria-live="polite" aria-label="有序执行输出" tabindex="0">
    <div data-log-record data-stream="stdout">
      <span data-log-sequence>#42</span
      ><time datetime="2026-08-12T09:41:02Z">09:41:02</time
      ><span data-log-stream>stdout</span>
      <pre>Provider 已启动。</pre>
    </div>
  </div>
</section>

      参数

      API值用途
      class="log-viewer"必需根表面
      data-log-actions标记Header 中的过滤与数据流操作
      data-log-meta标记连接和保留元数据
      role="log" 或 data-log-viewport原生角色或标记有界滚动输出区域
      tabindex="0"原生属性让溢出视口可通过键盘滚动
      data-log-record标记一条有序记录
      data-streamstdout、stderr、unknown数据流样式
      data-log-sequence、data-log-stream标记记录元数据
      data-log-gap标记明确的压缩或缺失记录提示
      --log-viewer-min-height、--log-viewer-max-heightCSS 长度Viewport 高度边界

      状态与变体

      用明确文本呈现不可用、连接中、空、实时、重试和失败状态。服务端报告压缩或缺失记录时使用 data-log-gap。根元素的直接子级 <output role="alert"> 可以报告可恢复的数据流错误，同时保留已经收到的输出。

      可访问性

      为根元素和可聚焦的日志视口提供可访问名称。只有追加记录的区域才使用 role="log" 与 aria-live="polite"；不要在每条消息到达时重渲染整个日志。过滤器放入带标签的 <fieldset>，用 aria-pressed 暴露当前筛选项，保持 DOM 时间顺序，新记录到达时不要移动键盘焦点。