Skip to content

Repository files navigation

在线体验 MIT License

Vue 3 TypeScript Vite Vitest

Linux 练功房

把命令行变成一场修行 —— 在浏览器里打开一台「假」Linux,从 pwd 练到部署 Tomcat,逐关通关,无需安装任何东西。

Linux 练功房是一个跑在浏览器里的 Linux 终端学习游戏。它内置一套完整的 shell 解释器、虚拟文件系统和 vi 编辑器,用 28 个由浅入深的关卡带你手把手练会命令行、vi、Tomcat 部署与 FineReport 集成。每关给出教程、可操作的终端和实时通关检查清单——做对了盖「PASSED」章,做错了随时看提示与参考答案。

👉 点此在线开练(进度自动存浏览器,关网页也不丢)


界面一瞥

做题页:左侧章节导航与教程,右上为虚拟终端,右下为通关检查清单
做题页 —— 左读教程、右敲命令,下方检查清单实时告诉你还差哪一步。

选关页:ASCII 品牌横幅与按章节分组的关卡网格
选关页 —— 四大章节、28 关一目了然,通关的关卡烙上印章。

练功场:自由终端与右侧命令速查表
练功场 —— 没有目标、没有检查,纯自由探索,右侧常驻命令速查表。


怎么玩

  1. 读题:左侧是当关教程,讲清「这一关要练什么、为什么」。
  2. 敲命令:在右侧终端像真 Linux 一样输入命令,支持管道、重定向、命令链,甚至 vi 编辑文件。
  3. 看清单:每执行一步,右下的「检查清单」会逐项打勾;全绿即通关,自动解锁下一关。
  4. 卡住了:切到「提示」看思路,或在「参考答案」里偷看一眼(建议先自己试)。

特性

真·终端引擎

  • 自研 shell 解释器:管道 |、重定向 > >>、命令链 && ; 一应俱全
  • 完整虚拟文件系统:目录树、权限位、属主属组,ls -la / chmod / chown 都按规矩来
  • 内置 vi/vim:普通 / 插入 / 命令三种模式,hjkl 移动、dd yy p/搜索:wq 都能用
  • Tomcat 模拟:tar 解压、startup.sh / shutdown.shcatalina.out 日志、8080 端口监听

为学习而设计

  • 28 关四章节,难度爬坡平滑,每关都有教程 + 提示 + 参考答案三件套
  • 通关检查清单把「过关条件」拆成可勾选项,反馈即时、目标清晰
  • 进度持久化到本地存储,随时回来接着练
  • 练功场自由模式,配命令速查表,学完即练、练完即查

工程上的讲究

  • 核心逻辑(shell / fs / vi / checker)100% 单元测试覆盖,关卡靠规则驱动、易扩展
  • 状态用 Pinia 管理,关卡用数据描述而非硬编码
  • 视觉走 Gruvbox 暗色 + 轻微 CRT 扫描线,复古但不刺眼

关卡路线

章节 关卡 你会练到
第一章 · 命令行基础 1 – 14 pwd ls cd、文件增删改复制、grep / find、权限管理、进程与端口、软链接、环境变量
第二章 · vi 编辑器 15 – 19 打开退出、插入文本、删行复制粘贴、搜索与行号、综合改配置
第三章 · Tomcat 部署 20 – 24 配置 JAVA_HOME、tar 解压、启动停止服务、vi 改端口、日志排障
第四章 · FineReport 集成 25 – 28 部署 FineReport、配置启动验证、模拟考核、全流程综合

视觉设计

界面是一套 Gruvbox 暗色 主题:暖橙做强调、草绿表通过、米白做正文,配 JetBrains Mono 等宽字体还原终端质感。全屏叠了一层极淡的 CRT 扫描线 + 暗角,致敬老式显示器,但刻意压低了强度,长时间看不累。

布局上把做题页的三大区块做成悬浮卡片:面板之间、页面四周留出 20px 以上的空隙,配 14px 圆角与柔和投影,让原本密集的「左教程 / 右终端 / 下清单」有了呼吸感。所有间距收敛到 4px 基线的设计 token(--ld-sp-* / --ld-radius-*),方便统一调优。


本地开发

npm install      # 安装依赖
npm run dev      # 启动开发服务器(默认 http://localhost:5173)
npm run build    # 类型检查 + 构建生产版本
npm run preview  # 本地预览生产构建
npm test         # 跑单元测试(320 个)

部署为静态站点,vite.config.tsbase: "/linux-dojo/",对应 GitHub Pages 的子路径。


项目结构

src/
├─ components/   终端、vi 叠层、题目板、检查清单、进度条等 UI 组件
├─ core/         shell 解释器 · 虚拟文件系统 · vi 引擎 · 通关 checker
├─ levels/       28 关的初始文件树与校验规则(数据驱动)
├─ pages/        做题页 / 选关页 / 练功场
├─ stores/       Pinia 全局状态,含通关进度持久化
├─ configs/      路由配置
└─ style.css     设计 token 与全局样式(Gruvbox + 呼吸感布局)

core/levels/ 是纯逻辑层,不依赖 Vue,因此可以单独用 Vitest 充分测试;UI 只负责把这套引擎「演」给你看。


技术栈

Vue 3 · TypeScript · Vite · Pinia(+ persistedstate 持久化)· Vue Router · markdown-it(教程渲染)· Vitest。


反馈与贡献

发现 bug、想要新关卡、或对界面有想法?欢迎开 Issue。新增关卡只需在 src/levels/main/ 下按现有结构补一份初始状态 + 检查规则即可。


许可证

MIT

About

Linux 练功房 — 浏览器中的交互式 Linux 学习游戏

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages