Back to Blog

OpenCode 多端体验：TUI、桌面、Web 全覆盖

2026-04-27T11:20:00+08:00
OpenCode TUI 桌面应用 Tauri Web

OpenCode 多端体验：TUI、桌面、Web 全覆盖

我用了三个月 OpenCode，主力是 TUI 终端界面。说实话，第一次看到它启动的那个瞬间——深色背景上精致的 UI 组件、带语法高亮的 Markdown 渲染、实时滚动的 diff 面板——我还以为自己在用某个 GUI 应用。一个终端程序能做成这样，确实震撼到我了。

后来我发现，OpenCode 不只是终端里跑的 TUI。它还有桌面应用（macOS/Windows/Linux）、Web 前端（浏览器直接用）、IDE 插件（VS Code/Cursor/Zed/Windsurf）。同一段对话，你可以在终端开个头，切到桌面应用继续聊，然后在手机浏览器上查看结果。这不是画饼，是现在就能跑的架构。

这篇文章把 OpenCode 的三个主要交互界面——TUI、Desktop、Web——拆开来讲清楚，顺便聊聊安装方式和定制化能力。

本文提纲

  1. TUI：终端里的"GUI 级"体验
  2. 70+ 快捷键与 Leader Key 机制
  3. Session 侧边栏与命令面板
  4. Model Picker 与 Agent Switcher
  5. 自定义主题系统
  6. TUI 深度定制：tui.json
  7. Tauri 桌面应用：Electron 的替代方案
  8. SolidJS Web 前端：浏览器里也能用
  9. 安装方式：Homebrew、Scoop、DMG 一网打尽

TUI：终端里的"GUI 级"体验

OpenCode 的 TUI 基于 @opentui/core 构建。这个库是 OpenCode 团队自己的作品，专门为终端 UI 设计，支持 truecolor（24-bit 色彩）、Unicode 渲染、鼠标交互，还有精细的布局系统。

什么意思呢？大多数终端工具的 UI 还停留在 "文字拼凑" 阶段，最多用 ANSI 颜色码加点色彩。OpenCode 的 TUI 不一样——它渲染出来的效果接近真正的桌面应用：圆角边框、渐变色、精细的间距、实时刷新的 diff 视图。你在终端里看到代码变更的 diff，那个双列对比、语法高亮、行号标注，跟 VS Code 里的体验差不多。

启动 TUI 就一行命令：

# 在当前目录启动
opencode

# 指定项目目录
opencode /path/to/project

TUI 支持鼠标操作——点击、滚动、拖选文本都行。如果你是键盘党，可以关掉鼠标捕获（在 tui.json 里设 "mouse": false），让终端的原生选择行为生效。

对了，TUI 对终端模拟器有要求。推荐用 WezTerm、Alacritty、Ghostty 或 Kitty 这类现代终端。macOS 自带的 Terminal.app 也能跑，但部分渲染效果会打折。

70+ 快捷键与 Leader Key 机制

OpenCode 定义了超过 70 个快捷键，覆盖消息导航、Session 管理、Model 切换、输入编辑——几乎所有操作都有键盘绑定。

核心设计是 Leader Key 机制。默认 Leader Key 是 Ctrl+X。大部分操作需要先按 Ctrl+X，松开，再按下一个键。比如：

快捷键 动作
Ctrl+X n 新建 Session
Ctrl+X l Session 列表
Ctrl+X u Undo 上一条消息
Ctrl+X r Redo
Ctrl+X m 打开 Model 选择器
Ctrl+X t 切换主题
Ctrl+X s 分享当前 Session
Ctrl+X c 压缩上下文
Ctrl+X e 打开外部编辑器写长消息
Ctrl+X x 导出对话为 Markdown
Ctrl+X q 退出

Leader Key 的好处是避免快捷键冲突。终端里 Ctrl+C、Ctrl+D 这些组合本来就有系统级含义，如果再用来做快捷键就容易打架。Leader Key 先占一个组合，后面跟的键就自由了。

