electron
┌─────────────────────────────────────────────────┐
│ 操作系统（Windows/Mac/Linux） │
├───────────┬─────────────────────────────────────┤
│ Electron 底层核心 │
│ ├─ Chromium（提供渲染引擎/多窗口/浏览器内核） │
│ └─ Node.js（提供文件/网络/系统API/模块化） │
├───────────┼─────────────────────────────────────┤
│ Electron 核心层（双进程+核心模块） │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ 主进程(Main) │◄───IPC──►│渲染进程(Render)│ │
│ │ （1个） │ │（N个，多窗口）│ │
│ └───────────────┘ └───────────────┘ │
├───────────┼─────────────────────────────────────┤
│ 应用层：业务代码（Vue/React/TS + Electron API）│
└─────────────────────────────────────────────────┘┌─────────────────────────────────────────────────────────────────┐
│ 宿主系统：Windows/macOS/Linux（原生系统API） │
├───────────────────┬─────────────────────────────────────────────┤
│ Electron 底层依赖 │ │
│ ├─ Chromium │ 提供：渲染引擎(Blink)、V8引擎、多窗口、CSS/HTML解析 │
│ ├─ Node.js │ 提供：fs/https/path等模块、CommonJS/ESModule、NPM │
│ └─ Native APIs │ 提供：桌面端原生能力（窗口/菜单/托盘/剪贴板）│
├───────────────────┼─────────────────────────────────────────────┤
│ Electron 核心进程 │ │
│ 主进程(Main Process)【唯一】 │
│ ├─ 核心能力：窗口管理(BrowserWindow)、应用生命周期、原生API调用 │
│ ├─ 核心模块：app/BrowserWindow/Tray/Menu/dialog/ipcMain │
│ └─ 权限：最高（可访问系统所有资源） │
│ │
│ 渲染进程(Renderer Process)【多实例】 │
│ ├─ 核心能力：页面渲染、前端交互（Vue/React）、DOM操作 │
│ ├─ 核心模块：ipcRenderer/webFrame/remote(慎用)、前端所有API │
│ └─ 权限：沙箱隔离（默认无Node.js/原生权限，需主进程桥接） │
├───────────────────┼─────────────────────────────────────────────┤
│ 进程通信方式（IPC） │
│ ├─ ipcMain + ipcRenderer（主-渲 双向通信，最核心） │
│ ├─ BrowserWindow.webContents.send（主→渲 单向通信） │
│ ├─ webview/postMessage（渲染进程间通信） │
│ ├─ IPC 主线程（shared-worker 方式） │
│ └─ 第三方：localStorage/文件/数据库（跨进程共享，兜底方案） │
├───────────────────┼─────────────────────────────────────────────┤
│ 应用层：业务开发 │
│ ├─ 前端框架：Vue3/React18 + TS（主流技术栈） │
│ ├─ 工程化：Vite/Webpack（打包前端代码） │
│ └─ 业务模块：窗口/菜单/托盘/文件操作/网络请求/打印/更新 │
├───────────────────┼─────────────────────────────────────────────┤
│ 打包发布层 │
│ ├─ 打包工具：electron-builder（主流）/electron-packager │
│ ├─ 跨平台打包：Windows(.exe)、Mac(.dmg/.app)、Linux(.deb/AppImage)│
│ └─ 优化：包体积压缩、asar打包、依赖裁剪 │
└─────────────────────────────────────────────────────────────────┘核心能力
核心基础能力 |功能模块|核心api|应用场景| |---|---|---| |应用生命周期管理|app模块|启动、退出、窗口全部关闭、开机自动、重启应用| |窗口管理|BrowserWindow|create、resize、stylechange| |跨进程通信|ipcMain/ipcRenderer|主进程给渲染进程传递数据、渲染进程调用主进程原生api| |菜单/快捷键|Menu/globalShortcut|顶部菜单栏/右键菜单栏/全局快捷键|
桌面端原生功能 |功能模块| |核心 API / 方案| 应用场景| |---|---|---| |系统托盘| Tray| 桌面右下角（Windows）/ 顶部状态栏（Mac）图标 + 右键菜单| |对话框| dialog| 打开文件 / 保存文件 / 消息提示 / 确认框（替代浏览器 alert/confirm）| |文件操作| fs（Node.js）+ dialog| 本地文件读写 / 文件夹选择 / 大文件分片处理| |剪贴板| clipboard| 复制 / 粘贴文本 / 图片 / 文件路径| |通知| Notification| 系统级消息通知（桌面右下角弹窗，跨平台）| |网络请求| net/https（Node.js）+ axios/fetch| 避开浏览器跨域，直接发起后端请求|
进阶功能 |功能模块|核心方案|应用场景| |---|---|---| |自动更新|electron-updater|应用发布后自动检测更新/下载/安装| |print|webContents.print/printToPDF|页面导出、打印| |热更新|Vite/HMR + electron-reloader| 刷新 | |多窗口通讯|webContents.send + ipcRender| 多窗口数据同步| |原生模块调用|node-gyp/ffi-napi|调用c/c++原生模块/系统DLL/ framework | |沙箱模式配置|BrowserWindow sandbox|提升应用安全性、限制渲染进程权限|