mcpField
T
tauri-solidjs

tauri-solidjs

github.com/different-ai开发24.3k515 次安装今天更新
代码仓库

关于 tauri-solidjs

tauri-solidjs 是使用 Tauri 与 SolidJS 构建应用的开发技能，涵盖项目初始化、桌面开发和移动端构建，并说明前后端命令交互。

主要功能

  1. 01创建 Tauri 与 SolidJS 项目
  2. 02运行开发与生产构建
  3. 03构建 iOS 和 Android 应用
  4. 04通过 Tauri 命令连接 Rust 与 JavaScript

适用场景

  1. 01启动新的 Tauri + SolidJS 项目
  2. 02在桌面端开发和打包应用
  3. 03为 iOS 或 Android 配置构建
  4. 04从 SolidJS 调用 Rust 命令

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/different-ai/openwork --skill tauri-solidjs

安装后在 Claude Code 中输入/tauri-solidjs确认已加载。

详细介绍

快速使用（已配置）

创建新的 Tauri + SolidJS 项目
pnpm create tauri-app openwork --template solid-ts
开发
pnpm tauri dev
构建生产版本
pnpm tauri build
构建移动端版本
# iOS
pnpm tauri ios dev
pnpm tauri ios build

# Android
pnpm tauri android dev
pnpm tauri android build

项目结构

openwork/
  packages/
    desktop/
      src-tauri/
        src/
          main.rs           # Rust entry point
          lib.rs            # Tauri commands and state
        Cargo.toml          # Rust dependencies
        tauri.conf.json     # Tauri configuration
        capabilities/       # Permission capabilities
      src/
        App.tsx             # SolidJS root component
        index.tsx           # Entry point
      components/           # UI components
      stores/               # Solid stores for state
      lib/                  # Utilities and OpenCode bridge
      index.html            # HTML template
      package.json          # Frontend dependencies
      vite.config.ts        # Vite configuration

主要依赖项

前端（package.json）
{
  "dependencies": {
    "solid-js": "^1.8.0",
    "@tauri-apps/api": "^2.0.0",
    "@tauri-apps/plugin-shell": "^2.0.0",
    "@tauri-apps/plugin-fs": "^2.0.0",
    "@tauri-apps/plugin-sql": "^2.0.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.0.0",
    "vite": "^5.0.0",
    "vite-plugin-solid": "^2.8.0",
    "tailwindcss": "^3.4.0"
  }
}
后端（Cargo.toml）
[dependencies]
tauri = { version = "2", features = ["shell-open"] }
tauri-plugin-shell = "2"
tauri-plugin-fs = "2"
tauri-plugin-sql = { version = "2", features = ["sqlite"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"

Tauri 命令（Rust -> JS）

// packages/desktop/src-tauri/src/lib.rs
use tauri::Manager;

#[tauri::command]
async fn spawn_opencode(prompt: String) -> Result<String, String> {
    use std::process::Command;
    
    let output = Command::new("opencode")
        .args(["-p", &prompt, "-f", "json", "-q"])
        .output()
        .map_err(|e| e.to_string())?;
    
    String::from_utf8(output.stdout)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn get_opencode_db_path() -> String {
    // Return path to .opencode/opencode.db
    dirs::home_dir()
        .map(|p| p.join(".opencode/opencode.db").to_string_lossy().to_string())
        .unwrap_or_default()
}

从 SolidJS 调用命令

import { invoke } from "@tauri-apps/api/core";

async function runTask(prompt: string) {
  const result = await invoke<string>("spawn_opencode", { prompt });
  return JSON.parse(result);
}

常见注意事项

  • Tauri 2.x 使用 @tauri-apps/api/core，而不是 @tauri-apps/api/tauri。
  • 移动端构建需要 Xcode（iOS）或 Android Studio（Android）。
  • 访问文件需要 tauri-plugin-fs 和 capability 配置。
  • 访问 SQLite 需要 tauri-plugin-sql。

首次设置（尚未配置时）

安装 Tauri CLI
pnpm add -D @tauri-apps/cli
在现有项目中初始化 Tauri
pnpm tauri init
添加移动端目标
pnpm tauri ios init
pnpm tauri android init

参考资料

评论

支持 Markdown