前阵子换了新电脑，我在整理本地开发环境时，看到一堆需要重新装的，顿时感觉好麻烦。想着都过去这么久了，应该有工具可以做到统一管理，实现快速安装、更新、切换版本吧。
经过一番查找后，找到了mise这个东西，只需要简单的一句命令就能安装 java 、node 、redis 、go 等工具，而且还支持对这些工具做统一管理（更新、删除），支持三大主流平台（ macOS/Windows/Linux ）
命令行始终不方便，于是我萌生了一个做 GUI 的想法，花了亿点时间用 Flutter 把它开发出来了，欢迎各位有需要的开发者阅读本文。
对于我这种经常切换项目的人来说，纯命令行总感觉不是很直观。
比如我想知道：
mise.toml覆盖了全局版本？这些事情，命令行当然都能查，但需要来回敲命令，有时候还要打开配置文件对比。Mise GUI 想做的就是把这些常用信息集中到一个界面里，让本地环境管理更直观一点。
目前主要做了 4 个功能：
总览页主要用于快速查看当前机器的开发环境状态。
这里会展示当前系统、已安装工具数量、项目覆盖情况、mise 版本以及最近通过界面执行过的操作。
工具模块是本软件的核心功能之一。
它会展示每个工具的当前版本和最新版本，比如 Flutter 、Go 、Java 、Python 等。
点进某个工具后，可以查看这个工具的已安装版本、远端可安装版本、当前版本来源，以及这个版本会影响哪些项目。
这里还做了一些操作入口，比如：
这些操作不会直接执行，每次都会先进入命令预览。
安装工具时，只需要输入工具名和版本号。
如果工具支持远端版本查询，界面会把可选版本列出来，方便直接选择。
确认后不会立刻执行，而是先展示即将运行的命令，例如：
mise install [email protected]
mise use --global [email protected]
同时也会提示这次操作会影响哪些文件、影响范围是什么、可能有什么风险。
这个设计主要是为了避免“点一下按钮，背后偷偷执行了一堆命令”的情况。毕竟本地开发环境这种东西，改之前最好知道自己在改什么。
mise 支持项目级配置，比如在项目目录里放一个mise.toml，就可以指定这个项目使用的工具版本。
这个很好用，但是项目一多之后，就很容易忘记哪个项目覆盖了全局版本。
所以我做了一个项目覆盖页面。
你可以添加多个扫描目录，软件会递归查找里面的mise.toml，然后只展示和全局版本存在差异的项目。
比如全局 node 是 20 ，但是某个项目指定了 18 ，那么这里就能很直观地看出来。
比如：当你想排查“为什么这个项目跑出来的 node 版本和我想的不一样”，这个功能就派上用场了。
配置页主要是用来查看和编辑全局配置以及项目配置。
目前支持：
~/.config/mise/config.tomlmise.toml此处我特意加了保存前的差异预览。因为配置文件不像普通表单，改错一个版本号或者删错一行，可能就会影响很多项目。
这个项目是用 Flutter 写的，主要技术栈如下：
整体代码结构大概是这样：
lib/
app/ # 应用启动、路由、主题和外壳
features/
dashboard/ # 环境总览
tools/ # 工具版本、安装、升级、卸载
projects/ # 扫描目录和项目覆盖
config/ # 全局与项目配置管理
repositories/ # 页面数据聚合
services/ # mise CLI 、配置、历史、更新等底层服务
shared/ui/ # 通用面板、状态、对话框和预览组件
我没有把命令执行逻辑直接写在页面里，而是拆成了：
这样做的好处是后面要扩展功能时，不至于所有逻辑都堆在页面文件里。
这个软件本质上不是替代 mise ，而是给 mise 套了一层图形界面。
所以核心逻辑还是调用本机的 mise CLI ，例如：
mise --version
mise ls --json
mise current
mise outdated
mise ls-remote --json node
mise install node@20
mise use --global node@20
Flutter 里通过Process.run来执行这些命令，然后把输出结果解析成界面需要的数据。
这里有个比较麻烦的点：桌面应用启动时拿到的环境变量，不一定和终端里的环境变量完全一致。
比如你在终端里能执行mise，但 GUI 应用直接执行可能找不到。
所以我在这里做了一些兜底：
/opt/homebrew/bin/mise、/usr/local/bin/mise这类工具其实用很多技术都能做，比如 Electron 、Tauri 、Qt 、SwiftUI 等。
最后选择 Flutter ，主要有几个原因：
用 Flutter 写的时候，也遇到了一些坑，比如：系统文件选择、macOS 打包、公证、不同平台的命令执行差异，这些都需要额外处理。
整体写下来，这种小型桌面工具开发体验还是很不错的。
目前可以直接去 Release 页面下载对应系统的版本：
https://github.com/likaia/mise_gui/releases
如果电脑里还没有安装 mise ，软件启动后会提示安装命令。
也可以先手动安装：
# macOS
brew install mise
# Windows
winget install jdx.mise
# Linux
curl https://mise.run | sh
如果你想本地运行源码：
git clone https://github.com/likaia/mise_gui.git
cd mise_gui
flutter pub get
flutter run -d macos
其他平台可以把运行目标换成：
flutter run -d linux
flutter run -d windows
这个软件算是我给自己做的一个小工具，也是我第一个用 Flutter 作为开发语言写的开源项目。一开始只是因为换电脑时嫌重新配置环境太麻烦，后来越写越觉得这种东西挺适合做成可视化工具。
至此，文章就分享完毕了。
我是神奇的程序员，一位前端开发工程师。
如果你对我感兴趣，请移步我的个人网站，进一步了解。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。