第四章 第一个 TUI 应用

项目初始化

运行本教程的示例前，请先安装依赖：

cd tui-toturial/examples
npm install

这会安装以下依赖：

包	用途	版本
blessed	TUI 运行时框架	^.
tsx	TypeScript 执行器	^.
typescript	TypeScript 类型检查
@types/blessed	blessed 的类型定义

为什么使用 tsx 而不编译？话说回来，

传统方式:
.ts ──→ tsc ──→ .js ──→ node
tsx 方式:
.ts ──→ tsx ──→ 直接执行
从优势来看，无需建立步骤，即时运行。体验接近脚本语言

运行基础示例

cd tui-toturial/examples
npx tsx basic-tui.ts

您将看到一个包含按钮、列表和进度条动画的分栏 TUI 应用：

┌──────────────────────────────────────────────────────────────┐
│ TUI 基础示例 | Blessed.js | Tab切换 | ↑↓导航 | Ctrl+Q退出 │
├────────────────────┬─────────────────────────────────────────┤
│ ■ 组件展示 │ ■ 事件日志 │
│ │ │
│ 正常文本 红色 绿色 │ 程序就绪 │
│ 黄色 粗体 │ 确定按钮被点击 │
│ │ │
│ ■ 按钮 │ │
│ │ │
│ │ │
│ ■ 列表 │ │
│ ▸ 🚀 选项一 │ │
│ ⚙️ 选项二 │ │
│ 📊 选项三 │ │
│ 🔄 选项四 │ │
│ ❌ 选项五 │ •
│ │ |
│ ■ 进度条动画 | |
│ ┌─ 任务A ────┐ | |
│ | ▓▓▓░░░ % | | |
│ └────────────┘ | |
│ | |
├────────────────────┴─────────────────────────────────────────┤
│ ● 运行中 | Tab:切换焦点 ↑↓:导航 Enter:确认 Ctrl+Q:退出 │
└──────────────────────────────────────────────────────────────┘

代码详细说明

. 创建屏幕

import * as blessed from "blessed";话说回来，import type { Widgets } from "blessed";const screen = blessed.screen({
smartCSR: true,// 智能光标保存/恢复 —— 减少闪烁
fullUnicode: true。// 完整 Unicode 支持
说到title，"TUI 基础示例",use娱乐E: true,// 使用背景色擦除
resizeTimeout: 200,// resize 节流
});

关键选项解释：

`true` 大幅减少闪烁和输出量 `true` 减少终端 IO `fullUnicode` d完整 Unicode 支持`true` 防止中文/emoji 显示异常 `resizeTimeout` d窗口 resize 节流时间 `200` 避免频繁重绘

选项	作用	推荐值 & 效果
`smartCSR`
`use娱乐E`

. 布局建立

// 顶部标题栏 const titleBar = blessed.box({ 至于parent。screen,top: 0,left: "center",width: "100%",height:1,content:" {bold}TUI 基础示例{/bold} | Ctrl+Q退出 ",style:{ fg:"white",bg:"#2255aa"},tags:true,});

// 左侧面板 const leftPanel = blessed.box({ 至于parent，screen,top: titleBar.height,left: "0"。width: "30%",bottom:"1",// 为状态栏预留1行高度 border的观点是，{ type:"line",fg:"#44aacc"},style:{ fg:"white",bg:"#112233"},padding:{ left:1,right:1},});

//右侧面板 const rightPanel = blessed.box({ 从parent来看，screen,top:titleBar.height,left:"30%",width:"70%"。bottom:"1",label:"事件日志",border:{ type:"line",fg:"#cc8844"},style:{ fg:"#cccccc",bg:"#0d0d0d"},scrollable:true,alwaysScroll:true,});

布局计算规则 css top + height + bottom ≤ 屏幕高度 left + width + right ≤ 屏幕宽度 使用百分比时值基于当前终端尺寸动态计算。使用 `shrink` 时尺寸由内容决定。

. 常见痛点：布局错位 & 看不到组件？

.交互组件示例

// 按钮 – 确定 const btnOk = blessed.button({ 再看parent，leftPanel,top:2,left:"center"。width:"12",height:1,content:"",align:"center",style:{ fg这方面，"white",bg:"#008800",focus:{bg:"#44cc44"},hover:{bg:"#00aa00"},},mouse:true,});btnOk.on=>log);

// 列表 const list = blessed.list({ 说到parent，leftPanel,top:5。left:"%5",width:"90%",height:8,items:,style:{ selected:{fg:"black",bg:"#88ccff"},},keys:true,vi:true,mouse:true,});list.on=>log.trim}`));

组件关键属性速查表

\ <\/ad> `shrink `<\/ t d> 根据内容自动调整尺寸 <\/ t d> ` true ` <\/ tbody>

属性	作用	示例值
`mouse`	启用鼠标交互	`true`
`keys`	启用键盘导航	`true`
`vi`	Vim 风格键位	`true `<\/ td>
`inputOnFocus `<\/ t d> 获取焦点后自动进入输入模式 <\/ t d> ` true `

. 全局快捷键与焦点循环

typescript // 全局退出 screen.key=>{ key.ignore=true;process.exit;})，// Tab 循环焦点 const focusable=;let focusIdx=0;screen.key=>{ focusIdx=%focusable.length;focusable.focus;})，screen.key=>{ focusIdx=%focusable.length;focusable.focus;})，

。

---