构建 WSL-UI：使用 Tauri 的圣诞项目

Source: Dev.to

请提供您希望翻译的正文内容，我将为您翻译成简体中文并保留原有的格式、Markdown 语法以及技术术语。谢谢！

介绍

我在圣诞节期间有些空闲，想尝试点新东西。我的日常工作是 DevOps——管道、基础设施，诸如此类，但我一直想打造一个正式的桌面应用：在 Windows 上可视化管理 WSL2 发行版的工具。

如果你使用过 WSL2 一段时间，你一定体会过同时管理多个发行版（Ubuntu、Debian、Alpine 等）以及记住各种命令行指令的痛苦：

wsl --list --verbose
wsl --terminate Ubuntu
wsl --export Ubuntu ./ubuntu-backup.tar
wsl --import NewDistro C:\WSL\NewDistro ./some-rootfs.tar

它能工作，但如果有一个可视化工具能够显示正在运行的实例、内存使用情况，并且让你只需点击即可执行常见任务，那就会好得多。

为什么选择 Tauri？

当谈到使用 Web 技术的跨平台桌面应用时，Electron 是显而易见的选择，但它因臃肿而闻名——每个应用都自带 Chromium 和 Node.js 运行时，因此一个简单的 “Hello World” 大约需要 150 MB。

Tauri 采用了不同的方式：

• 原生 WebView – 使用操作系统自带的 WebView（Windows 上为 WebView2），在多个应用之间共享。
• Rust 后端 – 编译为体积小的原生二进制文件。
• 体积 – 一个 Tauri 应用可以小于 10 MB；我的可移植可执行文件约为 4 MB。

其他原因：

• 学习 Rust – 我想正式学习这门语言。
• 原生 Windows 集成 – 可以轻松调用 Windows API 和 shell 命令。
• 安全模型 – 前端只能调用明确允许的后端函数。

技术栈

前端

后端

测试

• Vitest – 前端单元测试。
• WebdriverIO with Tauri Driver – 端到端测试。

第一次实现：列出发行版

初始版本仅列出发行版并显示其状态。Tauri 的命令系统让这一步变得非常直接。

Rust side

#[tauri::command]
pub async fn list_distributions() -> Result, String> {
    // Run `wsl --list --verbose` and parse the output
    let output = std::process::Command::new("wsl")
        .args(["--list", "--verbose"])
        .output()
        .map_err(|e| e.to_string())?;

    // Parse and return
    parse_wsl_list(&output.stdout)
}

React side

import { invoke } from '@tauri-apps/api/core';
import { useState, useEffect } from 'react';

interface Distribution {
  name: string;
  state: string;
  version: number;
  // …other fields
}

export function useDistributions() {
  const [distributions, setDistributions] = useState([]);

  useEffect(() => {
    async function loadDistributions() {
      const distros = await invoke('list_distributions');
      setDistributions(distros);
    }
    loadDistributions();
  }, []);

  return distributions;
}

不需要复杂的 IPC 设置或序列化样板代码——Tauri 负责在 JavaScript 与 Rust 之间搭建桥梁。

Feature Growth

After the list view, I added:

• Resource monitoring – Memory usage, CPU percentage, disk sizes.
• Distribution management – Start, stop, terminate, set default.
• Import/Export – Backup and restore distributions as tar files.
• Container imports – Pull OCI images directly from registries.
• Renaming – Change distribution names (involves Windows Registry surgery).
• Custom actions – User‑defined shell commands per distribution.

Rust 挑战

Rust 的借用检查器经常让我陷入困境，但一旦代码编译通过，通常就能正常工作。其他语言常见的 bug——空指针、竞争条件、使用后释放——根本不会出现。

在开发过程中，Tauri 2.0 发布了，促使我们从 1.x 迁移到 2.x。迁移过程大多比较直接，虽然有几个 API 改动，插件系统也进行了大幅重构。

前端感想

React就是React，Tailwind让样式编写变得快速。经过多年使用Redux后，Zustand像一股清新的空气——只需创建一个包含状态和函数的 store，无需 actions/reducers/middleware 的繁琐流程。

系列概览

这是关于构建 WSL‑UI 系列的第一篇文章。后续文章将涵盖：

• Mock Mode – 为测试和开发构建虚假的 WSL 环境。
• Registry Surgery – 重命名发行版在底层是如何实现的。
• OCI Without Docker – 直接从注册表拉取容器镜像。
• Microsoft Store Publishing – 从 Tauri 到 MSIX 再到 Store 上架。
• E2E Testing – 使用 WebdriverIO 进行截图生成和视频录制。
• Polish and Analytics – 从后端视角看 UI 开发痛点，以及隐私优先的分析。

可用性

WSL‑UI 是开源的，可在以下渠道获取：

• Microsoft Store – 搜索 “WSL UI” 或访问商店页面。
• 官方网页 – [Website Download]
• GitHub –

如果您对 Tauri 感兴趣，或想了解各部分如何协同工作，代码已全部公开，文档相对完善，随时可供探索。

接下来

我构建了一个完整的模拟模式，使我能够在不触及真实 WSL 发行版的情况下进行开发和测试。