悬浮球

electron.vite.config.mjs

@@ -22,8 +22,8 @@ export default defineConfig({
     server: {
       proxy: {
         '/dev-api': {
-          // target: 'http://27.128.240.72:7865',
+          target: 'http://27.128.240.72:7865',
-          target: 'http://192.168.2.52:7863',
+          // target: 'http://192.168.2.52:7863',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },

src/main/index.js

@@ -3,8 +3,12 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import File from './file'
+import Tool from './tool'
 
 File({ app, shell, BrowserWindow, ipcMain })
+// zdg: 创建工具-如 悬浮球
+Tool(app, shell, BrowserWindow, ipcMain)
+
 function createWindow() {
   // Create the browser window.
   const mainWindow = new BrowserWindow({

src/main/tool.js

@@ -0,0 +1,43 @@
+/**
+ * @description: electron 封装的工具函数
+ */
+// import { app, shell, BrowserWindow, ipcMain } from 'electron'
+let electron = {}
+
+export default function(app, shell, BrowserWindow, ipcMain) {
+  electron = { app, shell, BrowserWindow, ipcMain }
+  // 创建工具-悬浮球
+  ipcMain.on('create-tool-sphere', (e, data) => {
+    console.log('测试xxxx', data)
+    const res = createTools(...data) // 执行逻辑
+    e.reply('create-tool-sphere-reply', {a: 1111}) // 返回结果
+  })
+}
+/**
+ * @description: 创建工具
+ * @param {*} url 路由地址
+ * @param {number} [width=800] 窗口宽度
+ * @param {number} [height=600] 窗口高度
+ * @param {{}} [option={}] 自定义选项
+ * @author: zdg
+ * @date 2021-07-05 14:07:01
+ */
+function createTools(url, width = 800, height = 600, option={}) {
+  if (!electron.BrowserWindow) return
+  const win = new electron.BrowserWindow({
+    width, height,
+    type: 'toolbar',    //创建的窗口类型为工具栏窗口
+    frame: false,       //要创建无边框窗口
+    resizable: false,   //禁止窗口大小缩放
+    transparent: true,  //设置透明
+    alwaysOnTop: true,  //窗口是否总是显示在其他窗口之前
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      webSecurity: false
+    },
+    ...option
+  })
+  win.loadURL(url)
+  return win
+}

src/renderer/src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Layout from '../layout/index.vue'
+import { toolRouters } from './tool'
 
 export const constantRoutes = [
   {
@@ -40,7 +41,7 @@ export const constantRoutes = [
       }
     ]
   },
-
+  ...toolRouters
 ]
 
 const router = createRouter({

src/renderer/src/router/tool.js

@@ -0,0 +1,18 @@
+/**
+ * @description: 工具路由
+ * @author: zdg
+ * @date 2021-07-05 14:07:01
+ */
+export const toolRouters = [
+  {
+    path: '/tool',
+    children: [
+      {
+        path: '/sphere',
+        component: () => import('@/views/tool/sphere.vue'),
+        name: 'toolSphere',
+        meta: {title: '悬浮球'}
+      },
+    ]
+  }
+]

src/renderer/src/utils/tool.js

@@ -0,0 +1,24 @@
+/**
+ * @description: electron 封装的工具函数
+ */
+const { ipcRenderer } = window.electron || {}
+
+/**
+ * @form src/main/tool.js 来源
+ * @description 创建工具
+ * @param {*} key 消息头
+ *  create-tool-sphere 创建-悬浮球 | url:路由地址,width:窗口宽度,height:窗口高度,option:自定义选项
+ * @param {*} data 参数
+ */
+export function createTools(key, data) {
+  const msgKey = `create-tool-${key}` // 消息头
+  const msgKeyRes = `${msgKey}-reply` // 消息头-返回结果
+  return new Promise((resolve) => {
+    // 返回结果-监听
+    ipcRenderer.once(msgKeyRes, async (e, res) => {
+      resolve(res)
+    })
+    // 发送消息
+    ipcRenderer.send(msgKey, data)
+  })
+}

src/renderer/src/views/resource/index.vue

@@ -19,13 +19,14 @@
 </template>
 
 <script setup>
-import { ref, toRaw } from 'vue'
+import { onMounted, ref, toRaw } from 'vue'
 import useResoureStore from './store'
 import ChooseTextbook from '@/components/choose-textbook/index.vue'
 import ResoureSearch from './container/resoure-search.vue'
 import ResoureList from './container/resoure-list.vue'
 import uploadDialog from '@/components/upload-dialog/index.vue'
 import uploaderState from '@/store/modules/uploader'
+import { createTools } from '@/utils/tool'
 
 const sourceStore = useResoureStore()
 const isDialogOpen = ref(false)
@@ -33,7 +34,11 @@ const isDialogOpen = ref(false)
 const openDialog = () => {
   isDialogOpen.value = true
 }
-
+onMounted(async () => {
+  const params = { url: '/tools/sphere', width: 120, height: 120 }
+  const res = await createTools('sphere', params)
+  console.log('消息返回：', res)
+})
 // 查询
 const getData = (data) => {
   const { textBook, node } = data
@@ -81,7 +86,6 @@ const fileCallBack = (res) => {
     sourceStore.handleQuery()
   }
 }
-
 </script>
 
 <style lang="scss" scoped>

src/renderer/src/views/tool/sphere.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    xxxxx
+  </div>
+</template>
+
+<script setup>
+// 功能说明：electron 悬浮球
+</script>
+
+<style lang="scss" scoped>
+
+</style>