用途:该技能用于指导以 OpenTUI 的原生命令式 API(非 React/SolidJS 封装)开发终端用户界面,适合构建 TUI、定制组件、理解核心架构、性能优化与底层调试。若需 React 或 SolidJS 开发,应改用对应的 /opentui-react 或 /opentui-solid;项目脚手架与示例则用 /opentui-projects。
主要能力与组件:TextRenderable(带样式文本)、BoxRenderable(带边框/背景的容器)、GroupRenderable(布局容器)、InputRenderable(单行输入)、SelectRenderable(下拉选择)、ScrollBoxRenderable(可滚动区域)、CodeRenderable(语法高亮代码)。均从 @opentui/core 导入。
安装与运行:使用 bun install @opentui/core 安装依赖;原生模块需要 Zig,可从 https://ziglang.org/download/ 安装。基本模式为 createCliRenderer 创建渲染器,实例化组件、add 到根节点后 start(),并通过 renderer.on("key", ...) 处理 Ctrl+C 等退出逻辑。
布局与样式:通过 GroupRenderable.setStyle 配置 flexDirection、justifyContent、alignItems、width、height 等 Yoga(CSS Flexbox)属性;颜色可用 new Color(r,g,b)、Color.fromInts、parseColor("#00FF00") 创建,配合 backgroundColor、foregroundColor、borderStyle、paddingLeft/Right 等样式。更多属性见 LAYOUT.md 与 STYLING.md。
输入与动画:支持渲染器级键盘事件与组件级事件(如 InputRenderable 的 submit、change);动画使用 Timeline,设置 duration、easing,通过 timeline.to 与 onUpdate 调用 renderer.render() 后 play()。调试可用 consoleOverlay 附加到渲染器,使 console.log 显示在终端覆盖层。
限制:资料未提供价格、收费、平台兼容范围与性能指标等细节,暂未提供;具体 API 完整列表需参考随附文档(LAYOUT.md、INPUT.md、STYLING.md、ANIMATION.md 等)。