Electron-Vue-template 系统通知&托盘怎么写并且导入

`Electron-Vue-template` 是一个基于 Vue.js 和 Electron 框架的快速启动模板，用于开发跨平台的桌面应用程序。系统通知和托盘功能在 Electron 中非常常见，它们允许你的应用在任务栏显示图标并在需要时弹出通知。

首先，确保你在项目中安装了 `electron-notifications` 和 `electron-tray` 这两个第三方库，你可以通过npm或yarn来安装：

# 使用npm
npm install electron-notifications electron-tray

# 或者使用yarn
yarn add electron-notifications electron-tray

接下来，我们需要创建一个 tray (托盘) 和设置通知功能。这里是一个简单的示例：

1. **创建托盘**:
在主进程 (`main.js`) 中引入并初始化托盘：

const { Tray } = require('electron')
const trayPath = path.join(__dirname, 'app/icon.png') // 替换为你的图标路径

let tray;
async function createTray() {
  tray = new Tray(trayPath)
  tray.setContextMenu(createContextMenu()) // 创建右键菜单
}

// 在 app 初始化时创建托盘
createTray()

function createContextMenu() {
  const menu = Menu.buildFromTemplate([
    { label: 'About', click: () => showAboutDialog() },
    { type: 'separator' },
    { label: 'Quit', accelerator: 'Command+Q', click: app.quit }
  ])
  return menu
}

2. **发送系统通知**:
在你需要的地方添加通知功能，比如按钮点击事件或定时器触发：

const notifications = require('electron-notifications')

function showAlert(title, message) {
  notifications.notify({
    title,
    message,
    icon: trayPath,
    silent: false, // 非静默通知，默认false
    sound: true, // 是否播放声音，默认true
    wait: true // 是否阻止用户关闭窗口，直到用户响应，默认true
  })
}

在Vue组件中调用这个函数即可展示通知。