13.5 跨平台桌面工具

项目概述

用 Tauri + React 构建一个跨平台桌面工具——比如一个系统剪贴板管理器、Markdown 编辑器或图片压缩工具。

Tauri 是一个用 Rust 做底层、Web 技术做界面的桌面应用框架。它比 Electron 更轻量（安装包小 10 倍，内存占用低 5 倍）。

你不需要写 Rust——AI 会替你处理。你只需要用 React 写界面，AI 做 Rust 和 Tauri 的胶水代码。

推荐技术栈

• 桌面框架：Tauri v2
• 前端：React + Tailwind CSS
• 后端语言：Rust（AI 代写，你不需要学）
• 本地存储：Tauri 内置的 fs API 或 SQLite

分步 Vibe 流程

第 1 步：创建 Tauri 项目

创建一个 Tauri v2 + React 项目。
项目是一个图片压缩工具，功能：
- 拖拽或选择图片
- 显示原图预览和压缩率滑块
- 点击压缩后显示压缩后的图片
- 支持导出压缩后的图片

AI 会运行 npm create tauri-app 并配置所有依赖。

等待这一步完成时需要注意：Tauri 的初始化需要 Rust 编译环境。AI 会自动检测你的系统上是否安装了 Rust，如果没有，它会指导你安装。

Rust 安装指南：

- macOS/Linux：curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

- Windows：从 https://rustup.rs 下载安装程序，运行后选择默认安装

- 安装完成后，重启终端，运行 rustc --version 确认安装成功

整个过程约 5-10 分钟。你不需要学习 Rust——安装只是为了编译环境。

第 2 步：实现图片处理（Rust 端）

在 Rust 端实现图片压缩逻辑：
- 使用 image crate 加载图片
- 支持 JPEG 和 PNG 格式
- 根据压缩质量参数调整输出
- 返回压缩前后的文件大小对比

Rust 代码几乎全部由 AI 生成。你只需要确保 AI 安装了所需的 Rust crate。AI 会在 src-tauri/Cargo.toml 中添加依赖项，然后运行 cargo build 编译。

关于编译时间： Rust 第一次编译可能会比较慢（因为需要下载和编译依赖）。这是正常的。后续修改后的编译会快很多（增量编译）。如果编译超过 5 分钟，可以告诉 AI "不要用 image crate 的全部功能，只加载 JPEG 和 PNG 支持"来减少编译量。

如果你好奇 AI 写了什么 Rust 代码，可以打开 src-tauri/src/ 下的文件看看。但再次强调——你不需要理解 Rust 也能完成这个项目。

第 3 步：构建前端界面

创建一个美观的拖拽区域，支持点击上传和拖拽上传。
上传后显示原图预览，下方有一个压缩质量滑块（1-100）。
点击"预览压缩效果"按钮显示压缩后预览和文件大小对比。
有一个"导出"按钮下载压缩后的图片。

前端界面使用 React + Tailwind CSS 构建。AI 会创建三个核心组件：上传区域、预览面板、控制面板。每个组件都通过 Tauri 的 invoke API 调用 Rust 后端。

前端和后端的通信方式： Tauri 中，前端通过 invoke('command_name', { args }) 调用 Rust 函数。AI 会在 Rust 端注册这些命令，在前端自动生成对应的调用代码。你不需要理解这个过程——AI 会在两端自动配对。

第 4 步：添加高级功能

添加批量处理功能：
- 支持一次拖入多张图片
- 以网格显示所有图片
- 统一设置压缩质量
- 一键批量导出
添加深色模式支持。

批量处理是桌面应用的"杀手级功能"——Web 应用处理批量文件往往受限于浏览器沙箱，但桌面应用不受限制。Tauri 有完整的文件系统 API，AI 可以轻松实现批处理逻辑。

扩展方向

方向一：剪贴板管理器。

做一个系统剪贴板历史管理器：监听系统剪贴板变化，保存历史记录，支持搜索和重新复制。

Tauri 的系统托盘功能让这个工具可以常驻后台：

让应用启动后在系统托盘中运行，点击托盘图标显示剪贴板历史窗口。
按 Ctrl+Shift+V 唤出历史面板。

方向二：Markdown 编辑器。

把图片压缩工具改成一个 Markdown 编辑器：
左侧编辑 Markdown，右侧实时预览渲染效果。
支持导出为 HTML 和 PDF。
支持打开本地 .md 文件编辑。

方向三：系统监控工具。

做一个系统资源监控工具：
显示 CPU、内存、磁盘使用率。
使用 Tauri 的 system_info API（Rust 端实现）。
每 2 秒刷新一次数据，用图表展示趋势。

Tauri 的特殊之处

Tauri 是"假前端，真后端"的框架——界面是 Web 技术，但系统能力（文件系统、进程、窗口）通过 Rust 后端暴露给前端。这意味着：

• 你可以用熟悉的 HTML/CSS/JS 写界面
• AI 替你处理 Rust 和 Tauri API
• 生成的桌面应用只有几 MB 大小（对比 Electron 动辄上百 MB）

Tauri 还支持系统托盘、全局快捷键、自动更新——这些功能通过自然语言让 AI 配置即可。

Tauri vs Electron 的直观对比：

一个"Hello World"应用：

- Electron：安装包约 150MB，内存占用约 100MB

- Tauri：安装包约 5MB，内存占用约 20MB

因为 Tauri 使用操作系统自带的 WebView 渲染界面（Windows 用 WebView2，macOS 用 WKWebView），不需要打包一个完整的浏览器进去。这就是它更轻量的根本原因。

关键决策点

决策点	可选方案	说明
桌面框架	Tauri / Electron	Tauri 更轻量，Electron 生态更成熟
图片处理	Rust image crate / 浏览器 Canvas	前者功能全但需要编译，后者简单但能力有限
文件选择	Tauri dialog API / HTML input	Tauri API 体验更好，支持系统原生对话框
打包分发	MSI / DMG / AppImage / 侧载	Tauri 支持全平台打包，AI 可配置 CI 自动构建
存储方案	文件系统 / SQLite	配置和简单数据用 fs，结构化数据用 SQLite

常见问题与 AI 修复

问题 1：系统依赖缺失。

"Tauri 编译时提示缺少某些系统依赖。"

AI 会识别你的操作系统并提供安装命令。最常见的是缺少 WebKit 开发库：

• Ubuntu：sudo apt install libwebkit2gtk-4.1-dev
• macOS：通常不需要额外依赖
• Windows：需要安装 WebView2（通常 Windows 11 已内置）

问题 2：图片导出后体积膨胀。

"导出的图片比原图还大。"

AI 会检查发现 PNG 格式在低质量设置下反而会膨胀。修复方案是将默认导出格式改为 JPEG，并在界面中添加了格式选择。

问题 3：打包后应用无法启动。

"打包成 .exe 后，在其他电脑上打开提示缺少 DLL。"

AI 会检查 Tauri 的打包配置，确保静态链接了所有依赖（在 tauri.conf.json 中设置 bundle > windows > wix > template 相关的选项）。

你：Tauri 编译时提示缺少某些系统依赖。

AI：你的系统缺少 WebKit 开发库。在 Ubuntu 上运行 sudo apt install libwebkit2gtk-4.1-dev 安装。

你：导出的图片比原图还大。

AI：检查发现 PNG 格式在低质量设置下反而会膨胀。已将默认导出格式改为 JPEG，并在界面中添加了格式选择。

你：批量处理时，进度条不动直到全部完成。

AI：当前是串行处理，每张图片完成后才更新进度。改为异步处理，每处理完一张立即更新进度条，同时显示"处理中 3/10"。