opencode7-桌面应用实战2

本节目标

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

确定桌面技术方案

打开视野

我本人是 java 后端开发的。以前接触的 java 做桌面的方案主要有：Swing、AWT（Abstract Window Toolkit）、 JavaFX。Swing 和 AWT 我用过，做出来的桌面应用不太美观，而且还挺占用内存的。所以这里不会用 java 这套桌面方案。由于 AI 的加持，使我们可以更高维度来考虑应用的技术。

但是作为最终应用，还是要有一些基础的要求：

• 支持跨平台。至少支持 window 和 macOS。
• 多平台页面表示一致。
• 希望占用内存比较小，效率比较高。

主流方案对比

Electron

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

Tauri

• 采用 Rust 开发后端，支持 HTML / CSS / JavaScript 构建用户界面，复用系统 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 语言。Rust 是 Mozilla 在 2010 年发布的系统级编程语言，连续多年在 Stack Overflow 开发者调查中荣获"最受喜爱的编程语言"第一名。它的核心卖点可以用一句话概括：C++ 级别的性能 + 内存安全。

作为一个 Java 后端开发者，我对 Rust 感兴趣主要有以下几点原因：

• 内存安全，无需 GC

  Java 依赖 JVM 的垃圾回收（GC）来管理内存，这带来了一个老生常谈的问题：GC 停顿（Stop The World）。在高并发场景下，GC 导致的延迟是很多 Java 系统的痛点。Rust 通过"所有权系统（Ownership）"在编译期就解决了内存管理问题，既没有 GC 的性能损耗，也不会有 C/C++ 那样的野指针和内存泄漏问题。

• 性能接近 C/C++

  Rust 编译成原生机器码，运行效率极高。基本上可以看作和C/C++执行效率一样高。

• 现代语言特性

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

• 工具链完善

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

Tauri 简介

上面已经决定用 tauri + rust 技术选型。这里先简单说说 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 层显式地定义"命令"（Commands）并在 capabilities 中授权，这种"最小权限原则"极大地降低了安全风险。
• Rust 的性能加持: 涉及高性能计算、加密、大数据量处理时，Rust 的表现远胜于 Node.js。

从原型到代码

确定了技术方案之后，下一步就是把页面做出来。传统的做法是：先画原型图，再让前端开发者一行一行手写 HTML / CSS。这个过程费时费力，而且对于我这样的 Java 后端开发者来说，前端代码本身就是一道不可逾越的鸿沟。这里我们借助 Google 的 Ai Studio 工具来跨越这道门槛。整体流程如下：

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

stitch 导出到 AiStudio

导出结果：

这里每个 png 原型会配一个 html 对应的这个 png 的 html 页面。其实不太需要，包括icon 的图片也大可不必。所以这里可以删除一些文件，让 AI 受到的干扰因素少一些。简化后的结果如下：

AiStudio 中用提示词生成前端代码

角色设定 你是一个世界顶级的资深前端开发工程师，擅长将 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 假数据（比如一小段假 JSON），以便预览时能直接看到效果。
7. 遇到按钮、输入框、菜单项等，请加上合理的 hover（悬停） 或 focus（聚焦）态样式。

上面的提示词，我也是用 Google 的 gemini 帮我生成的提示词。点击 Build 按钮就可以生成代码了。

生成结果：

看着还可以。点击 select this design 按钮，会生成高密度设置效果。总之我这里感觉是，上面这步是让你看看大体风格，而点击了这个按钮后，所有的功能才算最终完成。

下载前端代码

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

  

• 切换到 code 下载代码

  

创建一个 Tauri 项目

经过上面的步骤，我们已经有了 tauri 的页面部分的代码。下面来创建一个 mtool 的项目。前提是要安装 tauri，但 Tauri 在 Windows 上需要安装几个前置依赖。除了 Node.js，还需要安装几样东西。

安装Microsoft C++ 构建工具

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

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

安装 Rust

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

安装完成后验证：

rustc --version
cargo --version

创建 tauri 项目

npm create tauri-app@latest

• Project name

  项目名称，需要手动输入

• Identifier

  应用的唯一标识符。和 Java 的包名规范一样。用反向域名+项目名称

• 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 flavor

  选择 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/ 发现仅显示了黑色的图标。这个页面是黑色的背景。这是为什么?

  很快就给出了结果：

  

让它来自动修复

修改后，直接就能显示出来了

到此，基本前置准备就可以了。下面就能通过 OpenCode 对 Rust 代码部分进行编写了。

总结

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