原生能力概览

┌─────────────────────────────────────────────────────────┐
│                   Electron 原生能力                      │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐ │
│  │   GUI 组件   │  │  系统集成    │  │  底层 API    │ │
│  ├──────────────┤  ├──────────────┤  ├──────────────┤ │
│  │ BrowserWindow│  │ Clipboard    │  │ GlobalShortcut│ │
│  │ Tray         │  │ Screen       │  │ PowerMonitor │ │
│  │ Menu         │  │ DesktopCaptur│  │ Process      │ │
│  │ Dialog       │  │ Notification │  │ Shell        │ │
│  └──────────────┘  └──────────────┘  └──────────────┘ │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                    Node.js 运行时                        │
│  • 文件系统 (fs)    • 子进程 (child_process)            │
│  • 网络 (net/http)  • 加密 (crypto)                     │
└─────────────────────────────────────────────────────────┘

// main.js
const { BrowserWindow } = require("electron")
const path = require("path")
 
const win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 开启 Node.js 集成
    nodeIntegration: true,
    // 关闭上下文隔离
    contextIsolation: false,
    // 预加载脚本
    preload: path.join(__dirname, "preload.js")
  }
})
 
win.loadFile("index.html")

// main.js
const { Tray, Menu, app, nativeImage } = require("electron")
const path = require("path")
 
let tray = null
 
app.whenReady().then(() => {
  // 创建托盘图标
  const icon = nativeImage.createFromPath(
    path.join(__dirname, "icon.png")
  ).resize({ width: 16, height: 16 })
  
  tray = new Tray(icon)
  
  // 创建托盘菜单
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "显示窗口",
      type: "normal",
      click: () => {
        mainWindow.show()
      }
    },
    { type: "separator" },
    { label: "退出", type: "normal", role: "quit" }
  ])
  
  tray.setToolTip("我的应用")
  tray.setContextMenu(contextMenu)
})

// main.js 或 renderer.js
const { Notification } = require("electron")
 
function showNotification(title, body) {
  const notify = new Notification({
    title: title,
    body: body,
    icon: path.join(__dirname, "icon.png"),
    silent: false // 是否静音
  })
 
  notify.show()
 
  notify.on("click", () => {
    console.log("通知被点击")
    // 显示主窗口
    mainWindow.show()
  })
  
  notify.on("close", () => {
    console.log("通知被关闭")
  })
}
 
showNotification("新消息", "您有一条新的未读消息。")

// main.js
const { Menu, app } = require("electron")
 