如果你不喜欢 Ctrl+X，可以在 tui.json 里换掉：

{
  "keybinds": {
    "leader": "ctrl+space"
  }
}

有些操作不用 Leader Key 就能触发。比如 Escape 中断当前生成、Tab 切换 Agent、Ctrl+T 在 Model 变体之间循环（比如从 Claude Sonnet 切到 Claude Opus）、Ctrl+P 打开命令面板。

不想用的快捷键可以禁用——在 tui.json 里把它设成 "none"：

{
  "keybinds": {
    "session_compact": "none"
  }
}

消息导航的快捷键设计得非常精细，Vim 党会很开心：

快捷键 动作
PageUp / Ctrl+Alt+B 上一页
PageDown / Ctrl+Alt+F 下一页
Ctrl+Alt+U 上半页
Ctrl+Alt+D 下半页
Ctrl+Alt+Y 上滚一行
Ctrl+Alt+E 下滚一行
Ctrl+G / Home 跳到第一条消息
Ctrl+Alt+G / End 跳到最后一条

输入编辑也遵循 Emacs/Readline 风格：Ctrl+A 到行首、Ctrl+E 到行尾、Alt+F/Alt+B 按单词跳转、Ctrl+W 删除前一个单词、Ctrl+K 删到行尾。这些都是肌肉记忆，不用重新学。

Session 侧边栏与命令面板

OpenCode 的 TUI 界面左侧有一个 Session 侧边栏，按 Ctrl+X B 可以切换显示。侧边栏列出了所有历史 Session，显示标题和时间戳，选中就能跳转过去继续聊。

这个侧边栏还有一个很实用的功能：Subagent 导航。当 OpenCode 执行复杂任务时，它会创建子 Session（Subagent）。侧边栏里以树状结构展示父子关系，用 Ctrl+X ↓ 进入子 Session，→ 在同级之间循环，↑ 回到父 Session。你可以实时观察每个 Subagent 在干什么——这种可视化程度在 CLI 工具里很少见。

命令面板（Command Palette）用 Ctrl+P 打开。它集合了所有 / 斜杠命令，模糊搜索即时过滤：

  • /new — 新建 Session
  • /sessions — 浏览历史 Session
  • /models — 查看可用 Model
  • /undo / /redo — 撤销/重做
  • /share — 分享对话
  • /compact — 压缩上下文
  • /init — 生成 AGENTS.md
  • /help — 帮助
  • /connect — 配置 Provider

命令面板的好处是你不用背命令——模糊搜索几个字母就能找到，比纯 CLI 的 Tab 补全效率更高。

Model Picker 与 Agent Switcher

OpenCode 支持 75+ 个 LLM Provider，通过 Models.dev 目录管理。切换 Model 有三种方式：

  1. Model Picker（Ctrl+X M）：打开完整的 Model 列表，带搜索、收藏、最近使用标记
  2. 快速循环（F2）：在最近使用的两个 Model 之间一键切换
  3. 变体切换（Ctrl+T）：在同一个 Model 的不同变体之间循环（比如 Claude Sonnet 的标准版和 thinking 版）

Agent Switcher 用 Tab 键触发。OpenCode 内置了多个 Agent（coder、task、ask 等），每个有不同能力。按 Tab 在 Agent 之间循环，Shift+Tab 反向循环。右下角有状态指示器，当前是哪个 Agent、哪个 Model、Build 还是 Plan 模式，一目了然。

自定义主题系统

OpenCode 内置了十多个主题：

主题 风格
opencode 默认主题，深色系
system 自适应终端配色
tokyonight Neovim 经典
catppuccin 柔和马卡龙色
gruvbox 复古暖色
nord 北极冷色调
kanagawa 日式浮世绘灵感
matrix 黑客帝国风
everforest 自然森林绿
ayu 简约暗色
one-dark Atom 经典

在 TUI 里用 /themes 或 Ctrl+X T 就能实时预览切换。

