tianshu-engine/docs/electron/window-controls.md

Electron 窗口控制指南

窗口功能

基本控制

功能	操作
调整大小	拖动窗口边缘
最小化	点击窗口右上角的 - 按钮
最大化	点击窗口右上角的 □ 按钮
还原	再次点击最大化按钮
关闭	点击窗口右上角的 × 按钮

快捷键

快捷键	功能
F11	切换全屏模式
Alt + F4	退出应用
Alt + F4 (Mac)	Cmd + Q

窗口配置

当前设置

{
  width: 1280,           // 初始宽度
  height: 720,           // 初始高度
  minWidth: 800,         // 最小宽度
  minHeight: 600,        // 最小高度
  resizable: true,       // 允许调整大小
  maximizable: true,     // 允许最大化
  minimizable: true,     // 允许最小化
  closable: true,        // 允许关闭
  autoHideMenuBar: false // 显示菜单栏
}

自定义窗口大小

如果你想修改默认窗口大小，编辑 electron/main.js：

const win = new BrowserWindow({
  width: 1920,      // 修改为你想要的宽度
  height: 1080,     // 修改为你想要的高度
  minWidth: 1024,   // 修改为你想要的最小宽度
  minHeight: 768,   // 修改为你想要的最小高度
  // ... 其他配置
})

启动时最大化

如果你希望应用启动时自动最大化，修改 electron/main.js：

const win = new BrowserWindow({
  // ... 其他配置
})

// 在创建窗口后添加
win.maximize()

启动时全屏

如果你希望应用启动时全屏，修改 electron/main.js：

const win = new BrowserWindow({
  // ... 其他配置
  fullscreen: true  // 启用全屏
})

菜单栏

应用会显示 Electron 默认菜单栏，包含以下菜单：

File 菜单

• New Window - 打开新窗口
• Close - 关闭当前窗口
• Quit - 退出应用

Edit 菜单

• Undo - 撤销
• Redo - 重做
• Cut - 剪切
• Copy - 复制
• Paste - 粘贴
• Select All - 全选

View 菜单

• Reload - 重新加载页面
• Force Reload - 强制重新加载
• Toggle Developer Tools - 切换开发者工具
• Toggle Full Screen - 切换全屏
• Zoom In - 放大
• Zoom Out - 缩小
• Reset Zoom - 重置缩放

Window 菜单

• Minimize - 最小化
• Zoom - 最大化/还原
• Front - 置顶

隐藏菜单栏

如果你想隐藏菜单栏，修改 electron/main.js：

const win = new BrowserWindow({
  // ... 其他配置
  autoHideMenuBar: true  // 隐藏菜单栏
})

自定义菜单栏

如果你想创建自定义菜单，在 electron/main.js 中添加：

const { Menu } = require('electron')

const template = [
  {
    label: '游戏',
    submenu: [
      { label: '新游戏', click: () => { /* 新游戏逻辑 */ } },
      { label: '继续游戏', click: () => { /* 继续游戏逻辑 */ } },
      { type: 'separator' },
      { label: '退出', click: () => app.quit() }
    ]
  },
  {
    label: '设置',
    submenu: [
      { label: '全屏', click: () => { win.setFullScreen(!win.isFullScreen()) } },
      { label: '开发者工具', click: () => { win.webContents.toggleDevTools() } }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

窗口状态保存

如果你想记住窗口的大小和位置，可以使用以下代码：

const Store = require('electron-store')
const store = new Store()

app.whenReady().then(async () => {
  // 获取保存的窗口状态
  const windowState = store.get('windowState', {
    width: 1280,
    height: 720,
    x: undefined,
    y: undefined
  })

  const win = new BrowserWindow({
    width: windowState.width,
    height: windowState.height,
    x: windowState.x,
    y: windowState.y,
    // ... 其他配置
  })

  // 保存窗口状态
  win.on('close', () => {
    const bounds = win.getBounds()
    store.set('windowState', {
      width: bounds.width,
      height: bounds.height,
      x: bounds.x,
      y: bounds.y
    })
  })
})

边框窗口

如果你想要无边框窗口，修改 electron/main.js：

const win = new BrowserWindow({
  frame: false,        // 无边框
  transparent: true,   // 透明背景
  // ... 其他配置
})

注意：无边框窗口需要你自己实现窗口控制按钮。

常见问题

Q: 如何在应用内切换全屏？

A: 按 F11 键或通过菜单栏 View → Toggle Full Screen

Q: 如何隐藏开发者工具？

A: 删除 electron/main.js 中的 win.webContents.openDevTools() 行

Q: 如何设置应用图标？

A: 在 electron/main.js 中设置 icon 选项

Q: 如何防止用户调整窗口大小？

A: 设置 resizable: false

Q: 如何设置窗口最小尺寸？

A: 设置 minWidth 和 minHeight 选项

性能建议

1. 合理的初始大小 - 设置合适的默认窗口大小
2. 最小尺寸限制 - 防止窗口过小导致内容无法显示
3. 响应式设计 - 确保应用在不同窗口尺寸下都能正常工作
4. 窗口状态保存 - 保存用户的首选窗口大小和位置

总结

现在你的应用具有完整的窗口控制功能：

• ✅ 可调整大小
• ✅ 可最小化
• ✅ 可最大化
• ✅ 可关闭
• ✅ 快捷键支持
• ✅ 菜单栏支持

用户可以根据自己的喜好自由调整窗口大小和全屏模式！