function createMenu() {
  const template = [
    {
      label: "文件",
      submenu: [
        {
          label: "新建",
          accelerator: "CmdOrCtrl+N",
          click: () => {
            // 新建文件逻辑
          }
        },
        { type: "separator" },
        app.isPackaged
          ? { role: "quit", label: "退出" }
          : { role: "close", label: "关闭" }
      ]
    },
    {
      label: "编辑",
      submenu: [
        { role: "undo", label: "撤销" },
        { role: "redo", label: "重做" },
        { type: "separator" },
        { role: "cut", label: "剪切" },
        { role: "copy", label: "复制" },
        { role: "paste", label: "粘贴" },
        { role: "selectAll", label: "全选" }
      ]
    },
    {
      label: "视图",
      submenu: [
        { role: "reload", label: "重新加载" },
        { role: "forceReload", label: "强制重新加载" },
        { type: "separator" },
        { role: "resetZoom", label: "实际大小" },
        { role: "zoomIn", label: "放大" },
        { role: "zoomOut", label: "缩小" },
        { type: "separator" },
        { role: "togglefullscreen", label: "全屏" }
      ]
    },
    {
      label: "帮助",
      submenu: [
        {
          label: "关于",
          click: () => {
            // 显示关于对话框
          }
        }
      ]
    }
  ]
 
  // macOS 特殊处理：添加应用菜单
  if (process.platform === 'darwin') {
    template.unshift({
      label: app.getName(),
      submenu: [
        { role: 'about' },
        { type: 'separator' },
        { role: 'services', submenu: [] },
        { type: 'separator' },
        { role: 'hide' },
        { role: 'hideOthers' },
        { role: 'unhide' },
        { type: 'separator' },
        { role: 'quit' }
      ]
    })
  }
 
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

// main.js
const { dialog } = require("electron")
 
// 显示打开文件对话框
async function showOpenDialog() {
  const result = await dialog.showOpenDialog({
    title: "选择文件",
    defaultPath: app.getPath("documents"),
    filters: [
      { name: "文本文件", extensions: ["txt", "md"] },
      { name: "图片", extensions: ["jpg", "png", "gif"] },
      { name: "所有文件", extensions: ["*"] }
    ],
    properties: ["openFile", "multiSelections"]
  })
 
  if (!result.canceled) {
    console.log("选择的文件:", result.filePaths)
    return result.filePaths
  }
  return null
}
 
// 显示保存文件对话框
async function showSaveDialog() {
  const result = await dialog.showSaveDialog({
    title: "保存文件",
    defaultPath: "my-file.txt",
    filters: [
      { name: "Text Files", extensions: ["txt"] },
      { name: "All Files", extensions: ["*"] }
    ]
  })
 
  if (!result.canceled && result.filePath) {
    console.log("保存路径:", result.filePath)
    return result.filePath
  }
  return null
}
 
// 显示消息对话框
async function showMessageDialog() {
  const result = await dialog.showMessageBox({
    type: "question",
    buttons: ["取消", "确定"],
    defaultId: 1,
    title: "确认",
    message: "确定要删除这个文件吗？",
    detail: "此操作不可撤销"
  })
  
  console.log("用户选择:", result.response) // 0: 取消, 1: 确定
}
 
// 显示错误对话框
dialog.showErrorBox("错误", "发生了一个错误")

// main.js 或 renderer.js
const { clipboard, nativeImage } = require("electron")
 
// 读写文本
clipboard.writeText("这是要复制的文本")
console.log(clipboard.readText())
 
// 读写图片
const image = nativeImage.createFromPath("/path/to/image.png")
clipboard.writeImage(image)
const copiedImage = clipboard.readImage()
 
// 写入多种格式
clipboard.write({
  text: "Hello World",
  html: "<b>Hello World</b>",
  image: nativeImage.createFromPath("/path/to/image.png")
})
 
// 清空剪贴板
clipboard.clear()

// main.js
const { app, globalShortcut } = require("electron")
 
app.whenReady().then(() => {
  // 注册快捷键
  const ret = globalShortcut.register("CommandOrControl+Shift+X", () => {
    console.log("全局快捷键被触发")
    // 执行相应操作
  })
 
  if (!ret) {
    console.log("快捷键注册失败")
  }
 
  // 检查快捷键是否已注册
  console.log(
    "快捷键已注册:",
    globalShortcut.isRegistered("CommandOrControl+Shift+X")
  )
})
 
app.on("will-quit", () => {
  // 注销所有快捷键
  globalShortcut.unregisterAll()
})

// main.js
const { screen } = require("electron")
 
// 获取主显示器信息
const primaryDisplay = screen.getPrimaryDisplay()
const { width, height } = primaryDisplay.workAreaSize
console.log(`屏幕可用尺寸: ${width}x${height}`)
 
// 获取所有显示器信息
const allDisplays = screen.getAllDisplays()
console.log(`检测到 ${allDisplays.length} 个显示器`)
 
allDisplays.forEach((display, index) => {
  console.log(`显示器 ${index + 1}:`)
  console.log(`  分辨率: ${display.bounds.width}x${display.bounds.height}`)
  console.log(`  位置: (${display.bounds.x}, ${display.bounds.y})`)
  console.log(`  缩放因子: ${display.scaleFactor}`)
})
 
// 获取鼠标当前位置
const point = screen.getCursorScreenPoint()
console.log(`鼠标位置: (${point.x}, ${point.y})`)
 
// 监听显示器变化
screen.on("display-added", (event, newDisplay) => {
  console.log("新增显示器:", newDisplay.id)
})
 
screen.on("display-removed", (event, oldDisplay) => {
  console.log("移除显示器:", oldDisplay.id)
})
 
screen.on("display-metrics-changed", (event, display, changedMetrics) => {
  console.log("显示器属性变化:", changedMetrics)
})

// renderer.js
const { desktopCapturer } = require("electron")
 
desktopCapturer.getSources({ types: ["window", "screen"] }).then(async (sources) => {
  for (const source of sources) {
    console.log("源名称:", source.name)
    console.log("源 ID:", source.id)
    
    // 选择要捕捉的窗口或屏幕
    if (source.name === "Entire screen" || source.name === "整个屏幕") {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: "desktop",
              chromeMediaSourceId: source.id,
              minWidth: 1280,
              maxWidth: 1920,
              minHeight: 720,
              maxHeight: 1080
            }
          }
        })
        
        // 将视频流附加到 <video> 元素
        const videoElement = document.querySelector("video")
        videoElement.srcObject = stream
        videoElement.onloadedmetadata = () => videoElement.play()
      } catch (e) {
        console.error("getUserMedia error:", e)
      }
      return
    }
  }
})

const isMac = process.platform === 'darwin'
const isWindows = process.platform === 'win32'
const isLinux = process.platform === 'linux'
 
// 根据平台执行不同逻辑
if (isMac) {
  // macOS 特定代码
} else if (isWindows) {
  // Windows 特定代码
} else {
  // Linux 特定代码
}

