初始化提交

2025-09-10 18:23:45 +08:00
commit 731f18c57e
5 changed files with 301 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
 node_modules
--- a/index.html
+++ b/index.html
@@ -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>
--- a/main.js
+++ b/main.js
@@ -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();
  });
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,6 @@
 {
  "name": "motioner",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {}
 }
--- a/package.json
+++ b/package.json
@@ -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
    }
  }
 }