Preview Updated 2026-05-10

Terminal 终端显示

macOS 风格的只读终端展示。三个红 / 黄 / 绿圆点 + 标题 + 等宽内容；行可分 output / command / error / warning / success / info 着色。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

lines 接收字符串数组或 { text, type }[]。type='command' 时行首加 prompt（默认 $），并把文字加亮。终端不接收输入；仅作为构建日志 / oncall 操作记录 / CI 输出展示。

背景视口

$pnpm --filter @chufix-design/vue build

> @chufix-design/[email protected] build

> vite build && vue-tsc --emitDeclarationOnly --outDir dist

vite v5.4.21 building for production...

transforming...

✓ 843 modules transformed.

rendering chunks...

dist/style.css 389.84 kB │ gzip: 55.67 kB

dist/index.js 1,157.44 kB │ gzip: 262.38 kB

✓ built in 4.30s

$pnpm tokens:check

tokens · ok · scanned 368 stylesheet(s), all references resolve to 152 defined tokens.

$git status

On branch main

nothing to commit, working tree clean

src/App.vue

<script setup lang="ts">
import { CfTerminal, type TerminalLine } from '@chufix-design/vue';

const lines: TerminalLine[] = [
  { type: 'command', text: 'pnpm --filter @chufix-design/vue build' },
  { type: 'output', text: '> @chufix-design/[email protected] build' },
  { type: 'output', text: '> vite build && vue-tsc --emitDeclarationOnly --outDir dist' },
  { type: 'info', text: 'vite v5.4.21 building for production...' },
  { type: 'output', text: 'transforming...' },
  { type: 'success', text: '✓ 843 modules transformed.' },
  { type: 'output', text: 'rendering chunks...' },
  { type: 'output', text: 'dist/style.css  389.84 kB │ gzip: 55.67 kB' },
  { type: 'output', text: 'dist/index.js   1,157.44 kB │ gzip: 262.38 kB' },
  { type: 'success', text: '✓ built in 4.30s' },
  { type: 'command', text: 'pnpm tokens:check' },
  { type: 'success', text: 'tokens · ok · scanned 368 stylesheet(s), all references resolve to 152 defined tokens.' },
  { type: 'command', text: 'git status' },
  { type: 'warning', text: 'On branch main' },
  { type: 'output', text: 'nothing to commit, working tree clean' },
];
</script>
<template>
  <CfTerminal :lines="lines" title="build.log" :height="320" />
</template>

<script setup>
import { CfTerminal } from '@chufix-design/vue';

const lines= [
  { type: 'command', text: 'pnpm --filter @chufix-design/vue build' },
  { type: 'output', text: '> @chufix-design/[email protected] build' },
  { type: 'output', text: '> vite build && vue-tsc --emitDeclarationOnly --outDir dist' },
  { type: 'info', text: 'vite v5.4.21 building for production...' },
  { type: 'output', text: 'transforming...' },
  { type: 'success', text: '✓ 843 modules transformed.' },
  { type: 'output', text: 'rendering chunks...' },
  { type: 'output', text: 'dist/style.css  389.84 kB │ gzip: 55.67 kB' },
  { type: 'output', text: 'dist/index.js   1,157.44 kB │ gzip: 262.38 kB' },
  { type: 'success', text: '✓ built in 4.30s' },
  { type: 'command', text: 'pnpm tokens:check' },
  { type: 'success', text: 'tokens · ok · scanned 368 stylesheet(s), all references resolve to 152 defined tokens.' },
  { type: 'command', text: 'git status' },
  { type: 'warning', text: 'On branch main' },
  { type: 'output', text: 'nothing to commit, working tree clean' },
];
</script>
<template>
  <CfTerminal :lines="lines" title="build.log" :height="320" />
</template>

import { CfTerminal } from '@chufix-design/react';

export default function Demo() {
  const lines: TerminalLine[] = [
    { type: 'command', text: 'pnpm --filter @chufix-design/vue build' },
    { type: 'output', text: '> @chufix-design/[email protected] build' },
    { type: 'output', text: '> vite build && vue-tsc --emitDeclarationOnly --outDir dist' },
    { type: 'info', text: 'vite v5.4.21 building for production...' },
    { type: 'output', text: 'transforming...' },
    { type: 'success', text: '✓ 843 modules transformed.' },
    { type: 'output', text: 'rendering chunks...' },
    { type: 'output', text: 'dist/style.css  389.84 kB │ gzip: 55.67 kB' },
    { type: 'output', text: 'dist/index.js   1,157.44 kB │ gzip: 262.38 kB' },
    { type: 'success', text: '✓ built in 4.30s' },
    { type: 'command', text: 'pnpm tokens:check' },
    { type: 'success', text: 'tokens · ok · scanned 368 stylesheet(s), all references resolve to 152 defined tokens.' },
    { type: 'command', text: 'git status' },
    { type: 'warning', text: 'On branch main' },
    { type: 'output', text: 'nothing to commit, working tree clean' },
  ];
  return (
    <>
      <CfTerminal lines={lines} title="build.log" height={320} />
    </>
  );
}

import { CfTerminal } from '@chufix-design/react';

export default function Demo() {
  const lines= [
    { type: 'command', text: 'pnpm --filter @chufix-design/vue build' },
    { type: 'output', text: '> @chufix-design/[email protected] build' },
    { type: 'output', text: '> vite build && vue-tsc --emitDeclarationOnly --outDir dist' },
    { type: 'info', text: 'vite v5.4.21 building for production...' },
    { type: 'output', text: 'transforming...' },
    { type: 'success', text: '✓ 843 modules transformed.' },
    { type: 'output', text: 'rendering chunks...' },
    { type: 'output', text: 'dist/style.css  389.84 kB │ gzip: 55.67 kB' },
    { type: 'output', text: 'dist/index.js   1,157.44 kB │ gzip: 262.38 kB' },
    { type: 'success', text: '✓ built in 4.30s' },
    { type: 'command', text: 'pnpm tokens:check' },
    { type: 'success', text: 'tokens · ok · scanned 368 stylesheet(s), all references resolve to 152 defined tokens.' },
    { type: 'command', text: 'git status' },
    { type: 'warning', text: 'On branch main' },
    { type: 'output', text: 'nothing to commit, working tree clean' },
  ];
  return (
    <>
      <CfTerminal lines={lines} title="build.log" height={320} />
    </>
  );
}

API

Props

属性	类型	默认	说明
`lines`	`(TerminalLine \| string)[]`	—	行数据
`prompt`	`string`	`'$'`	command 行前缀
`title`	`string`	—	顶部标题（右侧）
`height`	`number \| string`	—	高度（不传跟内容）
`follow`	`boolean`	`true`	新增行后自动滚底
`showHeader`	`boolean`	`true`	顶部三圆点条