说实话，我Zui近真干了件挺有意思的事儿。就是那个“我开发了一个管理本地环境的软件吗？”这标题听着像在问问题，其实是我真动手Zuo了个东西出来哈哈。

事情是这样的，前阵子换了新电脑，我在整理本地开发环境时kan到一堆需要重新装的，顿时感觉好麻烦。想着dou过去这么久了应该有工具Ke以Zuo到统一管理，实现快速安装、geng新、切换版本吧？

经过一番查找后找到了mise这个东西，只需要简单的一句命令就Neng安装java、node、redis、go等工具，而且还支持对这些工具Zuo统一管理，支持三大主流平台。

这个hen好用，但是项目一多之后就hen容易忘记哪个项目覆盖了全局版本。比如全局node是20，但是某个项目指定了18，那么这里就Nenghen直观地kan出来。

对于我这种经常切换项目的人来说纯命令行总感觉不是hen直观。命令行始终不方便，于是我萌生了一个ZuoGUI的想法，花了亿点时间用Flutter把它开发出来了欢迎各位有需要的开发者阅读本文。

这个软件本质上不是替代mise，而是给mise套了一层图形界面。也就是说它不会自己去装node、java这些东西，而是调用你本机的mise CLI来完成操作。

所以核心逻辑还是调用本机的mise CLI，例如：

mise --version
mise ls --json
mise current
mise outdated
mise ls-remote --json node
mise install node@18
mise use --global node@18

这些命令dou是通过Flutter里的Process.run来执行的，然后把输出结果解析成界面需要的数据。

这类工具其实用hen多技术douNengZuo，比如Electron、Tauri、Qt、SwiftUI等。Zui后选择Flutter，主要有几个原因：

跨平台支持好，macOS、Windows、LinuxdouNeng跑

性Neng不错，界面也还行

我正好想学一下Flutter，就当练手了

用Flutter写的时候，也遇到了一些坑，比如：系统文件选择、macOS打包、公证、不同平台的命令执行差异，这些dou需要额外处理。不过还好，Zui后dou搞定了。

目前主要Zuo了4个功Neng：

总览页

工具模块

项目覆盖

配置页

总览页

总览页主要用于快速查kan当前机器的开发环境状态。

这里会展示当前系统、Yi安装工具数量、项目覆盖情况、mise版本以及Zui近通过界面执行过的操作。

比如：当你想排查“为什么这个项目跑出来的node版本和我想的不一样”，这个功Neng就派上用场了。

工具模块

工具模块是本软件的核心功Neng之一。

点进某个工具后Ke以查kan这个工具的Yi安装版本、远端可安装版本、当前版本来源，以及这个版本会影响哪些项目。

它会展示每个工具的当前版本和Zui新版本，比如Flutter、Go、Java、Python等。

Ru果工具支持远端版本查询，界面会把可选版本列出来方便直接选择。

安装工具时只需要输入工具名和版本号。

这些操作不会直接执行，每次dou会先进入命令预览。

确认后不会立刻执行，而是先展示即将运行的命令，例如：

mise install redis@7.0
mise use --global redis@7.0

同时也会提示这次操作会影响哪些文件、影响范围是什么、可Neng有什么风险。这个设计主要是为了避免“点一下按钮，背后偷偷执行了一堆命令”的情况。毕竟本地开发环境这种东西，改之前Zui好知道自己在改什么。

项目覆盖

mise支持项目级配置，比如在项目目录里放一个mise.toml，就Ke以指定这个项目使用的工具版本。

这个功Neng我Zuo了一个项目覆盖页面。

你Ke以添加多个扫描目录，软件会递归查找里面的mise.toml，然后只展示和全局版本存在差异的项目。

配置页

配置页主要是用来查kan和编辑全局配置以及项目配置。

此处我特意加了保存前的差异预览。因为配置文件不像普通表单，改错一个版本号或者删错一行，可Neng就会影响hen多项目。

这里还Zuo了一些操作入口，比如：

查kan当前配置

编辑配置

保存前的差异对比

这些事情，命令行当然douNeng查，但需要来回敲命令，有时候还要打开配置文件对比。Mise GUI想Zuo的就是把这些常用信息集中到一个界面里让本地环境管理geng直观一点。

命令执行兜底

这里有个比较麻烦的点：桌面应用启动时拿到的环境变量，不一定和终端里的环境变量完全一致。

比如你在终端里Neng执行mise，但GUI应用直接执行可Neng找不到。

所以我在这里Zuo了一些兜底：

Ru果电脑里还没有安装mise，软件启动后会提示安装命令。

# macOS
brew install mise
# Windows
winget install jdx.mise
# Linux
curl https://mise.run | sh

也Ke以先手动安装：

这个项目是用Flutter写的，主要技术栈如下：

Flutter 3.x

Provider 状态管理

shared_preferences 本地存储

process 命令执行

整体代码结构大概是这样：

lib/
  app/                  # 应用启动、路由、主题和外壳
  features/
    dashboard/          # 环境总览
    tools/              # 工具版本、安装、升级、卸载
    projects/           # 扫描目录和项目覆盖
    config/             # 全局与项目配置管理
  repositories/         # 页面数据聚合
  services/             # mise CLI、配置、历史、geng新等底层服务
  shared/ui/            # 通用面板、状态、对话框和预览组件

我没有把命令执行逻辑直接写在页面里而是拆成了：

services

repositories

这样Zuo的好处是后面要 功Neng时不至于所有逻辑dou堆在页面文件里。

Ru果你想本地运行源码：

git clone https://github.com/likaia/mise_gui.git
cd mise_gui
flutter pub get
flutter run -d macos

其他平台Ke以把运行目标换成：

flutter run -d linux
flutter run -d windows

目前Ke以直接去Release页面下载对应系统的版本：

整体写下来这种小型桌面工具开发体验还是hen不错的。

写在Zui后

这个软件算是我给自己Zuo的一个小工具，也是我第一个用Flutter作为开发语言写的开源项目。一开始只是因为换电脑时嫌重新配置环境太麻烦，后来越写越觉得这种东西挺适合Zuo成可视化工具。

我是神奇的程序员，一位前端开发工程师。

Ru果你对我感兴趣，请移步我的个人网站，进一步了解。

害，写完这个软件之后我才发现，原来自己还挺喜欢Zuo这种小工具的。虽然不是什么大项目，但Neng解决实际问题，就hen有成就感。

对了这个项目目前还在持续geng新中，Ru果你有啥建议或者发现了bug，欢迎提issue，或者直接PR，咱就是说来者不拒，哈哈。

---