125 lines
3.2 KiB
HTML
125 lines
3.2 KiB
HTML
<!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> |