tauri2-react-rust

Tauri 2 + React + Rust 跨平台开发

基于 Tauri 2、TypeScript、React、Rust 技术栈的跨平台桌面应用开发指引。整合架构、IPC、后端与前端最佳实践。

何时使用本 Skill

• 设计或实现 Tauri 应用架构、IPC 通信
• 编写 Rust 后端命令、状态、错误处理
• 编写 TypeScript/React 前端、类型与 invoke 封装
• 新建项目、实现功能、异步/复杂类型场景
• 配置安全（allowlist）、构建与调试
• 调研目标网站：克隆/仿站时，自动打开网站并查看页面元素、结构、交互，指导实现
• 验证开发效果：开发完成后，自动打开本地开发站点或打包前端，验证元素与交互是否按预期完成

开发流程建议

1. 先设计后编码：brainstorming → 架构设计 → 实现
2. 测试驱动：先写测试再写实现
3. 类型一致：Rust 模型与 TypeScript 类型严格对应
4. 异步优先：I/O 用 async/await；CPU 密集用 spawn_blocking
5. 安全第一：配置 allowlist、校验并规范化输入（如路径）

项目结构

project/
├── src-tauri/                 # Rust 后端
│   ├── src/
│   │   ├── main.rs            # 入口，注册 commands、manage state
│   │   ├── lib.rs             # 模块导出
│   │   ├── commands/          # IPC 命令（按域拆分）
│   │   ├── models/            # 与前端共享的数据结构
│   │   ├── db/                # 数据库访问（Repository 模式）
│   │   ├── state.rs           # AppState
│   │   └── error.rs           # 统一可序列化错误类型
│   ├── Cargo.toml
│   └── tauri.conf.json
├── src/                       # 前端 React + TypeScript
│   ├── components/            # 原子化、职责单一
│   ├── hooks/                 # React Query 等服务器状态
│   ├── services/              # 封装 invoke 的 API 层
│   ├── store/                 # Zustand 等 UI 状态
│   ├── types/                 # 与 Rust 模型一致的 TS 类型
│   └── App.tsx
├── package.json
└── tsconfig.json

IPC 通信

前端 → 后端：Command

// src/services/xxx.ts
import { invoke } from '@tauri-apps/api/core'

export async function getItems(): Promise<Item[]> {
  return await invoke<Item[]>('get_items')
}

// src-tauri/src/commands/xxx.rs
#[tauri::command]
pub async fn get_items(state: State<'_, AppState>) -> Result<Vec<Item>, AppError> {
    let db = state.db.lock().map_err(|_| AppError::Lock)?;
    Ok(repo::list(&db)?)
}

后端 → 前端：Event

use tauri::Manager;
app.emit_all("event-name", payload).ok();

import { listen } from '@tauri-apps/api/event';
const unlisten = await listen<T>('event-name', (e) => { ... });
// 组件卸载时 unlisten()