用途:该技能面向使用 OpenTUI 这一 TypeScript 库构建终端用户界面(TUI)的开发场景,资料明确其可用于新建 TUI 或 CLI 应用、维护基于 OpenTUI 的项目、制作交互式终端组件、实现键盘导航与事件处理、在终端中展示代码高亮、diff 查看器、文本编辑器、终端表单,以及进行样式布局、调试和增强。提及相关关键词包括 TUI、terminal UI、CLI app、OpenTUI、terminal components。
主要能力:OpenTUI 采用组件化架构,可像 Web 框架一样组合可复用组件;提供 React 集成(JSX 声明式终端 UI)以及 SolidJS reconciler;布局基于 Yoga 的类 Flexbox 系统;内置输入框、选择器、代码查看器、diff 查看器、Scrollbox、Tab 选择等丰富组件;支持 TypeScript 严格模式;渲染层由 Zig 实现以追求性能。核心包包括 @opentui/core(含命令式 API 与基础组件)、@opentui/react(React reconciler)、@opentui/solid。
使用方式:可通过 bun create tui --template react 创建 React 模板项目,随后 cd my-tui-app、bun install、bun run index.tsx;也可手动执行 bun install @opentui/core @opentui/react react。基本用法是调用 createCliRenderer 创建渲染器,再用 createRoot(renderer).render(<App />) 挂载组件,最后调用 renderer.start() 启动渲染循环。TypeScript 配置需设置 jsxImportSource 为 @opentui/react、moduleResolution 为 bundler 并启用 strict。资料还给出渲染器选项(如 useAlternateScreen、useMouse、targetFps)、Flexbox 布局属性、颜色与文本属性、各 React 组件用法,以及 useRenderer、useKeyboard、useTerminalDimensions、useOnResize、useTimeline 等 Hooks。
适用场景:适合开发终端交互界面、多视图应用、模态框、焦点管理、列表选择、代码展示与 diff 查看等。
限制:资料未说明授权、收费、价格或平台兼容范围;未给出除 Bun 之外的具体运行环境要求;部分示例在资料中被截断,故不补全。实际使用需以官方文档与项目自身要求为准。