我使用 102 个开发者工具构建了基于浏览器的终端

Source: Dev.to

思路

我想要一个统一的地方来快速执行开发者任务——子网计算、Base64 编码、DNS 查询、哈希生成——于是我构建了 administrator.sh，一个基于浏览器的终端，拥有 102 条命令。它的感觉像传统终端，但完全在浏览器中运行。

命令类别

网络工具

dns, whois, rdns, ping, traceroute, headers, ssl, port, subnet, cidr, asn, mac, myip, geo, http
这些是我每天都会使用的工具。例如：dns example.com 会立即返回 A、AAAA、MX、NS、TXT 记录。ssl example.com 显示证书详情、到期日期和链信息。headers 获取并显示 HTTP 响应头。

编码与开发工具

base64, hash, json, urlencode, regex, jwt, uuid, password, chmod, cron, timestamp, calc, diff, ascii, case, sort, reverse, number, color, workdays
最常用的有：json 用于验证并美化打印 JSON，regex 用于测试正则模式并高亮匹配，cron 用于解析 cron 表达式。

BBS 风格社交功能

chat, irc, board, msg, who, bulletin
实时聊天房间、mIRC 风格的界面、留言板、私信，以及显示在线用户的 who 命令。它本质上是终端中的现代 BBS。

游戏

adventure, battleship, blackjack, chess, connect4, hangman, minesweeper, snake, tictactoe, wordle, hack
包括文字冒险、多人版战舰以及黑客模拟游戏。

系统与账户

login, register, account, 2fa, apikey, notifications, support, theme, crt, help, history, clear
用户可以选择创建账户以使用持久化功能（保存的偏好设置、消息历史、双因素认证）。大多数工具无需账户即可使用。

Architecture

• 后端: Flask（Python）搭配 SQLAlchemy + MySQL —— 单个 app.py 文件约 5,400 行。
• 前端: 原生 JavaScript；102 个命令文件通过 esbuild 打包成 terminal.bundle.js。
• CSS: 使用自定义属性实现主题，无预处理器。
• 服务器: 使用 gevent 的 Gunicorn（单工作进程，支持 1,000 并发连接）。
• 基础设施: Nginx 反向代理，Cloudflare Worker 用于地理路由。

UI 是一个最小的 HTML 页面，加载打包后的 JavaScript；其余全部由 JavaScript 逐行追加文本。无需框架。

示例命令模块

// static/js/commands/hash.js
export default {
  name: "hash",
  description: "Generates a SHA-256 hash of the input.",
  usage: "hash <input>",
  category: "encoding",

  run({ print, arg, createPrompt, handleCommand }) {
    if (!arg) {
      print("Usage: hash <input>");
      return createPrompt(handleCommand);
    }

    const encoder = new TextEncoder();
    const data = encoder.encode(arg);

    crypto.subtle.digest("SHA-256", data).then(buffer => {
      const hashArray = Array.from(new Uint8Array(buffer));
      const hashHex = hashArray.map(b =>
        b.toString(16).padStart(2, "0")
      ).join("");
      print("SHA-256: " + hashHex);
      createPrompt(handleCommand);
    });
  }
};

每个命令都会收到相同的上下文对象（print、arg、createPrompt、handleCommand）。添加新命令只需创建一个文件并将其导入即可。

实时功能

• Chat 每 2 秒轮询一次。
• Visitor count 每 10 秒轮询一次。
• 为避免连接管理复杂性和代理问题，首选轮询而非 WebSockets。

独立工具页面

位于 administrator.sh/tools/ 并已被 Google 索引：

• 子网计算器
• Base64 编码与解码
• 哈希生成器
• JSON 格式化器
• 正则表达式测试器
• Chmod 计算器
• Cron 解析器
• 密码生成器
• UUID 生成器
• URL 编码与解码

每个页面加载一个约 5 KB 的 JavaScript 文件；所有处理均在客户端完成，数据永不离开浏览器。

教训

1. 轮询被低估了。 对于低频更新来说比 WebSocket 更简单。
2. 每个命令一个文件的方式可良好扩展。 即使有 102 条命令，代码库仍然易于浏览。
3. 内存状态足以应对短暂数据。 聊天消息、在线状态和论坛帖子都存放在 Python 字典中。
4. CSS 自定义属性让主题切换变得轻而易举。 六种主题只需在根元素上更改一个类。
5. gevent 在 I/O 密集型 Python 中表现出色。 使用 gevent 的单个 Gunicorn 工作进程即可平稳处理 1,000 个并发连接。

入门

访问 administrator.sh 并输入 help 查看全部 102 条命令，或者如果你更喜欢传统 UI，也可以探索独立工具。

一些可尝试的命令

• dns google.com — DNS 查询
• subnet 192.168.1.50 192.168.1.0/24 — 子网检查
• json {"name":"test"} — 格式化 JSON
• who — 查看谁在线
• chat — 加入聊天室
• adventure — 玩文字冒险
• theme — 更改配色方案
• crt — 切换 CRT 扫描线效果

所有功能均在浏览器中运行。无需注册、无需安装、无追踪。