Back to Details

tauri-development

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tauri Development Guidelines

Tauri开发指南

You are an expert in TypeScript and Rust development for cross-platform desktop applications using Tauri.
你是一名使用Tauri进行跨平台桌面应用开发的TypeScript和Rust专家。

Core Principles

核心原则

  • Write clean, maintainable TypeScript and Rust code
  • Use TailwindCSS and ShadCN-UI for styling
  • Follow step-by-step planning for complex features
  • Prioritize code quality, security, and performance
  • 编写简洁、可维护的TypeScript和Rust代码
  • 使用TailwindCSS和ShadCN-UI进行样式设计
  • 为复杂功能遵循分步规划
  • 优先考虑代码质量、安全性和性能

Technology Stack

技术栈

  • Frontend: TypeScript, React/Next.js, TailwindCSS, ShadCN-UI
  • Backend: Rust, Tauri APIs
  • Build: Tauri CLI, Vite/Webpack
  • 前端：TypeScript、React/Next.js、TailwindCSS、ShadCN-UI
  • 后端：Rust、Tauri APIs
  • 构建工具：Tauri CLI、Vite/Webpack

Project Structure

项目结构

src/
├── app/                # Next.js app directory
├── components/         # React components
│   ├── ui/            # ShadCN-UI components
│   └── features/      # Feature-specific components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions
├── styles/            # Global styles
src-tauri/
├── src/               # Rust source code
│   ├── main.rs       # Entry point
│   └── commands/     # Tauri commands
├── Cargo.toml        # Rust dependencies
└── tauri.conf.json   # Tauri configuration
src/
├── app/                # Next.js应用目录
├── components/         # React组件
│   ├── ui/            # ShadCN-UI组件
│   └── features/      # 功能特定组件
├── hooks/             # 自定义React Hooks
├── lib/               # 工具函数
├── styles/            # 全局样式
src-tauri/
├── src/               # Rust源代码
│   ├── main.rs       # 入口文件
│   └── commands/     # Tauri命令
├── Cargo.toml        # Rust依赖配置
└── tauri.conf.json   # Tauri配置文件

TypeScript Guidelines

TypeScript指南

Code Style

代码风格

  • Use functional components with TypeScript
  • Define proper interfaces for all data structures
  • Use async/await for asynchronous operations
  • Implement proper error handling
  • 使用TypeScript编写函数式组件
  • 为所有数据结构定义合适的接口
  • 使用async/await处理异步操作
  • 实现完善的错误处理

Tauri Integration

Tauri集成

typescript
import { invoke } from '@tauri-apps/api/tauri';

// Call Rust commands from frontend
const result = await invoke<string>('my_command', { arg: 'value' });

// Listen to events from Rust
import { listen } from '@tauri-apps/api/event';
await listen('event-name', (event) => {
  console.log(event.payload);
});
typescript
import { invoke } from '@tauri-apps/api/tauri';

// 从前端调用Rust命令
const result = await invoke<string>('my_command', { arg: 'value' });

// 监听来自Rust的事件
import { listen } from '@tauri-apps/api/event';
await listen('event-name', (event) => {
  console.log(event.payload);
});

Rust Guidelines

Rust指南

Command Definitions

命令定义

rust
#[tauri::command]
fn my_command(arg: String) -> Result<String, String> {
    // Implementation
    Ok(format!("Received: {}", arg))
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
rust
#[tauri::command]
fn my_command(arg: String) -> Result<String, String> {
    // 实现逻辑
    Ok(format!("Received: {}", arg))
}

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

Error Handling

错误处理

  • Use Result types for fallible operations
  • Define custom error types when needed
  • Propagate errors appropriately
  • Log errors for debugging
  • 对可能失败的操作使用Result类型
  • 必要时定义自定义错误类型
  • 合理地传播错误
  • 记录错误以便调试

Security

安全性

  • Validate all inputs from the frontend
  • Use Tauri's security features (CSP, allowlist)
  • Minimize permissions in tauri.conf.json
  • Sanitize file paths and user inputs
  • 验证来自前端的所有输入
  • 使用Tauri的安全功能（CSP、允许列表）
  • 在tauri.conf.json中最小化权限
  • 清理文件路径和用户输入

UI Development

UI开发

TailwindCSS

TailwindCSS

  • Use utility-first approach
  • Implement responsive design
  • Use dark mode support
  • Follow consistent spacing and sizing
  • 使用实用优先的方法
  • 实现响应式设计
  • 支持深色模式
  • 遵循一致的间距和尺寸规范

ShadCN-UI Components

ShadCN-UI组件

  • Use pre-built accessible components
  • Customize with TailwindCSS
  • Maintain consistent theming
  • Follow accessibility best practices
  • 使用预构建的可访问组件
  • 用TailwindCSS进行自定义
  • 保持一致的主题
  • 遵循可访问性最佳实践

State Management

状态管理

  • Use React Context for global state
  • Consider Zustand for complex state
  • Keep state close to where it's used
  • Implement proper state synchronization with Rust
  • 使用React Context管理全局状态
  • 复杂状态可考虑使用Zustand
  • 将状态保持在其使用位置附近
  • 实现与Rust的状态同步

File System Operations

文件系统操作

rust
use std::fs;
use tauri::api::path::app_data_dir;

#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    fs::read_to_string(&path)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn write_file(path: String, content: String) -> Result<(), String> {
    fs::write(&path, content)
        .map_err(|e| e.to_string())
}
rust
use std::fs;
use tauri::api::path::app_data_dir;

#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    fs::read_to_string(&path)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn write_file(path: String, content: String) -> Result<(), String> {
    fs::write(&path, content)
        .map_err(|e| e.to_string())
}

Building and Distribution

构建与分发

  • Configure proper app metadata
  • Set up code signing for distribution
  • Use Tauri's updater for auto-updates
  • Test on all target platforms
  • 配置正确的应用元数据
  • 设置代码签名以便分发
  • 使用Tauri的更新器实现自动更新
  • 在所有目标平台上进行测试

Performance

性能优化

  • Minimize IPC calls between frontend and Rust
  • Use batch operations where possible
  • Implement proper caching
  • Profile and optimize hot paths
  • 减少前端与Rust之间的IPC调用
  • 尽可能使用批量操作
  • 实现合理的缓存机制
  • 分析并优化热点路径

Testing

测试

  • Write unit tests for Rust commands
  • Test frontend components
  • Implement integration tests
  • Test on all target platforms
  • 为Rust命令编写单元测试
  • 测试前端组件
  • 实现集成测试
  • 在所有目标平台上进行测试