简介

AI桌面应用开发利用Electron框架，通过AI生成主进程、渲染进程和IPC通信代码，快速构建跨平台桌面应用。

AI生成Electron主进程

// AI生成的Electron主进程
const { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage } = require("electron");
const path = require("path");

let mainWindow;
let tray;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false
    },
    titleBarStyle: "hiddenInset",
    show: false
  });

  mainWindow.loadFile(path.join(__dirname, "renderer", "index.html"));
  mainWindow.once("ready-to-show", () => mainWindow.show());
  mainWindow.on("close", (e) => {
    if (!app.isQuitting) {
      e.preventDefault();
      mainWindow.hide();
    }
  });
}

// 系统托盘
function createTray() {
  const icon = nativeImage.createFromPath(path.join(__dirname, "assets", "tray.png"));
  tray = new Tray(icon.resize({ width: 16, height: 16 }));
  const contextMenu = Menu.buildFromTemplate([
    { label: "显示窗口", click: () => mainWindow.show() },
    { label: "退出", click: () => { app.isQuitting = true; app.quit(); } }
  ]);
  tray.setContextMenu(contextMenu);
  tray.on("click", () => mainWindow.show());
}

// IPC通信
ipcMain.handle("get-system-info", async () => ({
  platform: process.platform,
  version: app.getVersion(),
  cpuUsage: process.getCPUUsage().percentCPUUsage,
  memoryUsage: process.getSystemMemoryInfo()
}));

ipcMain.handle("open-file-dialog", async () => {
  const { dialog } = require("electron");
  const result = await dialog.showOpenDialog(mainWindow, {
    properties: ["openFile"],
    filters: [{ name: "All Files", extensions: ["*"] }]
  });
  return result.canceled ? null : result.filePaths[0];
});

app.whenReady().then(() => {
  createWindow();
  createTray();
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

AI生成Preload脚本

// AI生成的preload.js（安全桥梁）
const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  getSystemInfo: () => ipcRenderer.invoke("get-system-info"),
  openFileDialog: () => ipcRenderer.invoke("open-file-dialog"),
  onMenuAction: (callback) => ipcRenderer.on("menu-action", callback)
});

AI生成渲染进程界面

<!-- AI生成的渲染进程HTML -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; font-family: -apple-system, sans-serif; }
    .toolbar { -webkit-app-region: drag; height: 40px; background: #f0f0f0; }
    .content { padding: 20px; }
    .info-card { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px;
                 box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <div class="toolbar"></div>
  <div class="content">
    <div class="info-card">
      <h2>系统信息</h2>
      <div id="sys-info">加载中...</div>
    </div>
    <button onclick="openFile()">打开文件</button>
    <p id="file-path"></p>
  </div>
  <script>
    async function loadSysInfo() {
      const info = await window.electronAPI.getSystemInfo();
      document.getElementById("sys-info").innerHTML = 
        "<p>平台: " + info.platform + "</p>" +
        "<p>版本: " + info.version + "</p>";
    }
    async function openFile() {
      const path = await window.electronAPI.openFileDialog();
      if (path) document.getElementById("file-path").textContent = path;
    }
    loadSysInfo();
  </script>
</body>
</html>

小结

AI Electron开发的核心是生成主进程/渲染进程/preload三层代码。重点审查IPC通信的安全性（contextIsolation、no nodeIntegration）和跨平台兼容性（macOS titleBar、Windows托盘行为）。

桌面AI编程-学习路线