Vue TUI
Vue TUI 是面向 Vue 3 的 terminal UI toolkit。你可以用同一套组件模型渲染到浏览器 DOM,也可以渲染到真实终端 stdout;适合构建 CLI、terminal-style dashboard、日志视图、markdown transcript 和 agent console。
适合什么场景
- 浏览器里的 terminal UI、playground、文档 demo 和视觉验收页面
- 真实终端里的 Vue 组件式 CLI
- 需要 DOM renderer、stdout renderer 和 headless tests 共用一套 UI 逻辑的项目
- 大列表、append-only log、streaming markdown、agent transcript 这类高吞吐界面
安装
bash
pnpm add @simon_he/vue-tui vueVue 是 peer dependency。当前发布包支持 Vue >=3.3.0 <4。
入口选择
| 入口 | 稳定性 | 主要用途 |
|---|---|---|
@simon_he/vue-tui | Core | Terminal runtime、基础组件、DOM/stdout renderer、events、router、runtime |
@simon_he/vue-tui/markdown | Focused | TMarkdownText、TVirtualMarkdown、markdown parser、block source |
@simon_he/vue-tui/experimental | Experimental | TVirtualList、TLogView、TLog companions、append-only log store |
/experimental API 仍可能在下一个 stable release 前变化。生产应用建议把这些 import 隔离在少量边界文件内。
快速路径
完整 props / events 以 组件 API(自动生成) 为准。
核心模型
| 层级 | 内容 |
|---|---|
| Core | createTerminal()、buffer、planes、ANSI、scrollback |
| Renderer | DOM renderer、stdout renderer、row cache、ANSI output |
| Vue Layer | TerminalProvider、布局组件、交互组件、runtime、router |
| Events | pointer / keyboard / wheel 映射、capture/bubble、focus |
常见组合是把 transcript、chrome、input 和 overlay 分到不同 TRenderPlane,让高频正文更新和低频 UI chrome 拆开 repaint。
示例命令
bash
pnpm -C examples/basic dev
pnpm run run:basic:terminal
pnpm run example:tlog-view-lab
pnpm run example:agent-console
pnpm run example:agent-console:smoke发布前完整验证:
bash
pnpm run release:dry-run