CILITERM 开源啦！一个《TRON: Legacy 创战纪》风格的科幻炫酷终端！

希里安

发布于 2025-06-16 05:16:31

15100

代码可运行

文章被收录于专栏：希里安希里安

运行总次数：0

代码可运行

希里安近日见闻

夏天的高温热浪袭来，如果没有空调真的会热的发昏。看新闻多地气温高达40度，只能祈祷高温天气早点过去，各位读者也保重身体，躲在空调房喝点小可乐，顺便看看希里安这周的“折腾”成果吧！

最近重温了《Tron: Legacy 创战纪》，又研究了下模拟终端，因为希里安一直对电影里的终端印象比较深刻，闪烁的命令行、动态的系统监控、3D 地球动画，科幻感拉满！所以一直想自己动手实现一下，就是这样的

视频：TRON 终端界面

奈何之前技术还不行，也没有AI的辅助，折腾半天也没啥进展，顶多就是复活了一下已经归档许久的eDEX-UI开源项目，如下视频这样的

视频：eDEX-UI 演示

不过随着不断地学习积累，自己也慢慢有些了解了，借助AI想再试一下，希里安终于抽空开发出了一个跨平台终端项目——CILITERM，而且准备开源！今天就和大家聊聊终端模拟器的开发方案，顺便介绍一下我的项目，希望能给想入坑的朋友一点启发！

终端模拟器

终端模拟器（Terminal Emulator）只要是从事开发的朋友应该比较熟悉，从 Linux 的 bash 到 Windows 的 PowerShell，再到 macOS 的 Terminal，都是我们敲代码、跑命令的必备工具。但像《Tron: Legacy 》那样的科幻终端，不光要能跑命令，还得有炫酷的 UI 和实时监控的功能。开发这样的终端有哪些方案呢？我研究了一下，总结出以下几种主流方案：

1. Electron + xterm.js
- • 特点：用 Web 技术（HTML/CSS/JS）打造跨平台桌面应用，xterm.js 负责终端界面，node-pty 提供真实 shell 交互
- • 优点：开发快，生态成熟，适合做复杂 UI（就像 eDEX-UI）
- • 缺点：应用体积大，内存占用高
- • 适用场景：追求快速开发和炫酷界面，跨 Windows、macOS、Linux
2. Tauri + xterm.js
- • 特点：用 Rust 替代 Electron，结合 WebView 渲染前端，体积更小、性能更高
- • 优点：轻量、速度快，Rust 提供安全性和性能
- • 缺点：生态较新，Rust 学习曲线陡
- • 适用场景：性能敏感项目，主要是想替代 Electron 的开发者
3. Qt + libvterm
- • 特点：基于 C++ 的原生框架，libvterm 提供终端模拟
- • 优点：性能接近原生，适合高性能应用
- • 缺点：开发复杂，UI 定制成本高
- • 适用场景：嵌入式或需要极致性能的场景
4. Web 方案（xterm.js + WebSocket）
- • 特点：纯前端终端，配合后端（如 Node.js）通过 WebSocket 交互
- • 优点：无需安装，适合 Web 应用
- • 缺点：依赖后端，功能受限
- • 适用场景：在线 IDE 或轻量终端

最后我选择了Electron + xterm.js的方案，主要是它上手快、生态丰富，适合快速实现《TRON》风格的科幻界面。接下来就给大家介绍我的项目CILITERM！

CILITERM：我的科幻终端梦

CILITERM 是一个现代化的跨平台终端模拟器，灵感来自《TRON 创战纪》和 eDEX-UI，基于 Electron + Vite + Vue3 构建，集成了终端交互、系统监控、文件浏览和酷炫的 3D 地球动画。项目已经开源，欢迎大家试用、反馈和贡献代码！

项目亮点

• 终端交互：支持运行 bash、zsh、cmd、PowerShell 等命令行，输入输出流畅
• 系统监控：实时显示 CPU、内存、网络、磁盘使用情况，波形图一目了然
• 文件浏览器：快速导航文件系统，支持 Linux/macOS 的 CWD（当前工作目录）同步
• 网络流量可视化：动态波形图展示上下行速度
• 3D 地球动画：基于 Three.js 的地球和卫星动画，科幻感满满！
• 现代化技术栈：使用 Vue3 组件化开发，Vite 提供快速构建，UI 响应迅速

快速上手

1. 环境要求：

• Node.js ≥ 16
• npm ≥ 8
• Electron ≥ 25

2. 安装与运行：

git clone https://github.com/ciliverse/ciliterm.git
cd ciliterm
npm install
npm start

3. 构建发布：

npm run build

生成 Windows、macOS、Linux 的可执行文件

项目结构

ciliterm/
├── index.html           # 主页面，加载 Vue 应用
├── main.js              # Electron 主进程，初始化窗口
├── preload.js           # 预加载脚本，桥接主进程和渲染进程
├── renderer.js          # 渲染进程逻辑，初始化 xterm.js
├── styles.css           # 全局样式，定义科幻 UI
├── package.json         # 依赖和构建配置
├── vite.config.js       # Vite 配置，优化前端构建
├── src/
│   ├── App.vue          # Vue 根组件，管理 UI 布局
│   ├── main.js          # Vue 入口，挂载应用
│   └── styles/          # Vue 组件样式

目前目录结构还是比较简单明了，适合像希里安一样的小伙伴一同学习完善

从零到开源的折腾心得

开发 CILITERM 的过程既是挑战也是乐趣，分享几点心得，希望对大家有帮助：

• 技术选型：Electron + Vue3 + Vite 组合事半功倍，Vue3 的组件化让代码清晰，Vite 的热更新能提升开发效率，相比 eDEX-UI 的纯 JS 开发体验更好
• 核心挑战：
- • 终端实现：xterm.js 和 node-pty 的配合需要掌握 IPC 通信，Windows 的 ConPTY 兼容性调试花了不少时间
- • 科幻 UI：用 CSS 和 Three.js 实现动态地球动画，但是性能优化还是个大工程，得慢慢来
- • 系统监控：集成 systeminformation 库，调整数据刷新频率避免卡顿
- • AI 助力：帮我梳理了终端模拟器的方案，还提供了代码调试建议，省下不少查文档的时间
- • 跨平台适配：Linux 和 macOS 的伪终端实现感觉稍简单（因为有POSIX 标准），Windows 的 ConPTY比较复杂，适配遇到不少报错