tauri2-react-rustlisted

# 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 ```typescript // src/services/xxx.ts import { invoke } from '@tauri-apps/api/core' export async function get