Vue TUI
Vue TUI 是面向 Vue 3 的 terminal UI component library 和 renderer 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。
运行时支持
发布包的 CLI/runtime 目标支持 Node.js >=16.17。仓库开发、构建、文档与 release 校验仍建议使用 Node.js 20；这是工具链要求，不代表运行时要求。
入口选择
| 入口 | 稳定性 | 主要用途 |
|---|---|---|
@simon_he/vue-tui | Public | Browser-safe terminal core、DOM renderer、稳定 Vue 组件和 input host plugin |
@simon_he/vue-tui/core | Public | terminal core、buffer-facing types、ANSI/theme/path/hyperlink helpers |
@simon_he/vue-tui/renderer/dom | Public | DOM renderer factory 和 renderer capabilities |
@simon_he/vue-tui/vue | Advanced | 扩展 Vue 组件、composables、router helpers 和 Vue runtime internals |
@simon_he/vue-tui/runtime | Advanced | runtime wiring、selection helpers 和 clipboard abstraction |
@simon_he/vue-tui/observability | Advanced | frame perf store、profiler hooks 和 trace helpers |
@simon_he/vue-tui/cli | Public | Node-only headless app、stdin driver、stdout renderer、path provider、recording |
@simon_he/vue-tui/markdown | Public | TMarkdownText、TVirtualMarkdown、markdown parser、block source |
@simon_he/vue-tui/mermaid | Public | optional beautiful-mermaid bridge、renderer helper、wrapper component |
@simon_he/vue-tui/experimental | Experimental | TVirtualList、TLogView、TLog companions、append-only log store |
@simon_he/vue-tui/agent | Experimental | agent/console 常用的 transcript、tool-call、log、markdown、overlay 组件聚合入口 |
@simon_he/vue-tui/agent/mermaid | Experimental | agent namespace 下的 optional Mermaid bridge |
稳定面是 terminal core、DOM renderer、CLI runtime、基础 Vue 组件、markdown API 和 optional Mermaid bridge。/experimental 和 /agent API 仍可能在下一个 stable release 前变化；生产应用建议把这些 import 隔离在少量边界文件内。agent 代码需要 Mermaid wrapper 时可以用 /agent/mermaid，不改变 /agent 主入口的 optional peer 边界。
快速路径
完整 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 run:agent-console:terminal
pnpm run example:tlog-view-lab
pnpm run example:agent-console
pnpm run example:agent-console:smoke发布前完整验证：
bash
pnpm run release:dry-run