修改主进程：main.js
// main.js
const { app, BrowserWindow } = require("electron");
const path = require("node:path");
const createWindow = () => {
try {
const mainWindow = new BrowserWindow({
width: 1200,
height: 870,
alwaysOnTop: true,
frame: false,
icon: path.join(__dirname, "./img/icon.ico"),
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
mainWindow.loadFile(path.join(__dirname, "index.html"));
// 打开开发工具
mainWindow.webContents.openDevTools();
} catch (e) {
console.error("Failed to create window:", e);
}
};
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 在 Windows 和 Linux 上，关闭所有窗口时应该退出应用
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});
// 在 MacOS 上，应用没有结束，但所有窗口已关闭时，重新创建一个窗口
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
修改渲染进程：index.html
<!--index.html-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="width=device-width, initial-scale=1.0">
<title>空空我啊</title>
<!-- <link rel="stylesheet" href="./src/style.css"> -->
<style>
/* 格式化样式 */
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* 防止用户选中文本 */
user-select: none;
}
body {
width: 100vw;
height: 100vh;
background: #2c3e50;
/* 溢出隐藏 */
overflow: hidden;
}
/* title-bar自定义标题栏 */
.title-bar {
width: 100vw;
height: 35px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff9c;
-webkit-app-region: drag;
.logo {
img {
width: 30px;
height: 30px;
margin: 6px 0 0px 5px;
-webkit-app-region: no-drag;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.2);
}
}
}
.form-btn {
-webkit-app-region: no-drag;
/* 最小宽度 */
min-width: 100px;
/* 按钮样式 */
button {
cursor: pointer;
font-size: 1.5rem;
cursor: pointer;
border: none;
color: #ffffffb7;
text-shadow: 1px 1px 
