🏗️ 架构设计：Project Knowledge Base/桌面与跨平台UI/Tauri 架构设计

Tauri

用 Rust + Web 技术构建极小、极快、更安全的跨平台桌面和移动应用，是 Electron 的现代替代方案。

🎯 为什么需要它

Electron 应用动辄 100-200MB、吃 300MB 内存，用户抱怨”又一个 Electron 巨无霸”。Tauri 用系统原生 WebView 替代捆绑 Chromium，同样的 Web 前端技术栈，应用体积缩小到 3-10MB，内存占用降低 60-75%，还自带移动端支持。

✅ 核心优势

• 极致轻量：安装包 3-10MB（Electron 的 1/25），内存占用 30-50MB（Electron 的 1/5）
• Rust 后端：内存安全、无 GC、反编译困难，性能接近原生
• 安全默认：Capability-based 权限系统，前端默认无系统访问权限，每个大版本经过安全审计
• 全平台覆盖：Windows / macOS / Linux / iOS / Android，单一代码库
• 前端自由：React / Vue / Svelte / 任意前端框架，不绑定特定技术栈
• 自动安全更新：系统 WebView 更新时应用自动受益，无需重新发布

⚡ 性能表现

注意：Tauri 的 Rust 首次编译较慢（可能需要数分钟），后续增量构建很快。

🚀 快速上手

环境准备

1. 安装 Rust（https://rustup.rs）
2. 安装 Node.js 18+
3. 安装系统依赖：
   • Windows：WebView2（Win10+ 自带）、Visual Studio C++ Build Tools
   • macOS：Xcode Command Line Tools
   • Linux：webkit2gtk-4.1、build-essential、curl、wget 等

创建项目

# 使用 npm
npm create tauri-app@latest

# 使用 cargo
cargo create-tauri-app

# 交互式选择：
# - 项目名称
# - 前端语言（TypeScript / JavaScript）
# - 包管理器（npm / yarn / pnpm / bun）
# - 前端框架（React / Vue / Svelte / Vanilla）

开发调试

cd your-app
npm install
npm run tauri dev    # 启动开发模式（热重载）

首次运行会下载和编译 Rust 依赖，需要几分钟。后续修改前端代码会自动热重载，修改 Rust 代码会自动重新编译。

打包发布

npm run tauri build  # 生成各平台安装包
# 输出位置：src-tauri/target/release/bundle/

最小示例

Rust 后端 (src-tauri/src/main.rs)：

