OpenCode 源码解析 · 第 13 讲
OpenCode 源码解析 第 13 讲：TUI 终端界面——Solid.js 驱动的交互式终端 基于 dev 分支源码 · 2026-07-20 一、TUI：OpenCode 的交互式终端界面 前十二讲覆盖了 OpenCode 从 CLI 到 Control Plane 的核心能力。这一讲进入 TUI（Terminal User Interface） ——OpenCode 的交互式终端界面，基于 Solid.js 和 @opentui/solid 构建。TUI 模块横跨 packages/tui/ ，约 13,318 行代码 ，是整个系统的用户交互层。 📦 本讲核心文件 packages/tui/src/app.tsx （1131 行）— TUI 应用入口与组件树 packages/tui/src/keymap.tsx （286 行）— 键盘映射系统 packages/tui/src/parsers-config.ts （386 行）— 配置解析器 packages/tui/src/routes/ （6 文件）— 路由系统 packages/tui/src/component/ （20+ 文件）— UI 组件库 二、TUI 应用架构 app.tsx （1131 行）是 TUI 的核心入口，使用 Solid.js 构建组件树，通过 Provider 模式管理全局状态。 1. 组件树结构 📄 tui/src/app.tsx (第 1-80 行) import { render, TimeToFirstDraw, useRenderer, useTerminalDimensions } from "@opentui/solid" import { createDefaultOpenTuiKeymap } from "@opentui/keymap/opentui" import { Deferred, Effect } from "effect" import { Global } from "@opencode-ai/core/global" import { Flag } from "@opencode-ai/core/flag/flag" import { ClipboardProvider, useClipboard } from "./context/clipboard" import { ExitProvider, useExit } from "./context/exit" import { EpilogueProvider } from "./context/epilogue" import { RouteProvider, useRoute } from "./context/route" import { Switch, Match, createEffect, createMemo, ErrorBoundary, createSignal, onMount, onCleanup, batch, Show, on, } from "solid-js" import { TuiPathsProvider, TuiStartupProvider, TuiTerminalEnvironmentProvider, useTuiStartup } from "./context/runtime" import { DialogProvider, useDialog } from "./ui/dialog" import { ProjectProvider, useProject } from "./context/project" import { SDKProvider, useSDK } from "./context/sdk" // ... 30+ Provider 导入 设计亮点： TUI 使用 Solid.js 的响应式系统，通过 30+ Provider 管理全局状态。每个 Provider 封装一个领域的状态，如剪贴板、退出、路由、项目、SDK 等。 2. Provider 层级 TUI 的 Provider 层级从外到内： 层级 Provider 职责 L1 TuiPathsProvider 路径管理 L2 T…
阅读全文：OpenCode 源码解析 第 13 讲