// 延迟加载窗口内容
function createWindow() {
  const win = new BrowserWindow({
    show: false,  // 先不显示
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  // 页面加载完成后再显示
  win.once('ready-to-show', () => {
    win.show()
  })
  
  win.loadFile('index.html')
}
 
// 及时销毁不再使用的窗口
win.on('closed', () => {
  win = null
})

// 避免重复注册事件监听器
// 错误示例
function handleClick() {
  button.on('click', () => {})  // 每次调用都会注册新的监听器
}
 
// 正确示例
function setupListeners() {
  button.on('click', handleClick)
}

// 批量发送消息，减少通信次数
ipcRenderer.send('batch-update', { data1, data2, data3 })
 
// 使用 invoke 替代 send/on 模式
const result = await ipcRenderer.invoke('get-data')

// 安全的 BrowserWindow 配置
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,           // ❌ 不要启用
    contextIsolation: true,            // ✅ 必须启用
    enableRemoteModule: false,         // ❌ 不要启用
    sandbox: true,                     // ✅ 建议启用
    webSecurity: true,                 // ✅ 必须启用
    allowRunningInsecureContent: false // ❌ 不要启用
  }
})

// 主进程：验证消息来源
ipcMain.handle('sensitive-operation', (event, data) => {
  // 验证发送者
  const webContents = event.sender
  const mainWindow = BrowserWindow.getAllWindows()[0]
  
  if (webContents !== mainWindow.webContents) {
    throw new Error('未授权的请求')
  }
  
  // 验证数据格式
  if (typeof data !== 'object' || data === null) {
    throw new Error('无效的数据格式')
  }
  
  // 执行操作
  return doSensitiveOperation(data)
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
 
contextBridge.exposeInMainWorld('electronAPI', {
  // 只暴露必要的 API
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  readFile: (path) => ipcRenderer.invoke('file:read', path),
  writeFile: (path, content) => ipcRenderer.invoke('file:write', path, content)
})

const { app, BrowserWindow } = require('electron')
 
let mainWindow
 
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  mainWindow.loadFile('index.html')
  
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}
 
// 应用准备就绪
app.whenReady().then(() => {
  createWindow()
  
  // macOS: 点击 Dock 图标时重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
 
// 所有窗口关闭时退出应用（Windows & Linux）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

const gotTheLock = app.requestSingleInstanceLock()
 
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    // 当运行第二个实例时，聚焦到已有窗口
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore()
      mainWindow.focus()
    }
  })
  
  app.whenReady().then(() => {
    createWindow()
  })
}

// 全局错误处理
process.on('uncaughtException', (error) => {
  console.error('未捕获的异常:', error)
  // 可以选择退出应用或继续运行
})
 
process.on('unhandledRejection', (reason, promise) => {
  console.error('未处理的 Promise 拒绝:', reason)
})
 
// 窗口错误处理
mainWindow.webContents.on('crashed', (event, killed) => {
  console.log('渲染进程崩溃:', killed ? '被杀死' : '意外崩溃')
  // 重启窗口或显示错误信息
})
 
mainWindow.webContents.on('render-process-gone', (event, details) => {
  console.log('渲染进程退出:', details)
})

let mainWindow
 
mainWindow.on('close', (event) => {
  if (!app.isQuitting) {
    event.preventDefault()
    mainWindow.hide()
  }
})
 
app.on('before-quit', () => {
  app.isQuitting = true
})

const win = new BrowserWindow({
  frame: false,  // 无边框窗口
  titleBarStyle: 'hidden',  // macOS: 隐藏标题栏但保留控制按钮
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

const { app } = require('electron')
const path = require('path')
 
// 设置开机自启动
app.setLoginItemSettings({
  openAtLogin: true,
  path: app.getPath('exe'),
  args: ['--start-minimized']
})
 
// 取消开机自启动
app.setLoginItemSettings({
  openAtLogin: false
})

const { app } = require('electron')
 
// 获取应用版本
const version = app.getVersion()
 
// 获取 Electron 版本
const electronVersion = process.versions.electron
 
// 获取 Node.js 版本
const nodeVersion = process.versions.node
 
// 获取 Chrome 版本
const chromeVersion = process.versions.chrome

// macOS: 在 Info.plist 中配置
// Windows: 在注册表中配置
 
// 在应用中处理文件打开
app.on('open-file', (event, path) => {
  event.preventDefault()
  openFile(path)
})
 
app.on('open-url', (event, url) => {
  event.preventDefault()
  handleUrl(url)
})

const { nativeTheme } = require('electron')
 
// 检测当前主题
console.log('当前主题:', nativeTheme.shouldUseDarkColors ? '深色' : '浅色')
 
// 监听主题变化
nativeTheme.on('updated', () => {
  console.log('主题已切换')
  mainWindow.webContents.send('theme-changed', nativeTheme.shouldUseDarkColors)
})
 
// 设置主题源
nativeTheme.themeSource = 'system'  // 'system', 'light', 'dark'