Terminal Manager 技术架构解析
- 作者：Bougie
- 创建于：2026-05-04
- 更新于：2026-05-04
# 背景
Terminal Manager 是一款现代化的终端管理桌面应用，基于 Electron、Vue 3 和 TypeScript 构建，提供多工作区管理、分屏、标签页、多终端支持、Git 集成、文件浏览和 SSH 连接等功能。
本文将深入解析其技术架构，图文并茂地带你了解这个项目的核心设计。
# 整体架构
Terminal Manager 采用经典的 Electron 三进程模型：主进程（Main Process）、预加载脚本（Preload）和渲染进程（Renderer）。
# 项目结构
terminal-manager-electron/
├── src/
│ ├── main/ # Electron 主进程
│ │ ├── index.ts # 应用入口，生命周期的管理
│ │ ├── window.ts # 窗口创建与状态持久化
│ │ ├── menu.ts # 应用菜单配置
│ │ ├── store.ts # electron-store 配置
│ │ ├── logger.ts # 日志初始化
│ │ ├── git.ts # Git 操作封装
│ │ ├── shellUtils.ts # Shell 检测与缓存
│ │ ├── ipc/ # IPC 处理器模块
│ │ └── search/ # 文件搜索模块
│ ├── preload/ # 预加载脚本（安全桥接）
│ │ └── index.ts # 暴露 electronAPI 给渲染进程
│ └── renderer/ # Vue 前端应用
│ ├── main.ts # Vue 应用入口
│ ├── App.vue # 根组件
│ ├── components/ # Vue 组件
│ ├── stores/ # Pinia 状态管理
│ ├── composables/ # Vue 组合式函数
│ └── utils/ # 工具函数
├── packages/ # Monorepo 工作区
│ ├── api/ # API 封装层
│ ├── browser/ # 浏览器/书签面板组件
│ ├── components/ # 共享 UI 组件
│ ├── composables/ # 共享组合式函数
│ ├── i18n/ # 国际化
│ ├── logger/ # 日志包
│ ├── shared/ # 共享类型、常量、平台检测
│ └── storage/ # 数据持久化工具
├── electron.vite.config.ts
├── electron-builder.yml
└── package.json
# IPC 通信设计
IPC（Inter-Process Communication）是 Electron 架构的核心，负责主进程与渲染进程之间的数据交换。
# 主要 IPC 处理器
| 模块 | 职责 |
|---|---|
pty.ts | 本地 PTY 进程管理（创建、输入、调整大小、关闭） |
sshPty.ts | SSH PTY 连接（基于 ssh2 库） |
fs.ts | 文件系统操作（读取目录、搜索文件、文件监听） |
git.ts | Git 操作（状态、日志、分支、工作区、标签） |
shell.ts | Shell 操作（在资源管理器中打开、编辑器、外部程序） |
store.ts | 持久化键值存储 |
window.ts | 窗口控制（最小化、最大化、全屏、缩放） |
system.ts | 系统信息（字体、IP、端口、进程管理） |
dialog.ts | 原生对话框（打开目录、错误提示） |
# 终端模拟架构
# 本地终端
本地终端使用 node-pty 库创建伪终端进程：
- 支持 UTF-8 环境变量以处理国际字符
- macOS/Linux 上使用登录 Shell（
-l）以获取完整 PATH - PTY 可调整大小以适应终端窗口变化
# SSH 终端
SSH 连接使用 ssh2 库：
- 支持 PTY 调整大小
- 支持密码和密钥认证
# 状态管理
使用 Pinia 进行状态管理，主要 stores：
# Workspace Store
管理多个工作区，每个工作区包含多个终端或 SSH 连接。支持会话持久化，启动时自动恢复工作区配置。
# Terminal Store
核心终端状态管理：
- 创建和管理 PTY 实例
- xterm.js 终端渲染
- SSH 连接状态
- 终端数据流处理
# 数据流
# Monorepo 包结构
| 包 | 用途 |
|---|---|
shared | 共享类型定义、常量、平台检测、菜单快捷键、ElectronAPI 接口 |
api | API 封装层，提供 getAPI() 获取 API 实例，支持 Mock |
components | 可复用 UI 组件（BaseButton、BaseDialog、DropdownMenu 等） |
i18n | 国际化支持，提供 t() 函数 |
storage | 数据持久化封装（loadData、saveData） |
logger | 结构化日志封装 |
browser | 浏览器/书签面板组件 |
# 关键技术选型
- 构建工具: electron-vite（专为 Electron 设计的构建工具）
- 前端框架: Vue 3 + TypeScript + Pinia
- 终端模拟: xterm.js + node-pty（本地）+ ssh2（远程）
- Git 操作: simple-git
- 持久化: electron-store
- 日志: electron-log
- 打包: electron-builder
# 总结
Terminal Manager 采用了清晰的分层架构设计：
- 主进程负责底层系统交互（PTY、SSH、文件系统、Git）
- 预加载脚本作为安全桥接，只暴露必要的 API
- 渲染进程采用 Vue 3 + Pinia 实现 UI 和状态管理
- Monorepo 结构便于包管理和代码共享
这种架构既保证了安全性（Context Isolation），又提供了强大的终端能力（原生模块支持），同时保持了前端开发体验。