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`	新行自动贴底（流式日志刚需）
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 默认开；用户手动上滚查看历史时仍会被新行拉回底部，需要保留滚动位置的场景请自行关掉。
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`	新行自动贴底（流式日志刚需）
wrap	`boolean`	`false`	长行折行；false 时长行横向滚动
height	`number \| string`	`320`	滚动区高度
className	`string`	—	自定义类

禁忌 / 坑

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

autoScroll 默认开；用户手动上滚查看历史时仍会被新行拉回底部，需要保留滚动位置的场景请自行关掉。

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

LogViewer

用法

基础用法

时间戳 + 来源前缀

流式追加（自动贴底）

折行模式

何时用

导入

Props

禁忌 / 坑

相关

LogViewer

用法

基础用法

时间戳 + 来源前缀

流式追加（自动贴底）

折行模式

何时用

导入

Props

禁忌 / 坑

相关