Notification System

Tauri 系统通知

安装

# Cargo.toml
tauri-plugin-notification = "2"

pnpm add @tauri-apps/plugin-notification

注册插件

tauri::Builder::default()
    .plugin(tauri_plugin_notification::init())

Capabilities

{ "permissions": ["notification:default"] }

TypeScript 使用

基础通知

import { sendNotification, isPermissionGranted, requestPermission } from "@tauri-apps/plugin-notification";

async function notify(title: string, body: string) {
  let permissionGranted = await isPermissionGranted();
  if (!permissionGranted) {
    const permission = await requestPermission();
    permissionGranted = permission === "granted";
  }

  if (permissionGranted) {
    sendNotification({ title, body });
  }
}

// 使用
await notify("任务完成", "文件导出已完成！");

Rust 侧发送通知

use tauri_plugin_notification::NotificationExt;

#[tauri::command]
fn send_notification(app: tauri::AppHandle, title: String, body: String) -> Result<(), String> {
    app.notification()
        .builder()
        .title(&title)
        .body(&body)
        .show()
        .map_err(|e| e.to_string())
}

应用内 Toast 提示

对于不需要系统级通知的简单提示，使用前端 Toast 组件：

pnpm add react-hot-toast

import toast, { Toaster } from "react-hot-toast";

function App() {
  return (
    <div>
      <Toaster position="top-right" />
      <button => toast.success("保存成功！")}>保存</button>
      <button => toast.error("操作失败")}>测试错误</button>
    </div>
  );
}

常见错误