自定义主题是 JSON 格式，放在 .opencode/themes/ 目录下（项目级）或 ~/.config/opencode/themes/ 目录下（全局）。主题的加载有优先级：内置主题 < 全局目录 < 项目目录，后加载的覆盖先加载的。

一个主题文件大概长这样：

{
  "$schema": "https://opencode.ai/theme.json",
  "defs": {
    "bg": "#1a1b26",
    "fg": "#a9b1d6",
    "blue": "#7aa2f7",
    "green": "#9ece6a",
    "red": "#f7768e"
  },
  "theme": {
    "primary": "blue",
    "text": "fg",
    "background": "bg",
    "error": "red",
    "success": "green"
  }
}

defs 部分定义颜色变量，theme 部分引用这些变量。支持 hex 色值、ANSI 色号（0-255）、dark/light 双模式适配。甚至可以用 "none" 让某个元素继承终端的默认颜色。

主题控制的不只是配色——它覆盖了整个 UI 的色彩表达，包括 Markdown 渲染（标题、链接、代码、列表）、代码语法高亮（关键字、函数、字符串、注释）、diff 视图（新增/删除/上下文行）、面板边框、状态栏。总共 50+ 个可定制色值，精细到 diff 的行号背景色都能调。

TUI 深度定制：tui.json

TUI 的行为配置在一个单独的文件 tui.json（或 tui.jsonc）里，和 opencode.json（Server/运行时配置）分开。这个设计很合理——UI 偏好和后端配置本来就该独立管理。

{
  "$schema": "https://opencode.ai/tui.json",
  "theme": "tokyonight",
  "keybinds": {
    "leader": "ctrl+x"
  },
  "scroll_speed": 3,
  "scroll_acceleration": {
    "enabled": true
  },
  "diff_style": "auto",
  "mouse": true
}

几个值得关注的选项：

  • scroll_acceleration.enabled：macOS 风格的滚动加速。快速滚动时速度递增，慢速滚动时保持精确。开启后 scroll_speed 会被忽略
  • diff_style："auto" 根据终端宽度自动选择双列或单列 diff，"stacked" 强制单列
  • mouse：关闭后恢复终端原生的鼠标行为（文本选择、系统滚动）

环境变量 OPENCODE_TUI_CONFIG 可以指定自定义的 TUI 配置路径——在多项目之间共享同一套 UI 配置时很好用。

Tauri 桌面应用：Electron 的替代方案

OpenCode 在 2026 年初推出了桌面应用 Beta 版，支持 macOS（Apple Silicon + Intel）、Windows 和 Linux。底层用的是 Tauri，不是 Electron。

为什么选 Tauri？核心原因是资源占用。Electron 打包的应用动辄吃掉 500MB+ 内存，因为它自带一整个 Chromium 渲染引擎。Tauri 用系统自带的 WebView（macOS 的 WebKit、Windows 的 WebView2、Linux 的 WebKitGTK），打包体积小、内存占用低、启动速度快。

OpenCode 桌面应用本质上是一个原生壳 + Web 前端。它内嵌了 OpenCode Server，在本地启动后通过 HTTP/WebSocket 和前端通信。也就是说，你在桌面应用里的操作，和 TUI 里完全一致——同样的 Session、同样的消息历史、同样的工具调用。

桌面应用的输入框支持完整的 Readline/Emacs 快捷键（Ctrl+A、Ctrl+E、Alt+F、Alt+B、Ctrl+W、Ctrl+K 等），和 TUI 里的输入体验保持一致。对于写长 prompt 来说，桌面应用的文本编辑体验比终端好不少。

还有一个细节：桌面应用支持 Shift+Enter 换行。这在某些终端里是个老大难问题（终端不一定能正确传递 Shift+Enter 的修饰键），但在原生应用里就是原生行为，零配置。

SolidJS Web 前端：浏览器里也能用

