开发预览更新于 2026-05-10

AnsiText ANSI 文本

解析 ANSI 转义序列（\x1b[...m）渲染为彩色 span，纯展示，不依赖 xterm.js。

基础用法

支持基础 16 色（前景 + 背景）+ bright 8 色 + 修饰（bold / dim / italic / underline / inverse）。颜色映射到 token，与主题一致；不解析 24-bit truecolor 转义。

背景

✓ build succeeded in 1.2s
⚠  warning: 3 unused exports
✗ test failed

  expected:  foo 
  received:  bar

<script setup lang="ts">
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m build succeeded in \x1b[36m1.2s\x1b[0m\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[31m✗\x1b[0m \x1b[1mtest failed\x1b[0m\n\n  expected: \x1b[42m\x1b[30m foo \x1b[0m\n  received: \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>

<template>
  <CfAnsiText :text="sample" />
</template>

<script setup>
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m build succeeded in \x1b[36m1.2s\x1b[0m\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[31m✗\x1b[0m \x1b[1mtest failed\x1b[0m\n\n  expected: \x1b[42m\x1b[30m foo \x1b[0m\n  received: \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>

<template>
  <CfAnsiText :text="sample" />
</template>

<CfAnsiText text={terminalOutput} />

<CfAnsiText text={terminalOutput} />

3 档尺寸

sm / md / lg 调整字号与行距，常用于 toast 内紧凑日志（sm）vs 终端面板（lg）。

背景

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

<script setup lang="ts">
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m \x1b[1mtest passed\x1b[0m\n\x1b[2m  duration:\x1b[0m \x1b[36m12ms\x1b[0m\n\x1b[31m  expected\x1b[0m: \x1b[42m\x1b[30m foo \x1b[0m\n\x1b[31m  actual\x1b[0m  : \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfAnsiText :text="sample" size="sm" />
    <CfAnsiText :text="sample" size="md" />
    <CfAnsiText :text="sample" size="lg" />
  </div>
</template>

<script setup>
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m \x1b[1mtest passed\x1b[0m\n\x1b[2m  duration:\x1b[0m \x1b[36m12ms\x1b[0m\n\x1b[31m  expected\x1b[0m: \x1b[42m\x1b[30m foo \x1b[0m\n\x1b[31m  actual\x1b[0m  : \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfAnsiText :text="sample" size="sm" />
    <CfAnsiText :text="sample" size="md" />
    <CfAnsiText :text="sample" size="lg" />
  </div>
</template>

<CfAnsiText text={log} size="sm" />
<CfAnsiText text={log} size="lg" />

<CfAnsiText text={log} size="sm" />
<CfAnsiText text={log} size="lg" />

API

属性	类型	默认值	说明
`text`	`string`	—	含 ANSI 转义的字符串
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`wrap`	`boolean`	`true`	软换行
`preserveWhitespace`	`boolean`	`true`	`<pre>` 行为

支持的 SGR 代码：0 1 2 3 4 7 22 23 24 27 30-37 39 40-47 49 90-97 100-107。