SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场opentui

opentui

编程与开发

查看项目

更新于 10-14 20:56

技能介绍

用途

OpenTUI 是一个用于构建终端用户界面（TUI）的开发平台。本技能为使用 OpenTUI 构建 TUI 提供整合式参考，帮助开发者通过决策树找到合适的框架与组件，并加载详细文档。适用于任何 TUI 任务，包括组件、布局、键盘与键位映射、动画、测试等。

主要能力

OpenTUI 提供三种框架入口：

  • Core：命令式 API，包含全部基础原语，适合需要完全控制、追求最大性能、无框架开销的场景，也适合在 OpenTUI 之上构建库或框架。
  • React：React 协调器，用于声明式 TUI，适合熟悉 React 组件模式的开发者。
  • Solid：SolidJS 协调器，用于声明式 TUI，适合追求细粒度响应式与最优重渲染的开发者。

跨领域概念包括：布局（Yoga/Flexbox 布局系统）、组件、键盘（底层键盘输入处理）、键位映射（声明式分层键位绑定，@opentui/keymap）、动画（基于时间线的动画）、测试（测试渲染器与快照）。

组件按类别划分：

  • 文本与显示：text、ascii-font、image、time-to-first-draw、styled text、qr-code
  • 容器：box、scrollbox、scrollbar、embedded-terminal、borders
  • 输入：input、textarea、select、tab-select、slider
  • 代码与差异：code、line-number、diff、markdown、text-table

附加包：

  • @opentui/keymap：分层键位绑定/命令引擎（Bun 或 Node，无 FFI）
  • @opentui/qrcode：二维码组件
  • @opentui/ssh：通过 SSH 提供 TUI 服务
  • @opentui/three：Three.js WebGPU 渲染器（原 core/src/3d）
  • @opentui/examples：可运行示例（原 core/src/examples）

Core 还提供已加载/流式/捕获的音频、原生图像、主机与终端剪贴板服务，以及 OSC 桌面通知。

使用方式

关键规则：

  • 新项目使用 create-tui，参见各框架 REFERENCE.md 快速开始。
  • create-tui 选项必须位于参数之前。bunx create-tui -t react my-app 可用，bunx create-tui my-app -t react 不可用。
  • 切勿直接调用 process.exit()，应使用 renderer.destroy()（参见 core/gotchas.md）。
  • React/Solid 中文本样式需要嵌套标签，使用修饰元素而非 props（参见 components/text-display.md）。

参考文件结构：每个框架在 ./references/<framework>/ 下包含 5 个文件：REFERENCE.md（概述、何时使用、快速开始，始终先读）、api.md（运行时 API、组件、hooks，编写代码时读）、configuration.md（设置、tsconfig、打包，配置项目时读）、patterns.md（常见模式、最佳实践，实现指导时读）、gotchas.md（陷阱、限制、调试，故障排除时读）。跨领域概念在 ./references/<concept>/ 下以 REFERENCE.md 为入口。

阅读顺序：先读所选框架的 REFERENCE.md，再根据任务读取相关文件——构建组件读 api.md 与 components/<category>.md；设置项目读 configuration.md；布局/定位读 layout/REFERENCE.md；键盘/输入处理读 keyboard/REFERENCE.md；分层键位绑定/命令读 keymap/REFERENCE.md；动画读 animation/REFERENCE.md；故障排除读 gotchas.md 与 testing/REFERENCE.md。

示例路径：

./references/react/REFERENCE.md           # React 从这里开始
./references/react/api.md              # React 组件与 hooks
./references/solid/configuration.md    # Solid 项目设置
./references/components/inputs.md      # Input、Textarea、Select 文档
./references/core/gotchas.md           # Core 调试技巧

运行时说明：OpenTUI 运行于 Bun，原生构建使用 Zig。运行时要求与构建指导参见 ./references/core/gotchas.md。

适用场景

  • 需要显示内容：纯文本或样式文本、带边框/背景的容器、可滚动内容区、独立滚动条、ASCII 艺术横幅/标题、PNG/JPEG/WebP/GIF 图像、首绘诊断、二维码、嵌入式子终端/VT 输出（仅 Core）、带边框/换行的数据表格、语法高亮代码、差异查看器（统一/分屏、hunk 导航）、带诊断的行号、Markdown 内容（流式）。
  • 需要用户输入：单行文本字段、多行文本编辑器、垂直列表选择、水平标签选择、值滑块、声明式/分层键位绑定、自定义键盘快捷键。
  • 需要布局/定位：Flexbox 风格布局（行、列、换行）、绝对定位、响应终端尺寸、内容居中、复杂嵌套布局。
  • 需要动画：基于时间线的动画、缓动函数、属性过渡、循环动画。
  • 需要处理输入：键盘事件（按下、释放）、分层绑定/命令/引导键、焦点管理、粘贴事件、鼠标事件、文本选择与选中即复制、主机/终端剪贴板服务或 OSC 52。
  • 需要测试 TUI：快照测试、交互测试、测试渲染器设置、调试测试。
  • 需要平台能力：播放已加载声音或 MP3/FLAC 流、捕获麦克风 PCM/录制 WAV、解码/变换/显示图像、读写主机或终端剪贴板、桌面通知（OSC 9/777/99）、自定义 stdin/stdout（PTY、xterm.js）、通过 SSH 提供 TUI 服务。
  • 需要调试/故障排除：运行时错误与崩溃、布局问题、输入/焦点问题、复现与回归测试。

限制

OpenTUI 运行于 Bun，原生构建使用 Zig，需满足相应运行时要求。具体版本要求、平台支持范围、性能上限等细节暂未提供。各组件与 API 的完整参数、返回值及行为细节需查阅对应参考文件。

资源

  • 仓库：https://github.com/anomalyco/opentui
  • Core 文档：https://github.com/anomalyco/opentui/tree/main/packages/core/docs
  • 示例：https://github.com/anomalyco/opentui/tree/main/packages/examples/src
  • Awesome List：https://github.com/msmps/awesome-opentui