文档

tui.builders 是一个用于设计终端界面的可视化拖拽编辑器。目前可生成面向 SuperLightTUI (SLT) 的生产级 Rust 代码，后续还将支持更多框架。

使用方式

打开编辑器。
选择模板或从空白项目开始。
从组件面板添加组件。
在检查器中调整属性、布局与样式。
导出生成的 Rust 代码。

前置条件：安装 Rust 并确保 cargo 在命令行中可用。

编辑器指南

组件面板

将组件拖入树中，或点击以插入到当前选中位置。

画布

实时显示当前组件树的终端预览。

检查器

在同一处编辑组件属性、flex 布局参数与样式 token。

代码预览

编辑时实时查看生成的 Rust 代码更新。

导出

可下载为 Cargo 项目 zip、导出单个 .rs 文件，或复制到剪贴板。

组件目录

按类别分组展示所有可用组件。

布局 (8)

组件	SLT 函数	描述	框架
Container	`ui.container().col(...) / ui.row(...)`	支持边框、间距和布局控制的弹性父容器。	SLTInk
Spacer	`ui.spacer()`	占用剩余空间，用于对齐周围内容。	SLTInk
Separator	`ui.separator()`	绘制一条水平分隔线。	SLTInk
Scrollable	`ui.scrollable(&mut state)`	为高度超出区域的内容添加滚动行为。	SLTInk
Screen	`ui.screen(...)`		SLT
Grid	`ui.grid(cols, ...)`	将子元素排列为响应式多列布局。	SLTInk
Divider Text	`ui.divider_text(label)`	渲染带标签的分节分隔线。	SLTInk
Accordion	`ui.accordion(title, &mut open, ...)`	可展开的折叠区域，用于逐步展示内容。	SLTInk

文本 (4)

组件	SLT 函数	描述	框架
Text	`ui.text(value)`	渲染纯终端文本。	SLTInk
Markdown	`ui.markdown(value)`	使用 SLT 内联格式渲染 Markdown。	SLTInk
Link	`ui.link(label, url)`	创建可点击的终端超链接（OSC 8）。	SLTInk
Code Block	`ui.code_block(value)`	展示带语法高亮的代码片段。	SLTInk

输入 (11)

组件	SLT 函数	描述	框架
Text Input	`ui.text_input(&mut state)`	单行文本输入框。	SLTInk
Textarea	`ui.textarea(&mut state, rows)`	多行文本编辑区域。	SLTInk
Button	`ui.button(label)`	支持变体的可点击操作按钮。	SLTInk
Slider	`ui.slider(label, &mut value, min..=max)`	在指定范围内调整数值。	SLTInk
Confirm	`ui.confirm(question, &mut state)`	二元确认交互控件。	SLTInk
Checkbox	`ui.checkbox(label, &mut checked)`	带勾选标记的布尔选项开关。	SLTInk
Toggle	`ui.toggle(label, &mut on)`	开关样式的布尔控件。	SLTInk
Select	`ui.select(&mut state)`	下拉式单项选择器。	SLTInk
Radio	`ui.radio(&mut state)`	互斥选项组。	SLTInk
Multi-Select	`ui.multi_select(&mut state)`	从列表中选择多个选项。	SLTInk
Calendar	`ui.calendar(...)`		SLT

数据 (8)

组件	SLT 函数	描述	框架
Table	`ui.table(&mut state)`	支持选中的结构化行列表格。	SLTInk
List	`ui.list(&mut state)`	适用于菜单式交互的垂直可选列表。	SLTInk
Tree	`ui.tree(&mut state)`	可展开的层级节点查看器。	SLTInk
Dir Tree	`ui.directory_tree(...)`		SLT
File Picker	`ui.file_picker(...)`		SLT
Virtual List	`ui.virtual_list(&mut state, visible, ...)`	适用于大数据集的虚拟化列表。	SLT
Stat	`ui.stat(label, value)`	带可选趋势和颜色变体的紧凑指标卡片。	SLTInk
Def. List	`ui.definition_list(&[(term, value)])`	对齐的键值详情列表。	SLTInk

导航 (5)

组件	SLT 函数	描述	框架
Tabs	`ui.tabs(&mut state)`	跨内容面板的标签页导航。	SLTInk
Cmd Palette	`ui.command_palette(&mut state)`	可搜索的命令启动浮层。	SLT
Help Bar	`ui.help(&[(key, desc)])`	显示快捷键绑定的底部辅助栏。	SLTInk
Breadcrumb	`ui.breadcrumb(&[segments])`	路径式导航轨迹。	SLTInk
Key Hint	`ui.key_hint(key)`	内联键盘提示标签。	SLTInk

反馈 (10)

