opencode7-桌面应用实战2

在桌面应用开发的路上，选对技术栈往往是决定项目成败的关键一步。今天这篇文章，重点聊借用AI工具和Tauri框架，从零搭建一个跨平台桌面应用的全流程。从技术选型到代码生成，再到环境搭建，全程走通。

本节目标

• 确定我们的桌面技术方案
• 通过 Google AI Studio 把原型图生成页面代码
• 安装 Rust 环境
• 安装 Tauri 相关依赖
• 创建 Tauri 项目
• 把 AI Studio 生成的页面代码放到 Tauri 项目中

确定桌面技术方案

打开视野

很多开发者是从 Ja va 后端转过来的。Ja va 常用的桌面方案主要是 Swing、AWT、Ja vaFX。Swing 和 AWT 用过的人都知道，做出来的桌面应用颜值不太能打，还特别吃内存。所以 Ja va 这套方案基本可以排除。AI 的加持，给了我们在技术选型上更大的想象空间。

不过最终落地还是要满足一些硬性条件：

• 支持跨平台。至少覆盖 Windows 和 macOS。
• 多平台页面表现一致。
• 占用内存小，运行效率高。

主流方案对比

Electron

• 用 HTML / CSS / Ja vaScript 构建 UI，内嵌 Chromium + Node.js
• VS Code、Slack、Discord、Figma 等大量知名应用的选择
• 优点：生态极其成熟，前端开发者几乎零学习成本
• 缺点：包体积大（动辄 100MB+），内存占用高

Tauri

• 采用 Rust 开发后端，支持 HTML / CSS / Ja vaScript 构建用户界面，复用系统 WebView 而非内嵌 Chromium，应用体积更小
• 轻量、高效的优势正在吸引更多开发者，有望逐步成为桌面跨平台的主流选择
• 缺点：Rust 学习曲线陡峭，生态相比 Electron 还不够完善

Flutter

• 使用 Dart 语言，自己绘制所有 UI 控件，UI 在所有平台完全一致
• 支持 Windows / macOS / Linux / iOS / Android / Web
• 适合需要高性能和一致性 UI 表现的应用，尤其是高度自定义和复杂 UI 场景
• 缺点：Dart 是 Google 专门为 Flutter 设计的语言，生态比较小众

Qt

• C++ 生态的老牌框架，也支持 Python（PyQt / PySide）
• 工业级应用、专业软件的首选（如 Autodesk、VLC）
• 商业授权收费，开源项目可免费使用

确定方案

一番对比下来，最终选择了 Tauri 方案。核心原因就是看中它的内存占用小、运行效率高。至于它依赖的 Rust 语言，这里强烈推荐学习一下。最近也正在深入 Rust，可能这也是更倾向 Tauri 的一个原因吧。

Rust 到底好在哪儿？它由 Mozilla 在 2010 年发布，是系统级编程语言，连续多年在 Stack Overflow 开发者调查中拿下"最受喜爱的编程语言"第一名。一句话概括核心卖点：C++ 级别的性能 + 内存安全。

从 Ja va 后端视角看，Rust 的吸引力主要集中在以下几点：

• 内存安全，无需 GC

  Ja va 依赖 JVM 的垃圾回收（GC）来管理内存，带来的最大痛点就是 GC 停顿（Stop The World）。高并发场景下，GC 延迟让很多 Ja va 系统头疼不已。Rust 通过"所有权系统（Ownership）"在编译期就搞定了内存管理，既没有 GC 的性能损耗，也不会出现 C/C++ 那样的野指针和内存泄漏问题。

• 性能接近 C/C++

  Rust 编译成原生机器码，运行效率极高，基本可以看作和 C/C++ 处于同一水平。

• 现代语言特性

  Rust 拥有现代语言才有的特征：强类型推导、模式匹配、函数式编程风格、优异的错误处理机制（Result / Option）。从 Ja va 转过来，这些概念并不陌生，上手曲线没有想象中那么陡峭。

• 工具链完善

  Rust 的包管理工具 Cargo 非常好用，类似于 Ja va 生态里的 Ma ven / Gradle，依赖管理、构建、测试、发布一条龙，体验相当顺畅。

Tauri 简介

技术选型定下之后，再具体看看 Tauri 是什么。Tauri 是一个用于构建跨平台桌面应用程序的现代化框架。核心理念是：用 Web 前端技术构建界面，同时利用 Rust 语言确保后端的性能与安全性。你可以把它理解为 Electron 的强有力对手，但在资源占用和安全性上做了巨大优化。

Tauri 核心架构

它采用多语言混合的架构：

• 前端

  可以使用任何 Web 框架，比如 Vue, React, Svelte 或者纯 HTML/JS。

• 后端

  使用 Rust 处理系统级操作（文件 I/O、网络、多线程等）。

• 渲染层

  Tauri 不捆绑整个 Chromium 浏览器（这是 Electron 体积大的原因）。它直接调用操作系统原生的 WebView（macOS 上是 WebKit/Safari，Windows 上是 WebView2/Edge，Linux 上是 WebKitGTK）。

Tauri 的主要优势

• 极小的安装包体积：不携带浏览器内核，一个简单的 Tauri 应用安装包通常只有 2-10MB，而同样的 Electron 应用至少 100MB 起步。
• 极低的内存占用：原生 WebView 运行效率通常高于捆绑的 Chromium，对系统资源的消耗更少。
• 安全性（Security First）：默认前端无法随意访问底层系统 API，必须在 Rust 层显式定义"命令"并在 capabilities 中授权。这种"最小权限原则"极大降低了安全风险。
• Rust 的性能加持：涉及高性能计算、加密、大数据量处理时，Rust 的表现远胜于 Node.js。

