dromara/electron-egg 窗口最小化状态样式定制
项目地址: https://gitcode.com/dromara/electron-egg 1. 引言
在桌面应用开发中，窗口最小化状态的样式定制是提升用户体验的重要环节。dromara/electron-egg作为一款简单、跨平台的企业级桌面软件开发框架，提供了灵活的窗口样式定制能力。本文将详细介绍如何在electron-egg框架中定制窗口最小化状态的样式，包括任务栏图标、系统托盘图标以及最小化动画效果等方面的实现方法。
2. 窗口配置基础
electron-egg框架的窗口配置主要集中在electron/config/config.default.js文件中。该文件定义了窗口的基本属性，如标题、尺寸、图标等。
2.1 默认窗口配置
默认窗口配置如下所示：
windowsOption: {
title: 'electron-egg',
width: 980,
height: 650,
minWidth: 400,
minHeight: 300,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
},
frame: true,
show: true,
icon: path.join(getBaseDir(), 'public', 'images', 'logo-32.png'),
}
在这个配置中，icon属性指定了窗口的图标，该图标也会在窗口最小化到任务栏时显示。默认使用的图标路径为public/images/logo-32.png，如图所示：
2.2 自定义任务栏图标
要自定义窗口最小化时显示在任务栏的图标，可以修改windowsOption中的icon属性。例如，将图标修改为public/images/example/ee-win-home.png：
icon: path.join(getBaseDir(), 'public', 'images', 'example', 'ee-win-home.png'),
修改后的任务栏图标效果如图所示：
3. 系统托盘实现
electron-egg框架本身没有直接提供系统托盘的实现，但我们可以通过Electron的API来自定义系统托盘，实现窗口最小化到托盘的功能。
3.1 创建系统托盘
首先，我们需要在应用的生命周期中创建系统托盘。在electron/preload/lifecycle.js文件中，我们可以在ready生命周期函数中添加系统托盘的创建代码：
const { Tray, Menu } = require('electron');
async ready() {
logger.info('[lifecycle] ready');
// 创建系统托盘
this.tray = new Tray(path.join(getBaseDir(), 'public', 'images', 'tray.png'));
// 创建托盘菜单
const contextMenu = Menu.buildFromTemplate([
{ label: '显示窗口', click: () => {
const win = getMainWindow();
win.show();
}},
{ label: '退出应用', click: () => {
app.quit();
}}
]);
// 设置托盘图标和菜单
this.tray.setToolTip('electron-egg');
this.tray.setContextMenu(contextMenu);
// 点击托盘图标显示窗口
this.tray.on('click', () => {
const win = getMainWindow();
win.show();
});
}
系统托盘图标使用的是public/images/tray.png文件，如图所示：
3.2 窗口最小化到托盘
要实现窗口最小化到托盘的功能，我们需要监听窗口的minimize事件，并在事件处理函数中隐藏窗口并显示托盘图标：
async windowReady() {
logger.info('[lifecycle] window-ready');
const win = getMainWindow();
// 监听窗口最小化事件
win.on('minimize', (event) => {
event.preventDefault(); // 阻止窗口默认的最小化行为
win.hide(); // 隐藏窗口
this.tray.show(); // 显示托盘图标
});
// 延迟加载，无白屏
const { windowsOption } = getConfig();
if (windowsOption.show == false) {
win.once('ready-to-show', () => {
win.show();
win.focus();
})
}
}
4. 最小化动画效果
electron-egg框架默认没有提供窗口最小化的动画效果，但我们可以通过前端CSS和Electron的窗口事件来实现自定义的最小化动画。
4.1 添加CSS动画
在前端项目的全局样式文件frontend/src/assets/global.less中，添加窗口最小化动画的CSS样式：
/* 窗口最小化动画 */
.minimize-animation {
animation: minimize 0.3s ease-out forwards;
}
@keyframes minimize {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.8);
opacity: 0;
}
}
4.2 触发最小化动画
在前端页面中，我们可以通过IPC通信来触发窗口最小化事件，并添加动画效果。首先，在frontend/src/utils/ipcRenderer.js中添加最小化窗口的IPC调用：
// 最小化窗口
export const minimizeWindow = () => {
return ipcRenderer.invoke('window-minimize');
};
然后，在主进程中注册window-minimize事件的处理函数，在electron/main.js中添加：
// 注册窗口最小化事件
app.register('window-minimize', () => {
const win = getMainWindow();
// 添加动画类
win.webContents.send('add-minimize-animation');
// 延迟执行最小化
setTimeout(() => {
win.minimize();
}, 300);
});
最后，在前端页面中监听add-minimize-animation事件，添加动画类：
// 在需要最小化的组件中
ipcRenderer.on('add-minimize-animation', () => {
document.body.classList.add('minimize-animation');
// 动画结束后移除类
setTimeout(() => {
document.body.classList.remove('minimize-animation');
}, 300);
});
5. 跨平台适配
electron-egg框架支持跨平台开发，我们需要考虑在不同操作系统上窗口最小化样式的差异。
5.1 Windows平台
在Windows平台上，窗口最小化默认会显示在任务栏中。我们可以通过修改任务栏图标的方式来自定义最小化样式，如第2.2节所述。Windows平台的窗口效果如图所示：
5.2 macOS平台
在macOS平台上，窗口最小化会显示在Dock中。我们可以通过修改Info.plist文件来自定义Dock图标。在打包配置文件cmd/builder-mac.json中，可以指定Dock图标的路径：
{
"appId": "com.electron.egg",
"productName": "electron-egg",
"icon": "public/images/example/ee-mac-home.png",
// 其他配置...
}
macOS平台的Dock图标效果如图所示：
5.3 Linux平台
在Linux平台上，窗口最小化的行为取决于桌面环境。通常情况下，窗口会最小化到任务栏或活动栏中。我们可以通过修改窗口图标来实现自定义效果，如第2.2节所述。Linux平台的窗口效果如图所示：
6. 完整实现流程
下面是窗口最小化状态样式定制的完整实现流程：
通过以上步骤，我们可以完成electron-egg框架中窗口最小化状态样式的定制，包括任务栏图标、系统托盘和最小化动画等效果。
7. 总结与扩展
本文详细介绍了如何在dromara/electron-egg框架中定制窗口最小化状态的样式，包括修改任务栏图标、实现系统托盘、添加最小化动画以及跨平台适配等内容。通过这些定制，可以提升应用的用户体验，使应用更加符合企业级桌面软件的需求。
除了本文介绍的内容，还可以进一步扩展：
- 实现窗口最小化时的自定义通知
- 添加托盘图标的闪烁效果
- 自定义窗口最小化时的缩略图
更多关于electron-egg框架的使用，可以参考官方文档：README.md 和 README.zh-CN.md。
希望本文能够帮助开发者更好地定制electron-egg应用的窗口最小化样式，打造更加专业的企业级桌面应用。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
