LogViewer

log-viewer

日志查看器 · 数据驱动行 lines(level/message/timestamp/source) + info/warn/error/debug/success 级别着色(纯函数 levelClass 可测) + autoScroll 新行贴底(复用 Conversation 法) + showTimestamp + wrap 折行/横滚 · 区别 Terminal mockup·真·流式输出

用法

基础用法

lines 数据驱动渲染，level 字段按级别着色（info/warn/error/success/command）。

▸ npm run build

compiling 248 modules…

✓ compiled in 8.1s

2 problems (1 error, 1 warning)

tsx

<LogViewer
  lines={[
    { level: "command", message: "▸ npm run build" },
    { level: "info", message: "compiling 248 modules…" },
    { level: "success", message: "✓ compiled in 8.1s" },
    { level: "error", message: "2 problems (1 error, 1 warning)" },
  ]}
/>

时间戳 + 来源前缀

showTimestamp 渲染行首时间戳；line.source 弱化渲染在正文前。

12:00:01▸ npm run build

12:00:01[turbo]scope: 1 package

12:00:02compiling 248 modules…

12:00:05[ts]unused var 'x' at app.tsx:42

12:00:09✓ compiled in 8.1s

12:00:10[lint]2 problems (1 error, 1 warning)

tsx

<LogViewer
  showTimestamp
  lines={[
    { level: "command", timestamp: "12:00:01", message: "▸ npm run build" },
    { level: "warn", timestamp: "12:00:05", source: "[ts]", message: "unused var 'x' at app.tsx:42" },
    { level: "success", timestamp: "12:00:09", message: "✓ compiled in 8.1s" },
  ]}
/>

流式追加（自动贴底）

autoScroll 默认开启，新行追加即贴底；运行逻辑留消费侧，组件只渲染。

12:00:01Allocating sandbox…

12:00:01✓ microVM ready (180ms)

tsx

<LogViewer lines={lines} showTimestamp height={220} />

折行模式

wrap 开启后长行折行而非横向滚动，窄容器里也能读全。

Error: connect ECONNREFUSED 127.0.0.1:5432 at TCPConnectWrap.afterConnect — 这是一条很长的日志，wrap 开启后会折行而不是横向滚动，保证窄容器里也能读全。

tsx

<LogViewer
  wrap
  lines={[
    { level: "error", message: "Error: connect ECONNREFUSED 127.0.0.1:5432 …这是一条很长的日志" },
  ]}
/>

何时用

渲染结构化日志行（构建/CI/运行时流式输出）：按 level 着色、可选时间戳、新行自动贴底。本组件是数据驱动的真日志列表；要纯装饰性终端外壳（打字机动画演示）用 Terminal mockup；要 AI 对话用 Conversation。

导入

import { LogViewer, levelClass } from "@hulianui/ui"

Props

名称	类型	默认	说明
lines*	`LogLine[]`	—	日志行（数据驱动）
showTimestamp	`boolean`	`false`	显示每行时间戳（渲染在行首）
autoScroll	`boolean`	`true`	新行黏底跟随：只在用户本就停在底部时才滚。上滚看历史即暂停跟随，滚回底部自动恢复
maxLines	`number`	—	只渲染最后 N 行（0 / 不传 = 不截）。长流护栏，截断只发生在渲染层，`lines` 原数组不动
wrap	`boolean`	`false`	长行折行；false 时长行横向滚动
height	`number \| string`	`320`	滚动区高度
className	`string`	—	自定义类

LogLine：{ level?: LogLevel; message: ReactNode; timestamp?: string; source?: string }。
LogLevel："info"｜"warn"｜"error"｜"debug"｜"success"｜"command"（默认 info；command 高亮被执行的命令/提示符行；source 如 "[build]" 弱化渲染在 message 前）。

禁忌 / 坑

流式运行逻辑（计时/追加）留在消费侧，组件只负责按 lines 渲染并贴底——不要期待它自己产生日志。
autoScroll 是黏底不是强制贴底：用户上滚看历史时不会被新行拽回去，滚回底部自动恢复跟随。判定「已在底部」留了 8px 容差（亚像素与惯性滚动会让 scrollTop 差零点几，卡死等号会永远判 false）。完全不要自动滚动才关掉它。
长流务必给 maxLines：一条跑几小时的构建流会把几万个 DOM 节点堆在页面里，滚动直接卡死。
不解析 ANSI 转义序列。带颜色码的原始输出请在消费侧先剥掉，或自己拆成 LogLine 的 level。
wrap=false（默认）时超长行横向滚动而非折行；窄容器读全文须开 wrap。

