electron-skills

LlamaFarm 桌面应用的 Electron 技能

适用于 LlamaFarm 桌面应用的 Electron 28 + Electron Vite 模式。

概述

此技能扩展了 typescript-skills，涵盖主进程/渲染进程架构、IPC 通信、安全性和性能方面的 Electron 专属模式。

技术栈

组件	技术	用途
框架	Electron 28	桌面应用框架
构建	electron-vite 2	基于 Vite 的主进程/预加载/渲染进程构建
更新	electron-updater	通过 GitHub releases 自动更新
打包	electron-builder	跨平台打包（macOS/Win/Linux）

架构

electron-app/
  src/
    main/           # Main process (Node.js context)
      index.ts      # App entry, lifecycle, IPC handlers
      backend/      # CLI installer, model downloader
      window-manager.ts
      menu-manager.ts
      logger.ts
    preload/        # Preload scripts (bridge context)
      index.ts      # contextBridge API exposure
    renderer/       # Renderer process (browser context)
      index.html    # Main window
      splash.html   # Splash screen

核心原则

1. 进程隔离 - 主进程、预加载脚本和渲染进程使用独立上下文
2. 上下文隔离 - 始终使用 contextBridge.exposeInMainWorld
3. 渲染进程中不使用 Node - 始终设置 nodeIntegration: false
4. 类型安全的 IPC - 定义通道类型和负载架构
5. 默认安全 - 尽量减少预加载脚本中暴露的 API

相关文档

• electron.md - IPC 模式、主进程/渲染进程通信
• security.md - 上下文隔离、预加载脚本安全、CSP
• performance.md - 窗口管理、内存、启动

共享的 TypeScript 模式

此技能继承自 typescript-skills：

• patterns.md - 符合惯用法的 TypeScript
• typing.md - 严格类型、泛型
• security.md - 输入验证、防止 XSS

快速参考

IPC 处理器模式（主进程）

ipcMain.handle('cli:info', async () => {
  const isInstalled = await this.cliInstaller.isInstalled()
  return {
    isInstalled,
    path: isInstalled ? this.cliInstaller.getCLIPath() : null
  }
})

预加载桥接模式

const api = {
  cli: {
    getInfo: () => ipcRenderer.invoke('cli:info')
  },
  platform: process.platform,
  version: process.versions.electron
}

contextBridge.exposeInMainWorld('llamafarm', api)

BrowserWindow 配置

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, '../preload/index.js'),
    nodeIntegration: false,
    contextIsolation: true
  }
})

检查清单摘要

类别	严重	高	中	低
IPC	2	3	2	1
安全性	4	3	2	1
性能	1	3	3	2