electron-skills
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseElectron Skills for LlamaFarm Desktop
适用于LlamaFarm Desktop的Electron技能指南
Electron 28 + Electron Vite patterns for the LlamaFarm Desktop application.
为LlamaFarm Desktop应用提供Electron 28 + Electron Vite相关模式。
Overview
概述
This skill extends typescript-skills with Electron-specific patterns for main/renderer process architecture, IPC communication, security, and performance.
本技能在typescript-skills基础上扩展了Electron特有的模式，涵盖主进程/渲染进程架构、IPC通信、安全和性能相关内容。
Tech Stack
技术栈
| Component | Technology | Purpose |
|---|---|---|
| Framework | Electron 28 | Desktop application framework |
| Build | electron-vite 2 | Vite-based build for main/preload/renderer |
| Updates | electron-updater | Auto-update via GitHub releases |
| Packaging | electron-builder | Cross-platform packaging (macOS/Win/Linux) |
| 组件 | 技术 | 用途 |
|---|---|---|
| 框架 | Electron 28 | 桌面应用框架 |
| 构建工具 | electron-vite 2 | 基于Vite的主进程/预加载脚本/渲染进程构建工具 |
| 更新工具 | electron-updater | 通过GitHub发布版本实现自动更新 |
| 打包工具 | electron-builder | 跨平台打包（macOS/Win/Linux） |
Architecture
架构
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 screenelectron-app/
src/
main/ # 主进程（Node.js上下文）
index.ts # 应用入口、生命周期、IPC处理器
backend/ # CLI安装器、模型下载器
window-manager.ts
menu-manager.ts
logger.ts
preload/ # 预加载脚本（桥接上下文）
index.ts # contextBridge API暴露
renderer/ # 渲染进程（浏览器上下文）
index.html # 主窗口
splash.html # 启动屏Core Principles
核心原则
- Process isolation - Main, preload, and renderer are separate contexts
- Context isolation - Always use
contextBridge.exposeInMainWorld - No Node in renderer - always
nodeIntegration: false - Type-safe IPC - Define channel types and payload schemas
- Secure by default - Minimize exposed APIs in preload
- 进程隔离 - 主进程、预加载脚本和渲染进程为独立上下文
- 上下文隔离 - 始终使用
contextBridge.exposeInMainWorld - 渲染进程禁用Node - 始终设置
nodeIntegration: false - 类型安全的IPC - 定义通道类型和负载模式
- 默认安全配置 - 最小化预加载脚本中暴露的API
Related Documents
相关文档
- electron.md - IPC patterns, main/renderer communication
- security.md - Context isolation, preload security, CSP
- performance.md - Window management, memory, startup
- electron.md - IPC模式、主进程/渲染进程通信
- security.md - 上下文隔离、预加载脚本安全、CSP
- performance.md - 窗口管理、内存、启动优化
Shared TypeScript Patterns
共享TypeScript模式
This skill inherits from typescript-skills:
- patterns.md - Idiomatic TypeScript
- typing.md - Strict typing, generics
- security.md - Input validation, XSS prevention
本技能继承自typescript-skills：
- patterns.md - 惯用TypeScript模式
- typing.md - 严格类型、泛型
- security.md - 输入验证、XSS防护
Quick Reference
快速参考
IPC Handler Pattern (Main Process)
IPC处理器模式（主进程）
typescript
ipcMain.handle('cli:info', async () => {
const isInstalled = await this.cliInstaller.isInstalled()
return {
isInstalled,
path: isInstalled ? this.cliInstaller.getCLIPath() : null
}
})typescript
ipcMain.handle('cli:info', async () => {
const isInstalled = await this.cliInstaller.isInstalled()
return {
isInstalled,
path: isInstalled ? this.cliInstaller.getCLIPath() : null
}
})Preload Bridge Pattern
预加载桥接模式
typescript
const api = {
cli: {
getInfo: () => ipcRenderer.invoke('cli:info')
},
platform: process.platform,
version: process.versions.electron
}
contextBridge.exposeInMainWorld('llamafarm', api)typescript
const api = {
cli: {
getInfo: () => ipcRenderer.invoke('cli:info')
},
platform: process.platform,
version: process.versions.electron
}
contextBridge.exposeInMainWorld('llamafarm', api)BrowserWindow Configuration
BrowserWindow配置
typescript
new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, '../preload/index.js'),
nodeIntegration: false,
contextIsolation: true
}
})typescript
new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, '../preload/index.js'),
nodeIntegration: false,
contextIsolation: true
}
})Checklist Summary
检查清单摘要
| Category | Critical | High | Medium | Low |
|---|---|---|---|---|
| IPC | 2 | 3 | 2 | 1 |
| Security | 4 | 3 | 2 | 1 |
| Performance | 1 | 3 | 3 | 2 |
| 类别 | 关键 | 高 | 中 | 低 |
|---|---|---|---|---|
| IPC | 2 | 3 | 2 | 1 |
| 安全 | 4 | 3 | 2 | 1 |
| 性能 | 1 | 3 | 3 | 2 |