#[tauri::command]
fn greet(name: String) -> String {
    format!("Hello, {}! 来自 Rust 后端", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

前端调用 (src/App.tsx)：

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

function App() {
  const [msg, setMsg] = useState('');

  async function handleGreet() {
    const greeting = await invoke<string>('greet', { name: 'Tauri' });
    setMsg(greeting);
  }

  return (
    <div>
      <button onClick={handleGreet}>问候</button>
      <p>{msg}</p>
    </div>
  );
}

export default App;

📦 常用功能速查

文件系统操作

import { readTextFile, writeTextFile, exists } from '@tauri-apps/plugin-fs';

// 读取文件
const content = await readTextFile('config.json', { baseDir: BaseDirectory.AppData });

// 写入文件
await writeTextFile('settings.json', JSON.stringify(data), { baseDir: BaseDirectory.AppData });

// 检查文件是否存在
const fileExists = await exists('data.db');

对话框

import { open, save, message, confirm } from '@tauri-apps/plugin-dialog';

// 文件选择
const filePath = await open({ filters: [{ name: 'Images', extensions: ['png', 'jpg'] }] });

// 保存文件
const savePath = await save({ defaultPath: 'output.txt' });

// 消息框
await message('操作完成！', { title: '提示', kind: 'info' });

// 确认框
const yes = await confirm('确定要删除吗？', { title: '确认', kind: 'warning' });

系统托盘

use tauri::tray::{TrayIconBuilder, MouseButton, MouseButtonState};
use tauri::menu::{Menu, MenuItem};

fn main() {
    tauri::Builder::default()
        .setup(|app| {
            let quit = MenuItem::with_id(app, "quit", "退出", true, None::<&str>)?;
            let menu = Menu::with_items(app, &[&quit])?;

            let _tray = TrayIconBuilder::new()
                .menu(&menu)
                .tooltip("我的应用")
                .on_menu_event(|app, event| match event.id.as_ref() {
                    "quit" => app.exit(0),
                    _ => {}
                })
                .build(app)?;
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error");
}

窗口管理

import { Window } from '@tauri-apps/api/window';

// 获取当前窗口
const win = Window.getCurrent();

// 设置标题
await win.setTitle('新标题');

// 最小化/最大化
await win.minimize();
await win.toggleMaximize();

// 置顶
await win.setAlwaysOnTop(true);

事件系统

import { listen, emit } from '@tauri-apps/api/event';

// 监听 Rust 发来的事件
const unlisten = await listen<{ percent: number }>('download-progress', (event) => {
    console.log(`进度: ${event.payload.percent}%`);
});

// 向 Rust 发送事件（通过 invoke 更常用）
await emit('frontend-ready', { timestamp: Date.now() });

通知

import { sendNotification } from '@tauri-apps/plugin-notification';

sendNotification({ title: '任务完成', body: '文件已下载到桌面' });

全局快捷键

import { register, unregister } from '@tauri-apps/plugin-global-shortcut';

await register('CommandOrControl+Shift+Q', () => {
    console.log('快捷键触发！');
});

📋 项目配置要点

src-tauri/tauri.conf.json 关键配置：

{
  "productName": "MyApp",
  "version": "1.0.0",
  "identifier": "com.example.myapp",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:5173"
  },
  "app": {
    "windows": [{
      "label": "main",
      "title": "MyApp",
      "width": 1024,
      "height": 768,
      "resizable": true,
      "fullscreen": false
    }],
    "security": {
      "csp": "default-src 'self'; script-src 'self'"
    }
  },
  "bundle": {
    "active": true,
    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/icon.icns"],
    "targets": "all"
  }
}

权限配置 (src-tauri/capabilities/default.json)：

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "core:window:default",
    "core:event:default",
    "fs:default",
    "fs:allow-read-text-file",
    "fs:allow-write-text-file",
    "dialog:default",
    "notification:default",
    "shell:allow-open"
  ]
}

📦 适用场景

适合：

• 轻量级桌面工具（笔记、剪贴板管理、文件处理器）
• 需要系统级集成的应用（托盘、全局快捷键、文件关联）
• 对安装包大小敏感的应用（独立开发者、分发给非技术用户）
• 需要同时支持桌面 + 移动端的应用
• 安全敏感的应用（金融、密码管理、加密工具）
• 从 Electron 迁移（前端代码几乎不用改）

不适合：

• 需要完全一致的跨平台渲染（不同系统 WebView 有差异）
• 重度依赖 Node.js 生态的已有 Electron 应用（迁移成本高）
• 需要最新的 Web API（系统 WebView 更新滞后于 Chrome）
• 团队完全不懂 Rust 且不愿学习（需要写后端逻辑）

⚠️ 已知坑 & 注意事项

• Rust 首次编译慢：首次 tauri dev 需要 3-5 分钟下载和编译依赖，后续增量构建快
• WebView 差异：Windows WebView2 基于 Chromium，macOS/Linux 基于 WebKit，CSS/JS 行为可能有差异
• Linux 依赖问题：需要安装 webkit2gtk-4.1 等系统库，不同发行版包名不同
• 权限配置容易遗漏：新增插件必须在 capabilities/ 中添加权限，否则静默失败
• 移动端开发体验：iOS/Android 支持已稳定，但调试工具和体验不如桌面端流畅
• npm 包名注意：Tauri 后端通过 Cargo 安装，前端 API 通过 npm 安装，不要混淆
• WebView 调试：右键 → Inspect 或 Ctrl+Shift+I（Windows/Linux）/ Cmd+Option+I（macOS）

🆚 竞品对比

选择建议：

• 已有 Web 前端 + 想要最小体积 → Tauri
• 需要 Node.js 生态 + 最大兼容性 → Electron
• 已用 Flutter 做移动端 → Flutter Desktop
• .NET 生态 + 原生控件 → MAUI

🌍 生态 & 社区

• 维护状态：极其活跃，GitHub 88k+ Stars，每月多个版本发布
• 文档质量：优秀，官方文档结构清晰，有完整的教程和 API 参考
• 周边生态：
  • React Three Fiber / Vue / Svelte 均有官方模板
  • awesome-tauri — 社区插件和应用集合
  • tauri-action — GitHub Actions 自动构建
  • tauri-vscode — VS Code 扩展
• 社区活跃度：Discord 社区活跃，GitHub Issues 响应快

💡 引入评估

结论：强烈推荐 — Tauri 是桌面应用开发的新标准选择。如果你的团队能接受基本的 Rust 编写（大部分逻辑仍在前端），Tauri 在体积、性能、安全性上全面碾压 Electron。移动端支持更是锦上添花。

推荐引入版本：v2.x（当前最新 v2.6.x，避免使用 v1）

🔗 相关链接

• Rust Electron 跨平台开发 桌面应用 WebView React
• 官方文档
• GitHub 仓库
• Releases
• Discord
• awesome-tauri

📝 个人备注

（留白，供后续补充实际使用心得）