Architecture Design

Tauri 架构设计

核心原则

前后端分工原则

关键决策：哪些逻辑该放在哪里？

用户点击 → React 处理交互
需要系统资源? → Rust Command
纯 UI 逻辑? → React 组件
需要持久化? → Rust (文件/数据库)
需要安全? → Rust (不暴露给 WebView)

当前项目结构（三层架构）

src/                              # React 前端
├── components/
│   ├── layout/
│   │   ├── AppLayout.tsx        # 主布局（Ant Design Layout）
│   │   └── Sidebar.tsx          # 侧边栏导航
│   └── ui/
│       └── ErrorBoundary.tsx    # 错误边界
├── hooks/
│   └── useCommand.ts           # invoke 封装
├── lib/
│   └── api/
│       └── index.ts            # API 类型安全封装
├── pages/
│   ├── home/index.tsx           # 首页
│   ├── settings/index.tsx       # 设置页
│   └── about/index.tsx          # 关于页
├── store/
│   └── index.ts                # Zustand 全局状态
├── styles/
│   └── global.css              # TailwindCSS
├── types/
│   └── index.ts                # TS 类型
├── App.tsx                      # 根组件（ConfigProvider + Router）
├── Router.tsx                   # React Router 配置
└── main.tsx                     # 入口

src-tauri/src/                    # Rust 后端（三层架构）
├── commands/                    # Layer 1: IPC 入口
│   ├── mod.rs
│   ├── system.rs               # 系统命令（greet/get_system_info）
│   └── config.rs               # 配置 CRUD 命令
├── services/                    # Layer 2: 业务逻辑
│   ├── mod.rs
│   └── config.rs               # 配置服务
├── database/                    # Layer 3: 数据访问
│   ├── mod.rs                  # Database 结构体
│   └── schema.rs               # Schema 迁移
├── models/
│   └── mod.rs                  # 数据模型
├── error.rs                     # thiserror 错误类型
├── state.rs                     # AppState 定义
├── lib.rs                       # Builder 统一注册
└── main.rs                      # 进程入口

三层架构职责

三层架构 Command 注册

lib.rs 统一注册示例

mod commands;
mod services;
mod database;
mod models;
mod state;
mod error;

use state::AppState;

pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_store::Builder::default().build())
        .plugin(tauri_plugin_log::Builder::new().build())
        .manage(AppState::new())  // 包含 Database 实例
        .invoke_handler(tauri::generate_handler![
            // 系统模块
            commands::system::greet,
            commands::system::get_system_info,
            // 配置模块
            commands::config::get_config,
            commands::config::set_config,
            commands::config::list_configs,
            commands::config::delete_config,
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

调用链路

前端 invoke("get_config", { key })
  → commands/config.rs::get_config()     // Layer 1: 参数校验
    → services/config.rs::get()          // Layer 2: 业务逻辑
      → database/mod.rs::query()         // Layer 3: SQL 执行

状态管理架构

全局状态 (Rust tauri::State<AppState>)
├── Database (rusqlite) → 持久化结构化数据
├── tauri-plugin-store → 键值持久化（设置/偏好）
└── 运行时状态（进程级 Mutex<T>）

UI 状态 (React)
├── 组件内 useState
├── 全局状态 Zustand (src/store/index.ts)
└── API 封装 src/lib/api/index.ts

常见错误