docs: reorganize docs into guide/ and electron/, add 6 new guide docs, update README

This commit is contained in:
2026-06-10 17:01:48 +08:00
parent 99f80147c7
commit 686b1b45ea
11 changed files with 950 additions and 75 deletions

View File

@@ -0,0 +1,237 @@
# 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. **窗口状态保存** - 保存用户的首选窗口大小和位置
## 总结
现在你的应用具有完整的窗口控制功能:
- ✅ 可调整大小
- ✅ 可最小化
- ✅ 可最大化
- ✅ 可关闭
- ✅ 快捷键支持
- ✅ 菜单栏支持
用户可以根据自己的喜好自由调整窗口大小和全屏模式!