electron实现桌面悬浮球效果

import { app, protocol,BrowserWindow, ipcMain, Menu, Tray,screen } from 'electron'
// 创建窗口的函数
let win2 = null
async function createSBallWindow () {
  win2 = new BrowserWindow({
    width: 60, //悬浮窗口的宽度 比实际DIV的宽度要多2px 因为有1px的边框
    height: 60, //悬浮窗口的高度 比实际DIV的高度要多2px 因为有1px的边框
    type: 'toolbar',  //创建的窗口类型为工具栏窗口
    frame: false,  //要创建无边框窗口
    resizable: false, //禁止窗口大小缩放
    show: false,  //先不让窗口显示
    webPreferences: {
      devTools: false //关闭调试工具
    },
    transparent: true, //设置透明
    hasShadow:false, //不显示阴影
    alwaysOnTop: true, //窗口是否总是显示在其他窗口之前\
    // backgroundColor: '#eee',
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      // preload: path.join(__dirname, 'preload.js'),
    }
  })
  //通过获取用户屏幕的宽高来设置悬浮球的初始位置
  const { left, top } = { left: screen.getPrimaryDisplay().workAreaSize.width - 160, top: screen.getPrimaryDisplay().workAreaSize.height - 160 }
  win2.setPosition(left, top) //设置悬浮球位置
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    await win2.loadURL(`${process.env.WEBPACK_DEV_SERVER_URL}#/ball`)
  }else{
    await win2.loadURL('app://./index.html#/ball')
  }
  win2.once('ready-to-show', () => {
    win2.show()
  })
  win2.on('close', () => {
    win2 = null
  })
}

app.on('ready', async () => {
  //创建主窗口
  createWindow()
  //创建球形窗口
  createSBallWindow()
})

<template>
  <div class="ballBox" @click="openWin">工具</div>
</template>
<script setup>
const { ipcRenderer} = window.require('electron')
const openWin = () => {
  //渲染进程想主进程发送消息，点击打开主页面
  ipcRenderer.send('openWin', true)
}
</script>
<style lang="scss" scoped >
.ballBox {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #eee;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
</style>