组件	SLT 函数	描述	框架
Progress	`ui.progress(value)`	简洁的进度指示器。	SLTInk
Progress Bar	`ui.progress_bar(value, width)`	宽度可控的进度条。	SLTInk
Spinner	`ui.spinner(&state)`	动画加载指示器。	SLTInk
Toast	`ui.toast(&mut state)`	定时通知堆叠提示。	SLTInk
Timer	`ui.timer_display(...)`		SLT
Rich Log	`ui.rich_log(...)`		SLT
Tooltip	`ui.tooltip(...)`		SLTInk
Alert	`ui.alert(message, level)`	内联严重性提示横幅。	SLTInk
Badge	`ui.badge(label)`	紧凑的状态或元数据标签。	SLTInk
Empty State	`ui.empty_state(title, subtitle)`	空屏幕的占位内容。	SLTInk

数据可视化 (7)

组件	SLT 函数	描述	框架
Bar Chart	`ui.bar_chart(&[(label, value)], h)`	分类对比柱状图。	SLTInk
Sparkline	`ui.sparkline(&values, width)`	小型内联趋势图。	SLTInk
Chart	`ui.chart(builder, w, h)`	支持多系列的可配置图表构建器。	SLT
Candlestick	`ui.candlestick(&candles, up, down)`	OHLC 市场风格的蜡烛图渲染。	SLT
Heatmap	`ui.heatmap(&grid, w, h, low, high)`	颜色强度矩阵可视化。	SLT
Scatter	`ui.scatter(&points, w, h)`	在两个轴上绘制点分布的散点图。	SLT
Histogram	`ui.histogram(&values, w, h)`	频率分布直方图。	SLT

浮层 (2)

组件	SLT 函数	描述	框架
Modal	`ui.modal(\|ui\| { ... })`	带遮罩的弹出对话框层。	SLTInk
Overlay	`ui.overlay(\|ui\| { ... })`	无遮罩的浮动内容层。	SLTInk

AI (3)

组件	SLT 函数	描述	框架
Streaming Text	`ui.streaming_text(&mut state)`	逐 token 的文本流输出。	SLT
Stream MD	`ui.streaming_markdown(&mut state)`	流式 Markdown 渲染器。	SLT
Context Bar	`ui.context_bar(&items)`	用于 AI 工作流的上下文 token/来源标签条。	SLTInk

表单 (1)

组件	SLT 函数	描述	框架
Form Field	`ui.form_field(&mut field)`	可组合的表单输入字段单元。	SLTInk

媒体 (2)

组件	SLT 函数	描述	框架
Sixel Image	`ui.sixel_image(...)`		SLT
Image	`ui.image(&img)`	基于 RGBA 数据的半块像素图像渲染。	SLT

代码生成

tui.builders 会通过 generateRustCode() 将编辑器树转换为 Rust，并输出可直接运行的 main.rs，目标为 SLT v0.17.1，使用 slt::run_with() 与 RunConfig。

示例: container + text + button

use slt::*;
use std::time::Duration;

fn main() -> std::io::Result<()> {
    let config = RunConfig::default()
        .theme(Theme::dark())
        .mouse(true)
        .tick_rate(Duration::from_millis(16));

    slt::run_with(
        config,
        |ui: &mut Context| {
            if ui.key('q') { ui.quit(); }

            ui.bordered(Border::Rounded).pad(1).gap(1).col(|ui| {
                ui.text("Hello from tui.builders").bold().fg(Color::Cyan);
                if ui.button("Click me").clicked {
                    // handle click
                }
                ui.help(&[("q", "quit")]);
            });
        },
    )
}

运行代码

tui.builders 生成的所有代码都可以直接在 SuperLightTUI 上编译。以下是运行方法。

方法1：导出为 Cargo 项目 (.zip)

在编辑器工具栏点击 Export → Cargo Project。解压后运行：

unzip my-tui-app.zip
cd my-tui-app
cargo run

方法2：导出为 .rs 文件

点击 Export → .rs File。手动创建 Cargo 项目：

cargo new my-tui-app
cd my-tui-app
cargo add superlighttui
# Replace src/main.rs with your exported file
cargo run

方法3：复制到剪贴板

点击 Export → Copy。粘贴到已有 superlighttui 依赖的 Cargo 项目中。

# In your Cargo.toml:
[dependencies]
superlighttui = "0.17.1"

注意：需要安装 Rust 和 Cargo。所有生成代码针对 SLT v0.17.1，并通过自动测试验证编译。运行中的 TUI 应用按 q 退出。

模板

tui.builders 提供 25 个模板，覆盖仪表盘、表单、导航流程和运维工具场景。

浏览 /templates 打开 /editor

键盘快捷键

`q`	在生成的 TUI 应用中退出。
`Tab`	将焦点移动到下一个组件。
`Enter`	选中或激活当前聚焦的控件。
`Ctrl+C`	立即退出应用。

支持的框架

tui.builders 可为多个 TUI 框架生成代码。SuperLightTUI 已正式支持，Ink 以 Beta 形式提供。

已支持

SuperLightTUI (Rust) · v0.17.1

即时模式、zero-unsafe、flexbox 布局、50+ 组件、主题、动画、AI 原生组件

公测

Ink (TypeScript) · v6

由 Vadim Demedes 开发的基于 React 的终端 UI 框架。现已提供 37+ 组件的 Beta 版本。

计划中

Ratatui (Rust) · Textual (Python) · Bubbletea (Go)