从原型到代码

技术方案确定后，下一步就是做页面。传统流程是：画原型图 -> 前端手写 HTML / CSS。这过程费时费力，而且对后端开发者来说，前端代码本身就是一道坎。这里借助 Google 的 AI Studio 工具来跨过这道门槛。整体流程如下：

Stitch 画原型图 → 导入 AI Studio → 生成前端代码 → Tauri 项目集成 → OpenCode 实际开发

Stitch 导出到 AI Studio

导出结果：

AI Studio 中用提示词生成前端代码

提示词设置：

角色设定：你是一个世界顶级的资深前端开发工程师，擅长将 UI 设计稿（图片）高保真地还原为现代前端代码。任务目标：我正在开发一款名为 MTOOL 的 Tauri 桌面工具箱应用。请仔细观察我上传的 UI 截图，并将其转换为完整的、可运行的前端代码。技术栈要求：1. 框架采用 React + TypeScript 2. 样式采用 Tailwind CSS（尽量使用基础原子类，不要自己写大段的自定义 CSS）3. 图标请使用 lucide-react 库中合适的图标来代替图片里的图标。具体实现要求：1. 高保真还原：精确还原图片中的布局、间距、颜色、边框圆角以及字体层级。2. image7 是这个桌面应用的 logo，并不是单独页面。3. 布局结构：这是一个经典的左右分栏布局（左侧导航栏 Sidebar，右侧主内容区 Main Content）。4. image1、image3、image5 是这个应用在点击侧边栏的 Settings、Text to QR、JSONFormatter 后的显示效果。希望每个页面是单独的组件代码，便于以后扩展新功能。5. 只需要实现纯 UI 静态界面，不编写任何真实业务逻辑。但点击左侧菜单栏内容，可以切换到对应功能的页面组件。6. 占位数据：对于输入框或结果展示区，填入美观的 Mock 假数据。7. 按钮、输入框、菜单项等，加上合理的 hover 或 focus 样式。

生成结果：

整体效果还不错。点击 Select this design 按钮后，会生成更加精细的配置效果。这一步主要是看大体风格，点击按钮后所有功能才算最终完成。

下载前端代码

• 默认显示 preview 页面，可以点击左侧按钮看整体应用效果。

  

• 切换到 code 栏下载代码。

  

创建一个 Tauri 项目

前端代码已经到位，接下来创建 mtool 项目。不过前提是要先安装 Tauri，而 Tauri 在 Windows 上需要几个前置依赖，除了 Node.js 之外还需要安装几样东西。

安装 Microsoft C++ 构建工具

Rust 编译时需要 MSVC 工具链。去微软官网下载 Visual Studio Build Tools，安装时勾选"使用 C++ 的桌面开发"工作负载即可，不需要装完整的 Visual Studio。

地址：visualstudio.microsoft.com/visual-cpp-build-tools/

安装 Rust

去 rustup.rs 下载 rustup-init.exe，运行后按提示安装，默认选项即可。它会自动安装 rustc 和 cargo。

安装完成后验证：

rustc --version
cargo --version

创建 Tauri 项目

npm create tauri-app@latest

• Project name: 项目名称，需要手动输入。

• Identifier: 应用唯一标识符，和 Ja va 包名规范一样，用反向域名+项目名称。

• Choose which language to use for your frontend: 选择第一个，因为 AI Studio 生成的是 React + TypeScript。

• Choose your package manager: 用默认 npm 即可。

• Choose your UI template: 选择 React，和 AI Studio 生成的技术栈保持一致。

• Choose your UI fla vor: 选择 TypeScript，也和 AI Studio 一致。

创建后的目录结构

各个文件/目录的作用：

• src/ ← 前端代码，AI Studio 生成的 React 组件放这里
• src-tauri/ ← Rust 后端，基本不用动
• public/ ← 静态资源（图片、字体等）
• index.html ← 前端入口 HTML
• package.json ← 前端依赖配置
• vite.config.ts ← Vite 构建配置
• tsconfig.json ← TypeScript 配置

把 AI Studio 生成代码覆盖到 src 中

• 删除 src 目录中的内容

  

• 拷贝 AI Studio 代码到 src

  

启动项目

安装必要的依赖

# 项目根目录下执行，也就是在 mtool 目录中执行
npm install
# AI Studio 生成的代码用到了 lucide-react 图标库
npm install lucide-react
# AI Studio 生成的代码用到了 tailwindcss
npm install tailwindcss @tailwindcss/vite

运行项目查看效果

# 仅看前端页面效果
npm run dev

访问页面，发现没有正确显示，主要是在 vite.config.ts 里缺少 Tailwind 的插件配置。

OpenCode 排查问题

• 使用 OpenCode 打开 MTOOL 项目。

• 执行 /init 命令。

• 输入提示词：

  通过 npm run dev 启动本项目，访问 http://localhost:1420/ 发现仅显示了黑色的图标，页面是黑色背景，这是为什么？

  很快返回结果：

  

让它来自动修复

修改后页面正常显示

总结

• Stitch 负责原型设计，AI Studio 负责"切图"转代码，OpenCode 负责写业务逻辑，这一套组合拳直接把开发门槛踩到了脚底。
• 面对 Tauri 和 Rust 这种以往不敢轻易碰的新框架，有了 OpenCode 的辅助，也变成可以尝试的方案了。
• AI 时代需要扩展眼界，了解更多知识。选择技术栈时，那些不太熟悉的语言或框架，也可能成为不错的备选方案。
• 建议选择的技术方案多少要有所了解，至少知道其能力边界。最好有个全面概括的了解，就像走钢丝有保险绳一样，即使 AI 挂了，也不会掉进万丈深渊。