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

TerminalPane 终端面板

Terminal / Output / CommandLine 3 个 tab 的终端面板外壳。

基础用法

预定义 3 个 tab（id：terminal、output、commandline），每个 tab 内容由消费方通过 named slot #panel-{tabId}（Vue）/ slots["panel-{tabId}"]（React）填入。也可通过 tabs prop 覆盖默认列表。

来源：terminal.html。

背景

完整终端面板槽，可对接 xterm.js。

src/App.vue

<script setup lang="ts">
import { CfTerminalPane, CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[32m✓\x1b[0m build succeeded\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[36m→\x1b[0m running tests…\n';
</script>
<template>
  <div style="height: 280px;">
    <CfTerminalPane>
      <template #panel-terminal><p style="color: var(--fg-2);">完整终端面板槽，可对接 xterm.js。</p></template>
      <template #panel-output>
        <CfAnsiText :text="sample" />
      </template>
      <template #panel-commandline><p style="color: var(--fg-2);">命令输入行 + 历史。</p></template>
    </CfTerminalPane>
  </div>
</template>

<script setup>
import { CfTerminalPane, CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[32m✓\x1b[0m build succeeded\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[36m→\x1b[0m running tests…\n';
</script>
<template>
  <div style="height: 280px;">
    <CfTerminalPane>
      <template #panel-terminal><p style="color: var(--fg-2);">完整终端面板槽，可对接 xterm.js。</p></template>
      <template #panel-output>
        <CfAnsiText :text="sample" />
      </template>
      <template #panel-commandline><p style="color: var(--fg-2);">命令输入行 + 历史。</p></template>
    </CfTerminalPane>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfTerminalPane slots={{
      'panel-terminal': <PanelA />,
      'panel-output': <PanelB />,
      }} />
    </>
  );
}

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	第一个 tab id	活动 tab
`tabs`	`TemplatePaneTab[]`	预设	自定义 tab 列表
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

预设的 tab id 列表导出为 PROTOCOL_TABS / NETWORK_TABS / SQL_TABS 等常量，可在自定义 tabs 时直接拿来用。

模版组件本质是 CfTabs 的语义薄壳。如果你不需要一组预定义 tab，直接用 CfTabs 即可。