初始化提交
This commit is contained in:
yuantao
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
node_modules
|
||||
125
index.html
Normal file
125
index.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>性能监控</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.drag-bar {
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 5px;
|
||||
-webkit-app-region: drag;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.metrics {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin-top: 15px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="drag-bar">
|
||||
<div>性能监控</div>
|
||||
<div class="controls">
|
||||
<button id="minimize">最小化</button>
|
||||
<button id="close">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<div class="metric-item">CPU: <span id="cpu">0%</span></div>
|
||||
<div class="metric-item">内存: <span id="memory">0%</span></div>
|
||||
<div class="metric-item">网络: <span id="network">0 KB/s</span></div>
|
||||
</div>
|
||||
|
||||
<div class="settings">
|
||||
<label>
|
||||
<input type="checkbox" id="auto-launch"> 开机启动
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 引入Electron的remote模块（需要在主进程中启用nodeIntegration）
|
||||
const { ipcRenderer } = require('electron');
|
||||
|
||||
// 获取元素
|
||||
const minimizeBtn = document.getElementById('minimize');
|
||||
const closeBtn = document.getElementById('close');
|
||||
const cpuEl = document.getElementById('cpu');
|
||||
const memoryEl = document.getElementById('memory');
|
||||
const networkEl = document.getElementById('network');
|
||||
const autoLaunchCheckbox = document.getElementById('auto-launch');
|
||||
|
||||
// 最小化按钮事件
|
||||
minimizeBtn.addEventListener('click', () => {
|
||||
// 发送最小化事件到主进程
|
||||
ipcRenderer.send('window-minimize');
|
||||
});
|
||||
|
||||
// 关闭按钮事件
|
||||
closeBtn.addEventListener('click', () => {
|
||||
// 发送关闭事件到主进程
|
||||
ipcRenderer.send('window-close');
|
||||
});
|
||||
|
||||
// 开机启动设置事件
|
||||
autoLaunchCheckbox.addEventListener('change', () => {
|
||||
// 发送开机启动设置事件到主进程
|
||||
ipcRenderer.send('set-auto-launch', autoLaunchCheckbox.checked);
|
||||
});
|
||||
|
||||
// 模拟性能数据更新
|
||||
setInterval(() => {
|
||||
// 生成随机数据
|
||||
const cpu = Math.floor(Math.random() * 100);
|
||||
const memory = Math.floor(Math.random() * 100);
|
||||
const network = Math.floor(Math.random() * 1000);
|
||||
|
||||
// 更新UI
|
||||
cpuEl.textContent = cpu + '%';
|
||||
memoryEl.textContent = memory + '%';
|
||||
networkEl.textContent = network + ' KB/s';
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
125
main.js
Normal file
125
main.js
Normal file
@@ -0,0 +1,125 @@
|
||||
const { app, BrowserWindow, Tray, Menu, nativeImage, ipcMain } = require('electron');
|
||||
const path = require('path');
|
||||
const AutoLaunch = require('auto-launch');
|
||||
|
||||
// 保持对窗口对象的全局引用，如果不这样做，窗口将会在JavaScript垃圾回收时自动关闭
|
||||
let mainWindow;
|
||||
let tray = null;
|
||||
|
||||
// 创建开机启动管理器
|
||||
let autoLauncher = new AutoLaunch({
|
||||
name: 'Motioner',
|
||||
path: process.execPath,
|
||||
});
|
||||
|
||||
// 创建窗口的函数
|
||||
function createWindow() {
|
||||
// 创建浏览器窗口
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 300,
|
||||
height: 200,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false
|
||||
},
|
||||
// 创建无边框窗口
|
||||
frame: false,
|
||||
// 保持窗口始终在最前面
|
||||
alwaysOnTop: true,
|
||||
// 窗口透明
|
||||
transparent: true
|
||||
});
|
||||
|
||||
// 加载应用的index.html
|
||||
mainWindow.loadFile('index.html');
|
||||
|
||||
// 处理最小化事件
|
||||
ipcMain.on('window-minimize', () => {
|
||||
mainWindow.hide();
|
||||
});
|
||||
|
||||
// 处理关闭事件
|
||||
ipcMain.on('window-close', () => {
|
||||
app.quit();
|
||||
});
|
||||
|
||||
// 处理开机启动设置事件
|
||||
ipcMain.on('set-auto-launch', (event, enable) => {
|
||||
if (enable) {
|
||||
autoLauncher.enable().then(() => {
|
||||
console.log('开机启动已启用');
|
||||
}).catch(err => {
|
||||
console.error('启用开机启动失败:', err);
|
||||
});
|
||||
} else {
|
||||
autoLauncher.disable().then(() => {
|
||||
console.log('开机启动已禁用');
|
||||
}).catch(err => {
|
||||
console.error('禁用开机启动失败:', err);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 当窗口关闭时触发
|
||||
mainWindow.on('closed', function () {
|
||||
// 取消对窗口对象的引用，通常会存储窗口在数组中，这是删除相应元素的时候
|
||||
mainWindow = null;
|
||||
});
|
||||
}
|
||||
|
||||
// 当Electron完成初始化并准备创建浏览器窗口时调用此方法
|
||||
app.whenReady().then(() => {
|
||||
createWindow();
|
||||
|
||||
// 创建系统托盘
|
||||
createTray();
|
||||
|
||||
app.on('activate', function () {
|
||||
// 在macOS上，当单击dock图标并且没有其他窗口打开时，通常在应用程序中重新创建一个窗口
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
|
||||
// 当所有窗口都关闭时退出应用
|
||||
app.on('window-all-closed', function () {
|
||||
// 在macOS上，应用程序及其菜单栏通常会保持活动状态，直到用户明确退出
|
||||
if (process.platform !== 'darwin') app.quit();
|
||||
});
|
||||
|
||||
// 创建系统托盘
|
||||
function createTray() {
|
||||
// 创建托盘图标
|
||||
const iconPath = path.join(__dirname, 'assets/icon.png');
|
||||
let icon;
|
||||
try {
|
||||
icon = nativeImage.createFromPath(iconPath);
|
||||
} catch (error) {
|
||||
// 如果找不到图标文件，使用默认图标
|
||||
icon = nativeImage.createEmpty();
|
||||
}
|
||||
|
||||
tray = new Tray(icon);
|
||||
|
||||
// 创建上下文菜单
|
||||
const contextMenu = Menu.buildFromTemplate([
|
||||
{
|
||||
label: '显示',
|
||||
click: () => {
|
||||
mainWindow.show();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '退出',
|
||||
click: () => {
|
||||
app.quit();
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
tray.setContextMenu(contextMenu);
|
||||
|
||||
// 点击托盘图标显示窗口
|
||||
tray.on('click', () => {
|
||||
mainWindow.show();
|
||||
});
|
||||
}
|
||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "motioner",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
44
package.json
Normal file
44
package.json
Normal file
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "motioner",
|
||||
"version": "0.0.1",
|
||||
"description": "基于Electron构建的性能监控应用,功能包括全局悬浮窗口、可以最小化到托盘并保持后台运行、可以设置是否开机启动",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"postinstall": "electron-builder install-app-deps",
|
||||
"pack": "electron-builder --dir",
|
||||
"dist": "electron-builder"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.pandorastudio.cn/yuantao/motioner.git"
|
||||
},
|
||||
"author": "袁涛",
|
||||
"license": "ISC",
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"auto-launch": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "*",
|
||||
"electron-builder": "*"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.pandorastudio.motioner",
|
||||
"productName": "Motioner",
|
||||
"directories": {
|
||||
"output": "dist"
|
||||
},
|
||||
"win": {
|
||||
"target": [
|
||||
"nsis"
|
||||
],
|
||||
"artifactName": "${productName}-Setup-${version}.${ext}"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user