窗口、桌面 API 与笔记应用

mkdir my-app && cd my-app
npm init                      # entry point 填 main.js
npm install --save-dev electron

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^44.5.1"
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- CSP(Content-Security-Policy,内容安全策略)限制页面只能加载自身资源 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>第二课示例</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <script src="./renderer.js"></script>
  </body>
</html>

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({ width: 800, height: 600 }) // 尺寸默认值就是 800×600
  win.loadFile('index.html')
  win.on('closed', () => console.log('[win] closed'))
}

// before-quit 在窗口开始被关闭之前发出,这里可以拦截退出
app.on('before-quit', (e) => console.log('[app] before-quit'))

app.whenReady().then(() => {
  console.log('[app] ready')
  createWindow()

  // macOS:点 Dock 图标时若无窗口则重建(activate 必须在 ready 之后订阅)
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Windows/Linux 惯例:窗口全关即退出;macOS 惯例:应用继续驻留
app.on('window-all-closed', () => {
  console.log('[app] window-all-closed')
  if (process.platform !== 'darwin') app.quit()
})

app.on('will-quit', () => console.log('[app] will-quit'))
app.on('quit', (_e, code) => console.log('[app] quit, exitCode =', code))

const { app, BrowserWindow } = require('electron')

const gotTheLock = app.requestSingleInstanceLock() // 尽早调用,返回是否拿到主实例身份

if (!gotTheLock) {
  app.quit()          // 第二实例:参数已转交,直接退出
} else {
  // 第一实例:收到第二实例的启动参数时,聚焦并还原自己的主窗口
  app.on('second-instance', (_event, argv, workingDirectory) => {
    console.log('第二实例参数:', argv, '工作目录:', workingDirectory)
    const win = BrowserWindow.getAllWindows()[0]
    if (win) {
      if (win.isMinimized()) win.restore()
      win.focus()
    }
  })

  app.whenReady().then(() => { /* createWindow() ... */ })
}

const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => win.show()) // 首帧渲染完成,现在再亮出窗口

const path = require('node:path')

const win = new BrowserWindow({
  width: 900,
  height: 650,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js') // __dirname 是当前文件所在目录的绝对路径
    // 其余项一律不写,吃默认:contextIsolation:true、sandbox:true、nodeIntegration:false
  }
})

const { app, BrowserWindow, dialog, ipcMain } = require('electron')
const path = require('node:path')

// 主进程处理器:调用原生对话框,把结果返回给 invoke 调用方
async function handleFileOpen() {
  const { canceled, filePaths } = await dialog.showOpenDialog({}) // canceled 为 true 表示用户取消
  if (!canceled) {
    return filePaths[0] // 返回值会自动变成渲染进程 invoke 的 Promise 结果
  }
}

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 注入 preload 脚本
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  // ready 之后注册一次即可:ipcMain 是全局单例,所有窗口共享
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
})

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

const { contextBridge, ipcRenderer } = require('electron')

// contextBridge 只允许暴露白名单函数;切勿把整个 ipcRenderer 透传给页面
// (自 Electron 29 起,ipcRenderer 本体经 contextBridge 传输只会得到空对象)
contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Dialog</title>
  </head>
  <body>
    <button type="button" id="btn">打开一个文件</button>
    File path: <strong id="filePath"></strong>
    <script src='./renderer.js'></script>
  </body>
</html>

const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile() // 像调普通 async 函数一样调主进程
  filePathElement.innerText = filePath
})

const { app, BrowserWindow, Menu } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  const template = [
    // macOS 第一个菜单必须是应用菜单,role: 'appMenu' 自动生成 About/Quit 等
    ...(process.platform === 'darwin' ? [{ role: 'appMenu' }] : []),
    {
      label: '文件',
      submenu: [
        {
          label: '新建窗口',
          accelerator: 'CmdOrCtrl+N',            // accelerator 即快捷键写法
          click: () => createWindow()            // 设了 role 的项会忽略 click
        },
        { type: 'separator' },                   // 分隔线
        { role: 'quit', label: '退出' }          // role 自带 Cmd/Ctrl+Q
      ]
    },
    { role: 'editMenu', label: '编辑' },         // 撤销/复制/粘贴整套,免费
    {
      label: '视图',
      submenu: [
        { role: 'reload', label: '重新加载' },
        { role: 'toggleDevTools', label: '开发者工具' }, // DevTools
        { type: 'separator' },
        { role: 'zoomIn' }, { role: 'zoomOut' }, { role: 'resetZoom' },
        { role: 'togglefullscreen' }
      ]
    }
  ]
  // macOS 设为应用菜单;Windows/Linux 设为窗口顶部菜单
  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
  createWindow()
})