OpenCode 的 Web 前端基于 SolidJS 构建。SolidJS 是一个高性能的前端框架——它不像 React 那样用 Virtual DOM 做差异对比，而是在编译阶段就把响应式更新精确到 DOM 节点级别。这意味着 UI 更新的开销极低，对于实时流式输出（AI 一字一字往外蹦的场景）非常合适。

启动 Web 界面：

# 默认启动，自动选端口并打开浏览器
opencode web

# 指定端口
opencode web --port 4096

# 局域网可访问
opencode web --hostname 0.0.0.0

# 开启 mDNS 发现（局域网零配置接入）
opencode web --mdns

Web 界面的功能覆盖了 TUI 的大部分能力：Session 管理、消息交互、Model 切换、文件操作。但 Web 前端不只是一个"阉割版 TUI"——它有自己的优势：

  • 跨设备访问：在办公室的 Mac 上跑 opencode web，手机或 iPad 上打开浏览器就能继续操作
  • 分享方便：直接给同事发个 URL，他们就能看到你的对话（配合 OPENCODE_SERVER_PASSWORD 做访问控制）
  • mDNS 发现：开启 --mdns 后，局域网设备通过 opencode.local 域名直接访问，不用记 IP

安全方面需要注意：如果不设密码，Web Server 默认是无认证的。本地开发没问题，但如果你绑定 0.0.0.0 对外暴露，一定记得设密码：

OPENCODE_SERVER_PASSWORD=your-secret opencode web --hostname 0.0.0.0

Web 和 TUI 还可以同时使用——先启动 Web Server，然后在另一个终端用 opencode attach http://localhost:4096 把 TUI 挂上去。两个界面共享同一个 Server 的状态，实时同步。

安装方式：Homebrew、Scoop、DMG 一网打尽

OpenCode 的安装方式覆盖了主流平台和包管理器。

终端版（TUI + CLI）

# 通用安装脚本（Linux/macOS/WSL）
curl -fsSL https://opencode.ai/install | bash

# Node.js 系
npm install -g opencode-ai
bun install -g opencode-ai
pnpm install -g opencode-ai

# Homebrew（macOS/Linux）
brew install anomalyco/tap/opencode

# Arch Linux
paru -S opencode-bin

# Windows
choco install opencode    # Chocolatey
scoop install opencode     # Scoop

Homebrew 用户注意：官方推荐用 anomalyco/tap/opencode 这个 tap，更新频率比社区维护的 brew install opencode 高。

桌面应用

# Homebrew Cask（macOS）
brew install --cask opencode-desktop

或者直接下载安装包：

平台 格式 说明
macOS (Apple Silicon) .dmg M1/M2/M3/M4 芯片
macOS (Intel) .dmg Intel 芯片
Windows .exe (NSIS) x64
Linux .deb / .rpm x64

桌面应用目前还是 Beta 阶段，核心功能齐全，但部分边缘场景可能还有小问题。从 TUI 过来的用户会发现，桌面应用的操作逻辑和 TUI 完全一致——同样的 / 命令、同样的快捷键风格、同样的 Session 管理。

一个工具，三种入口

OpenCode 的多端设计不是简单的"同一个东西套三个壳"。它的 Client/Server 架构让 TUI、Desktop、Web 成为平等的 Client——都通过 HTTP API 和 WebSocket 连接到同一个 Server 后端。你在任何一个端上做的操作，其他端都能立刻看到。

这种架构的好处是显而易见的：

  • 终端党继续待在 TUI 里，享受极致的键盘效率
  • GUI 用户用桌面应用，获得原生的窗口体验
  • 远程/协作场景用 Web 前端，跨设备无缝切换

三个入口，一套对话。这就是 OpenCode 对"AI 编程助手应该长什么样"这个问题的回答——它不替你选，而是给你选择。

作者: itech001
来源: 公众号：AI人工智能时代
主页: https://www.theaiera.cn（每日分享最前沿的AI新闻和技术）

关注公众号，获取更多 AI 技术干货！

Enjoyed this article? Share it with others!