Log 日志流

等宽字体的日志展示容器，支持增量追加与"贴底"自动滚动，适合构建控制台/构建输出等场景。

基础用法

基础日志流

示例代码

通过 lines property（或 lines 属性传 JSON 字符串）提供数据；追加内容时只增量渲染新增行，不重建已有节点。

行号

显示行号

示例代码

追加与自动滚动

追加日志流（贴底自动滚动）

每 1.2s 追加一条日志；仅当用户停靠在底部时自动滚动，上翻阅读历史时不会打断。

示例代码

关闭自动滚动

auto-scroll=false

设置 auto-scroll="false" 后追加内容不会自动滚到底。

示例代码

空态

空日志

空 lines 显示空态占位，文案走 locale（可通过 empty-text 覆盖）。

示例代码

自定义空态文案

empty-text 覆盖默认空态文案（默认「暂无日志」）。

示例代码

上翻加载历史

require-more 分段加载

滚动到顶部触发 oas-require-more（detail { from: 'top' }），模拟延迟后把更早的 10 行插到顶部（key 对齐 reconcile，已有行不重建），行号自动重排、阅读位置保持。

示例代码

行级高亮

关键词 / 正则高亮

highlight JSON 数组：字符串为字面关键词，pattern 条目为正则（反斜杠按 JSON 转义写，如 \\d）；命中片段包 mark（token 语义底色），匹配文本全部走 textContent 防注入。

示例代码

搜索过滤

关键字搜索过滤

keyword 非空时只显示命中行（大小写不敏感），命中片段包 mark 高亮（与 highlight 通道同视觉体系），行号仍显示原始行号；组件派发 oas-search（detail { keyword, matched, total }）供宿主展示命中计数。清空输入即恢复全部行，宿主 lines 数据不被修改。

示例代码

级别着色

levels 级别语义色

levels JSON 数组与 lines 按索引对齐：info / success / warning / error 映射 token 语义色（暗色自动换色），支持 warn / fatal 等别名，非法级别不着色。

示例代码

加载态与 scrollTo

loading + scrollTo()

模拟拉取回到顶部回到底部

loading 属性显示加载浮层并同步 aria-busy；scrollTo('top' | 'bottom' | 像素) 方法供外部按钮跳转。

示例代码

字号定制

字号默认跟随外层 font-size（继承），可用 CSS 变量 --oas-log-font 显式定制（如 18px）。

事件与方法

• oas-require-more：滚动进入顶部/底部阈值区时派发（detail { from: 'top' | 'bottom' }），边缘触发——停留不连发，离开区域后复位；阈值由 offset-top / offset-bottom（px）控制。
• oas-search：搜索过滤结果上报（detail { keyword, matched, total }）——keyword 变化或数据变化时派发（同状态去重）；matched 为当前命中行数、total 为总行数，过滤窗口为当前已加载行（与分段加载兼容）。
• scrollTo('top' | 'bottom' | number)：滚动视口到顶/底/指定像素位置，供外部"回到底部"按钮调用。
• loading：加载浮层遮罩视口，同步 aria-busy，文案走 locale（loading.loading）。
• levels / highlight / keyword：行级别语义色 / 行级关键词·正则高亮 / 搜索过滤通道（JSON 属性，语法见上方 demo）。keyword 非空时只显示命中行（大小写不敏感），命中片段包 mark 高亮；过滤不改宿主 lines，行号与级别仍按原始索引对齐，清空即恢复。

顶部插入历史行时 reconcile 按行内容 key 对齐：已有行节点复用、行号自动重排、视口阅读位置自动补偿。

API

oas-log

属性

属性	说明	类型	默认值
auto-scroll	追加后自动滚动到底（仅贴底时滚动）	string	true
empty-text	空态文案（覆盖 locale 默认值）	—	—
highlight	行高亮规则（JSON 数组）：字符串=字面关键词；{ text } / { pattern, flags } = 正则；命中片段包 mark 底色（warning token）	string	—
keyword	搜索过滤关键字：非空时只显示命中行（大小写不敏感），命中片段包 mark 高亮（同 highlight 视觉体系）；行号/levels 按原始索引对齐，清空/移除恢复全部行，不改宿主 lines	string	—
levels	行级别（JSON 数组，与 lines 索引对齐）：info/success/warning/error（warn/fatal 等别名归一），映射语义色 token	string	—
line-number	显示左侧行号栏	boolean	—
lines	日志行 JSON 字符串（属性通道）	string[]	[]
loading	加载态（视口浮层 + spinner + aria-busy）	boolean	—
offset-bottom	距底部多远视为触底（px，触发 oas-require-more 的 from=bottom，默认 0）	—	—
offset-top	距顶部多远视为触顶（px，触发 oas-require-more 的 from=top，默认 0）	—	—

事件

事件	说明
oas-require-more	滚动进入顶部/底部阈值区边缘派发一次（停留不连发、离开复位），detail: { from: "top" | "bottom" }；宿主上翻拉历史/下拉拉新
oas-search	搜索过滤结果上报：keyword 或数据变化时派发（同状态去重），detail: { keyword, matched, total }（matched=命中行数、total=总行数，过滤窗口为当前已加载行）

CSS 变量

CSS 变量	默认值
--oas-log-font	inherit
--oas-log-loading-mask	color-mix(in srgb, var(--oas-color-bg) 65%, transparent)
--oas-log-mark-bg	color-mix(in srgb, var(--oas-color-warning) 18%, transparent)
--oas-log-mark-color	var(--oas-color-warning-text)

部件：::part(viewport) 滚动视口、::part(log) 日志内容、::part(row) 单行、::part(line-number) 行号、::part(line) 行文本、::part(empty) 空态。