const { app, BrowserWindow, Tray, Menu } = require('electron')
const { nativeImage } = require('electron/common')

let tray = null   // 全局引用,防止被 GC(垃圾回收)后托盘图标消失
let win = null

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  // 官方教程的 16x16 红色圆点图标(内联 data URL,无需图片文件)
  const icon = nativeImage.createFromDataURL(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII='
  )

  tray = new Tray(icon)
  tray.setToolTip('我的托盘应用')                    // 悬停提示文字
  tray.setContextMenu(Menu.buildFromTemplate([{ role: 'quit', label: '退出' }]))
  tray.on('click', () => {
    // 窗口可能已被用户关闭销毁,先守卫再访问,否则会抛 "Object has been destroyed"
    if (!win || win.isDestroyed()) { createWindow(); return }
    win.isVisible() ? win.hide() : win.show()        // 左键单击:显示/隐藏窗口
  })

  createWindow()
})

// 留空监听以阻止退出:窗口全关后应用(和托盘)继续存活——官方托盘教程的做法
app.on('window-all-closed', () => {})

const { app, BrowserWindow, Menu, dialog } = require('electron')

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  Menu.setApplicationMenu(Menu.buildFromTemplate([
    {
      label: '对话框演示',
      submenu: [
        {
          label: '选择文件(可多选)',
          click: async () => {
            const { canceled, filePaths } = await dialog.showOpenDialog(win, {
              title: '挑一个文件',
              filters: [                                   // 文件类型过滤,扩展名不带点
                { name: '文本', extensions: ['txt', 'md'] },
                { name: '所有文件', extensions: ['*'] }
              ],
              properties: ['openFile', 'multiSelections']  // openFile/multiSelections/openDirectory
            })
            if (!canceled) console.log('选中:', filePaths)
          }
        },
        {
          label: '保存文件',
          click: async () => {
            const { canceled, filePath } = await dialog.showSaveDialog(win, {
              defaultPath: '未命名.txt',                   // 预填文件名
              filters: [{ name: '文本', extensions: ['txt'] }]
            })
            if (!canceled && filePath) console.log('将保存到:', filePath)
          }
        },
        {
          label: '消息框',
          click: async () => {
            const { response } = await dialog.showMessageBox(win, {
              type: 'question',                            // none/info/error/question/warning
              buttons: ['保存', '放弃', '取消'],
              defaultId: 0,                                // 默认高亮第 0 个按钮
              message: '要保存修改吗?',
              detail: '不保存的修改将丢失。'
            })
            console.log('用户点了第', response, '个按钮')
          }
        }
      ]
    }
  ]))
})

const { app, BrowserWindow, clipboard, ClipboardItem, nativeImage } = require('electron')

app.whenReady().then(async () => {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  await clipboard.writeText('你好,剪贴板')       // 注意:44 起全部是异步 API,要 await
  const text = await clipboard.readText()
  console.log('读回:', text)                     // 你好,剪贴板

  // 旧 writeImage(image) 的等价写法:ClipboardItem + image/png + Blob(这里复用官方教程的 16x16 图标)
  const img = nativeImage.createFromDataURL(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII='
  )
  await clipboard.write([new ClipboardItem({ 'image/png': new Blob([img.toPNG()]) })])

  console.log('剪贴板里有文本吗?', await clipboard.has('text/plain')) // has 也返回 Promise
})

const { app, BrowserWindow, Notification } = require('electron')

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  if (Notification.isSupported()) {
    const n = new Notification({
      title: '应用已启动',
      body: '点击这条通知返回应用窗口',
      silent: false                                  // 是否静音
    })
    n.on('click', () => {                            // 用户点通知:显示并聚焦主窗口
      win.show()
      win.focus()
    })
    n.show()                                         // 不调用 show() 就不会显示
  }
})

