Skip to main content

TUI — @mariozechner/pi-tui

概述​

极简的终端 UI 框架，带差分渲染和同步输出，实现无闪烁的交互式 CLI 应用。

特性​

  • 差分渲染：三策略渲染系统，只更新变化的部分
  • 同步输出：使用 CSI 2026 实现原子化屏幕更新（无闪烁）
  • 括号粘贴模式：正确处理大量粘贴
  • 组件化：简单的 Component 接口
  • 主题支持：可自定义样式
  • 内置组件：Text、TruncatedText、Input、Editor、Markdown、Loader、SelectList、SettingsList、Spacer、Image、Box、Container
  • 内联图片：支持 Kitty 或 iTerm2 图形协议

快速开始​

import { TUI, Text, Editor, ProcessTerminal } from "@mariozechner/pi-tui";

// 创建终端
const terminal = new ProcessTerminal();

// 创建 TUI
const tui = new TUI(terminal);

// 添加组件
tui.addChild(new Text("欢迎使用我的应用！"));

const editor = new Editor(tui, editorTheme);
editor.onSubmit = (text) => {
  console.log("提交了:", text);
  tui.addChild(new Text(`你说: ${text}`));
};
tui.addChild(editor);

// 启动
tui.start();

核心 API​

TUI​

主管道，管理组件和渲染。

const tui = new TUI(terminal);
tui.addChild(component);
tui.removeChild(component);
tui.start();
tui.stop();
tui.requestRender(); // 请求重渲染

Overlay（覆盖层）​

在现有内容上渲染组件，用于对话框、菜单等。

// 显示覆盖层
const handle = tui.showOverlay(component, {
  width: "80%",        // 宽度
  height: "50%",       // 高度
  anchor: 'center',   // 锚点位置
});

// 关闭覆盖层
handle.close();

内置组件​

组件说明
Text文本显示
TruncatedText截断文本
Input单行输入
Editor多行编辑器
MarkdownMarkdown 渲染
Loader加载指示器
SelectList选择列表
SettingsList设置列表
Box边框盒子
Container容器

差分渲染策略​

TUI 使用三种渲染策略：

  1. 全量渲染：整个界面重绘
  2. 增量渲染：只更新变化的行
  3. 同步渲染：使用特殊序列确保原子更新

翻译自 @mariozechner/pi-tui