Jims一个带可视化工作台的前端 CLI，从模板创建到组件安装

文章正文还需 6 分钟

使用codex开发了一个积木工具 Jims，是想用来放置一些模板和组件用来下载安装，这样公司后端同学开发也能进行可视化安装

安装 Jims

bash 复制代码

npm install -g @vipbic/jims

安装后查看帮助：

bash 复制代码

jims --help

想先了解本机环境是否齐全，可以运行：

bash 复制代码

jims doctor

诊断结果会区分通过、警告和错误。例如，缺少 Git 会影响 Git 初始化，缺少 OpenSSL 会影响依赖它的证书操作，并不意味着所有功能都无法使用。

启动本地工作台

bash 复制代码

jims ui

命令启动后，终端会输出工作台地址。默认地址是 http://localhost:9913，在浏览器中打开即可。

如果默认端口已被占用，可以换一个端口：

bash 复制代码

jims ui --port 9914

此时访问 http://localhost:9914。使用期间保留这个终端，结束后按 Ctrl+C 停止本地服务。

这里有一个值得说明的实现细节：页面运行在浏览器里，文件操作由本机 CLI 服务完成。 当前本地服务监听 127.0.0.1，工作台通过本地接口调用创建项目、选择目录和安装组件等能力。

项目背后的实现方式

Jims 使用 pnpm workspace 管理多个模块：

text 复制代码

packages/cli       命令行入口与本地 HTTP 服务
packages/cli-ui    Vue 3 + Vite 可视化工作台
packages/shared    共享类型与工具
apps/admin         资源管理后台
apps/api           NestJS API、Prisma 与 MySQL

用户侧的调用关系可以写成：

text 复制代码

浏览器工作台 → 本机 CLI 服务 → 远程 API → 数据库 / 资源存储
                     ↓
                本地项目文件

这种结构让职责比较清晰：Vue 页面负责展示资源和收集参数，本机 CLI 负责目录、文件、Git 和包管理器操作，远程 API 负责设备身份、资源元数据和下载等能力。

管理端则负责资源维护，包括创建模板或组件、处理封面、上传 ZIP 版本包、发布和回滚版本，以及查看设备用户、下载统计与审计记录。

资源发布之后，用户侧再获取列表和对应版本包。因此，可下载资源不需要全部写死在 CLI 安装包里，也能通过管理端维护后续版本。

在下载环节，项目还实现了 SHA-256 校验和 ZIP 检查，包括路径、文件数量、解压大小和 CRC 等。它们用于发现包损坏和部分异常归档情况，但不代表可以省略对资源代码本身的审查。