# Electron 窗口控制指南

## 窗口功能

### 基本控制

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

### 快捷键

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

## 窗口配置

### 当前设置

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

### 自定义窗口大小

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

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

### 启动时最大化

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

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

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

### 启动时全屏

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

```javascript
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`：

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

## 自定义菜单栏

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

```javascript
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)
```

## 窗口状态保存

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

```javascript
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`：

```javascript
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. **窗口状态保存** - 保存用户的首选窗口大小和位置

## 总结

现在你的应用具有完整的窗口控制功能：
- ✅ 可调整大小
- ✅ 可最小化
- ✅ 可最大化
- ✅ 可关闭
- ✅ 快捷键支持
- ✅ 菜单栏支持

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