Skip to content

index.md

Latest commit

 

History

History
111 lines (84 loc) · 7.61 KB

index.md

File metadata and controls

111 lines (84 loc) · 7.61 KB
Raw
title Vue TUI - Vue 3 Terminal UI Components
description Build terminal-style Vue 3 interfaces for browser DOM, CLI stdout, logs, markdown transcripts, virtual lists, and agent consoles.
<script setup lang="ts"> import DocsLandingTerminal from './.vitepress/components/DocsLandingTerminal.vue' </script>

Vue TUI

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 这类高吞吐界面

安装

pnpm add @simon_he/vue-tui vue

Vue 是 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 TVideo、TVirtualList、TLogView、TLog companions、append-only log store
@simon_he/vue-tui/experimental/video/node Experimental Node-only lazy FFmpeg frame source and optional yt-dlp URL resolver
@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 边界。

快速路径

目标 先读这些页面
英文入口页 Vue Terminal UI、Vue CLI UI、CLI Stdout Renderer、Terminal Log Viewer、Markdown Transcript
了解能力边界 Live Showcase、组件总览、组件验收、核心 API
跑示例 Examples Index、Agent Console 示例
做 CLI Runtime、CLI Events、Platform Contracts、Terminal UI Best Practices
做高吞吐 UI Terminal UI Best Practices、Performance、Benchmarks、OpenTUI Solid 对比协议、高吞吐渲染、TLogView Lab
准备发布 API Maturity、1.0 Release Candidate、TLogView Release Readiness

完整 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。

示例命令

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

发布前完整验证：

pnpm run release:dry-run

反馈