用法

基础用法

lines 数据驱动渲染，level 字段按级别着色（info/warn/error/success/command）。

▸ npm run build

compiling 248 modules…

✓ compiled in 8.1s

2 problems (1 error, 1 warning)

tsx

<LogViewer
  lines={[
    { level: "command", message: "▸ npm run build" },
    { level: "info", message: "compiling 248 modules…" },
    { level: "success", message: "✓ compiled in 8.1s" },
    { level: "error", message: "2 problems (1 error, 1 warning)" },
  ]}
/>

时间戳 + 来源前缀

showTimestamp 渲染行首时间戳；line.source 弱化渲染在正文前。

12:00:01▸ npm run build

12:00:01[turbo]scope: 1 package

12:00:02compiling 248 modules…

12:00:05[ts]unused var 'x' at app.tsx:42

12:00:09✓ compiled in 8.1s

12:00:10[lint]2 problems (1 error, 1 warning)

tsx

<LogViewer
  showTimestamp
  lines={[
    { level: "command", timestamp: "12:00:01", message: "▸ npm run build" },
    { level: "warn", timestamp: "12:00:05", source: "[ts]", message: "unused var 'x' at app.tsx:42" },
    { level: "success", timestamp: "12:00:09", message: "✓ compiled in 8.1s" },
  ]}
/>

流式追加（自动贴底）

autoScroll 默认开启，新行追加即贴底；运行逻辑留消费侧，组件只渲染。

12:00:01Allocating sandbox…

12:00:01✓ microVM ready (180ms)

tsx

<LogViewer lines={lines} showTimestamp height={220} />

折行模式

wrap 开启后长行折行而非横向滚动，窄容器里也能读全。

Error: connect ECONNREFUSED 127.0.0.1:5432 at TCPConnectWrap.afterConnect — 这是一条很长的日志，wrap 开启后会折行而不是横向滚动，保证窄容器里也能读全。

tsx

<LogViewer
  wrap
  lines={[
    { level: "error", message: "Error: connect ECONNREFUSED 127.0.0.1:5432 …这是一条很长的日志" },
  ]}
/>

Props

名称	类型	默认	说明
lines*	`LogLine[]`	—	日志行（数据驱动）
showTimestamp	`boolean`	`false`	显示每行时间戳（渲染在行首）
autoScroll	`boolean`	`true`	新行黏底跟随：只在用户本就停在底部时才滚。上滚看历史即暂停跟随，滚回底部自动恢复
maxLines	`number`	—	只渲染最后 N 行（0 / 不传 = 不截）。长流护栏，截断只发生在渲染层，`lines` 原数组不动
wrap	`boolean`	`false`	长行折行；false 时长行横向滚动
height	`number \| string`	`320`	滚动区高度
className	`string`	—	自定义类

禁忌 / 坑

流式运行逻辑（计时/追加）留在消费侧，组件只负责按 lines 渲染并贴底——不要期待它自己产生日志。

autoScroll 是黏底不是强制贴底：用户上滚看历史时不会被新行拽回去，滚回底部自动恢复跟随。判定「已在底部」留了 8px 容差（亚像素与惯性滚动会让 scrollTop 差零点几，卡死等号会永远判 false）。完全不要自动滚动才关掉它。

长流务必给 maxLines：一条跑几小时的构建流会把几万个 DOM 节点堆在页面里，滚动直接卡死。

不解析 ANSI 转义序列。带颜色码的原始输出请在消费侧先剥掉，或自己拆成 LogLine 的 level。

wrap=false（默认）时超长行横向滚动而非折行；窄容器读全文须开 wrap。

LogViewer

用法

基础用法

时间戳 + 来源前缀

流式追加（自动贴底）

折行模式

何时用

导入

Props

禁忌 / 坑

相关

LogViewer

用法

基础用法

时间戳 + 来源前缀

流式追加（自动贴底）

折行模式

何时用

导入

Props

禁忌 / 坑

相关