const { app, BrowserWindow, globalShortcut } = require('electron')

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  // CommandOrControl:macOS 映射 Cmd,Windows/Linux 映射 Ctrl
  const ok = globalShortcut.register('CommandOrControl+Alt+K', () => {
    win.isVisible() ? win.focus() : win.show()       // 全局唤起/聚焦窗口
  })
  if (!ok) console.log('注册失败:快捷键可能被其他应用占用')
})

app.on('will-quit', () => globalShortcut.unregisterAll()) // 退出前注销,否则快捷键会残留

const { app, BrowserWindow, shell } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  win.webContents.setWindowOpenHandler(({ url }) => {
    // 只放行 http/https;file:// 等其他协议一律拒绝,防止 openExternal 打开意外协议
    if (url.startsWith('https://') || url.startsWith('http://')) {
      setImmediate(() => shell.openExternal(url))    // 交给默认浏览器
    }
    return { action: 'deny' }                        // 拒绝 Electron 自己开新窗口
  })
})

<a href="https://electronjs.org" target="_blank">Electron 官网(会开系统浏览器)</a>

const { app, BrowserWindow, screen } = require('electron')

function createWindow() {
  // screen 不能在 ready 前使用,所以放进 whenReady 之后调用
  const cursor = screen.getCursorScreenPoint()               // 鼠标当前坐标(DIP)
  const display = screen
    .getAllDisplays()
    .find((d) => {                                           // 找到鼠标所在的显示器
      const { x, y, width, height } = d.bounds
      return cursor.x >= x && cursor.x <= x + width && cursor.y >= y && cursor.y <= y + height
    }) ?? screen.getPrimaryDisplay()

  const { x, y, width, height } = display.workArea           // 工作区:已扣除任务栏/Dock
  const win = new BrowserWindow({
    x: x + Math.floor((width - 800) / 2),                    // 在该屏幕工作区内居中
    y: y + Math.floor((height - 600) / 2),
    width: 800, height: 600
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  // 显示器热插拔监听:display-added / display-removed / display-metrics-changed
  screen.on('display-metrics-changed', () => console.log('显示器参数变化(分辨率/缩放/旋转)'))
})

const { app, BrowserWindow, dialog } = require('electron')
const fs = require('node:fs/promises')        // 用 promise 版 fs,配 async/await
const path = require('node:path')

const settingsPath = () => path.join(app.getPath('userData'), 'settings.json')

async function loadSettings() {
  try {
    return JSON.parse(await fs.readFile(settingsPath(), 'utf8')) // 文件不存在会 throw
  } catch {
    return { theme: 'light', launches: 0 }    // 首次启动给默认值
  }
}

let win
app.whenReady().then(async () => {
  const settings = await loadSettings()
  console.log('历史启动次数:', settings.launches)

  // 写文件演示:立即写回更新后的配置(别把异步写留到 quit 钩子里——进程可能等不到完成)
  await fs.writeFile(settingsPath(), JSON.stringify({ ...settings, launches: settings.launches + 1 }), 'utf8')

  win = new BrowserWindow({ width: 800, height: 600 })
  await win.loadFile('index.html')

  // 保存对话框 + fs 写文件的完整组合
  const { canceled, filePath } = await dialog.showSaveDialog(win, {
    defaultPath: 'note.txt'
  })
  if (!canceled && filePath) {
    await fs.writeFile(filePath, '由主进程 fs 写入的内容\n', 'utf8')
    await dialog.showMessageBox(win, { message: '已保存到 ' + filePath })
  }
})

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

const windows = new Set()                     // 跟踪所有打开的窗口,防止被 GC

function createMainWindow() {
  const win = new BrowserWindow({
    width: 900, height: 650,
    webPreferences: { preload: path.join(__dirname, 'preload.js') }
  })
  win.loadFile('index.html')
  windows.add(win)
  win.on('closed', () => windows.delete(win)) // closed 后实例已销毁,必须移除引用
}

function createAboutWindow(parent) {
  const about = new BrowserWindow({
    width: 360, height: 220,
    parent,                                    // 父子关系:子窗口始终在父窗口之上
    modal: true,                               // 模态:不关掉它,父窗口无法交互
    autoHideMenuBar: process.platform !== 'darwin',
    webPreferences: { preload: path.join(__dirname, 'preload.js') }
  })
  about.loadFile('about.html')
  windows.add(about)
  about.on('closed', () => windows.delete(about))
}

app.whenReady().then(() => {
  createMainWindow()

  // 只注册一次,所有窗口共用;用 event.sender 区分消息来自哪个窗口
  ipcMain.handle('app:open-about', (event) => {
    const sender = BrowserWindow.fromWebContents(event.sender) // 由 WebContents 反查窗口
    if (sender) createAboutWindow(sender)
  })
})

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

{
  "name": "mini-notes",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": { "start": "electron ." },
  "devDependencies": { "electron": "^44.5.1" }
}

const {
  app, BrowserWindow, Menu, Tray, dialog,
  ipcMain, globalShortcut, clipboard
} = require('electron')
const { nativeImage } = require('electron/common')
const fs = require('node:fs/promises')
const path = require('node:path')

// ---------- 单实例锁(第 1 节)----------
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', () => showAnyWindow())

  // ---------- 窗口管理(第 4.10 节)----------
  const windows = new Set()          // 当前打开的笔记窗口
  const filePaths = new Map()        // 每个窗口的"当前文件路径",key 为窗口 id
  let isQuitting = false             // 区分"关闭到托盘"与"真正退出"

  function createNoteWindow() {
    const win = new BrowserWindow({
      width: 720, height: 560,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')  // 只写 preload,其余吃安全默认值(第 2 节)
      }
    })
    win.loadFile('index.html')
    windows.add(win)
    win.on('closed', () => { windows.delete(win); filePaths.delete(win.id) })
    // 关闭到托盘:拦截 close 只是隐藏;真正退出时放行(见 before-quit 与托盘"退出")
    win.on('close', (e) => {
      if (!isQuitting) { e.preventDefault(); win.hide() }
    })
    return win
  }

  function showAnyWindow() {
    const win = [...windows][0] ?? createNoteWindow() // 没有窗口就新建,有就聚焦
    if (win.isMinimized()) win.restore()
    win.show()                                          // 窗口可能只是隐藏到托盘,显式显示
    win.focus()
  }

  // ---------- 应用菜单(第 4.1 节)----------
  function buildAppMenu() {
    return Menu.buildFromTemplate([
      ...(process.platform === 'darwin' ? [{ role: 'appMenu' }] : []),
      {
        label: '文件',
        submenu: [
          { label: '新建笔记', accelerator: 'CmdOrCtrl+N', click: () => createNoteWindow() },
          { type: 'separator' },
          { role: 'quit', label: '退出' }
        ]
      },
      { role: 'editMenu', label: '编辑' },
      {
        label: '视图',
        submenu: [{ role: 'reload' }, { role: 'toggleDevTools' }, { role: 'togglefullscreen' }]
      }
    ])
  }

  // ---------- IPC:保存/打开/复制(第 3、4.4、4.9 节)----------
  ipcMain.handle('note:save', async (event, content) => {
    const win = BrowserWindow.fromWebContents(event.sender)   // 消息来自哪个窗口
    if (!win) return { ok: false, error: '窗口不存在' }

    let filePath = filePaths.get(win.id)
    if (!filePath) {
      // 首次保存:弹保存对话框问用户存哪(取消时 filePath 为空字符串)
      const result = await dialog.showSaveDialog(win, {
        defaultPath: path.join(app.getPath('documents'), '未命名笔记.md'),
        filters: [{ name: 'Markdown', extensions: ['md'] }, { name: '所有文件', extensions: ['*'] }]
      })
      if (result.canceled || !result.filePath) return { ok: false, canceled: true }
      filePath = result.filePath
    }
    await fs.writeFile(filePath, content, 'utf8')              // 主进程 fs 写文件
    filePaths.set(win.id, filePath)
    win.setTitle(path.basename(filePath))                      // 用文件名刷新窗口标题
    return { ok: true, filePath }
  })

  ipcMain.handle('note:open', async (event) => {
    const win = BrowserWindow.fromWebContents(event.sender)
    if (!win) return { ok: false, error: '窗口不存在' }
    const { canceled, filePaths: files } = await dialog.showOpenDialog(win, {
      filters: [{ name: 'Markdown/文本', extensions: ['md', 'txt'] }],
      properties: ['openFile']
    })
    if (canceled || files.length === 0) return { ok: false, canceled: true }
    const content = await fs.readFile(files[0], 'utf8')        // 主进程 fs 读文件
    filePaths.set(win.id, files[0])
    return { ok: true, content, filePath: files[0] }
  })

  ipcMain.handle('note:copy', async (_event, text) => {
    await clipboard.writeText(text)                            // Electron 44:异步剪贴板 API
    return { ok: true }
  })

  // ---------- 托盘 + 全局快捷键 + 生命周期(第 1、4.2、4.6 节)----------
  let tray = null

  app.whenReady().then(() => {
    Menu.setApplicationMenu(buildAppMenu())
    createNoteWindow()

    // 托盘:官方教程的 16x16 图标;菜单提供显示/新建/退出
    const icon = nativeImage.createFromDataURL(
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII='
    )
    tray = new Tray(icon)                                      // 全局引用,防 GC
    tray.setToolTip('迷你笔记')
    tray.setContextMenu(Menu.buildFromTemplate([
      { label: '显示', click: showAnyWindow },
      { label: '新建笔记', click: () => createNoteWindow() },
      { type: 'separator' },
      {
        label: '退出',
        click: () => { isQuitting = true; app.quit() }         // 真正退出:先置标志再 quit
      }
    ]))
    tray.on('click', showAnyWindow)

    // 全局快捷键:应用在后台也能一键唤起
    const ok = globalShortcut.register('CommandOrControl+Alt+N', showAnyWindow)
    if (!ok) console.log('全局快捷键注册失败(可能被占用)')
  })

  app.on('activate', () => {                                   // macOS Dock 点击
    if (BrowserWindow.getAllWindows().length === 0) createNoteWindow()
  })

  app.on('before-quit', () => { isQuitting = true })           // Cmd+Q/菜单退出:放行 close

  // 窗口全关不退出(托盘保活);真正退出时注销全局快捷键
  app.on('window-all-closed', () => { /* 留空:保持托盘存活 */ })
  app.on('will-quit', () => globalShortcut.unregisterAll())
}

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('notesAPI', {
  save: (content) => ipcRenderer.invoke('note:save', content),
  open: () => ipcRenderer.invoke('note:open'),
  copy: (text) => ipcRenderer.invoke('note:copy', text)
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>未命名笔记</title>
    <style>
      body { display: flex; flex-direction: column; height: 100vh; margin: 0; }
      #bar { padding: 6px; display: flex; gap: 8px; }
      #editor { flex: 1; padding: 12px; font-size: 15px; border: none; outline: none; resize: none; }
      #status { padding: 4px 10px; font-size: 12px; color: #666; }
    </style>
  </head>
  <body>
    <div id="bar">
      <button id="open">打开…</button>
      <button id="save">保存</button>
      <button id="copy">复制全文</button>
    </div>
    <textarea id="editor" placeholder="在这里写笔记…(Ctrl/Cmd+S 保存)"></textarea>
    <div id="status"></div>
    <script src="./renderer.js"></script>
  </body>
</html>

const editor = document.getElementById('editor')
const status = document.getElementById('status')

const setStatus = (msg) => { status.textContent = msg }

document.getElementById('open').addEventListener('click', async () => {
  const r = await window.notesAPI.open()
  if (r.ok) { editor.value = r.content; setStatus('已打开:' + r.filePath) }
})

document.getElementById('save').addEventListener('click', saveNote)
document.getElementById('copy').addEventListener('click', async () => {
  await window.notesAPI.copy(editor.value)
  setStatus('已复制到剪贴板')
})

async function saveNote() {
  const r = await window.notesAPI.save(editor.value)
  if (r.ok) setStatus('已保存:' + r.filePath)
  else if (!r.canceled) setStatus('保存失败:' + r.error)
}

// Ctrl/Cmd+S 拦截为"保存"(否则浏览器默认行为可能触发页面另存)
window.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
    e.preventDefault()
    saveNote()
  }
})