electron 代理

electron.vite.config.mjs

@@ -17,6 +17,8 @@ export default defineConfig({
         // '@': resolve('./src/renderer/src'),
         // '@': path.resolve(__dirname, 'src/renderer/src'),
         '@': path.join(__dirname, './src/renderer/src'),
+        '@root': path.join(__dirname, '.'),
+
       }
     },
     server: {

jsconfig.json

@@ -4,7 +4,8 @@
       "paths": {
           "@/*":[
               "src/renderer/src/*"
-          ]
+          ],
+          "@root/*":["./*"]
       }
   },
   "exclude": [

package.json

@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.2",
+    "@electron/remote": "^2.1.2",
     "@rushstack/eslint-patch": "^1.10.3",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",

src/main/index.js

@@ -3,7 +3,10 @@ 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'
+import * as Tool from './tool'
+// 代理 electron/remote
+import remote from '@electron/remote/main' // 第一步：引入remote
+remote.initialize() // 第二步： 初始化remote
 
 File({ app, shell, BrowserWindow, ipcMain })
 
@@ -50,7 +53,10 @@ function createMainWindow() {
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      nodeIntegration: true
+      // nodeIntegration: true,
+      nodeIntegration: true,    // nodeApi调用
+      contextIsolation: false,  // 沙箱取消
+      // webSecurity: false        // 跨域关闭
     }
   })
 
@@ -68,6 +74,8 @@ function createMainWindow() {
   } else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
+  // 第三步： 开启remote服务
+  remote.enable(mainWindow.webContents)
 }
 
 // 作业窗口相关-开发中
@@ -152,9 +160,9 @@ app.on('ready', () => {
     if (!mainWindow) {
       createMainWindow()
     }
-
     loginWindow.destroy()
     loginWindow = null
+    Tool.setWin({mainWindow}) // 将主窗口传递到工具类中
   })
   // 打开登录窗口
   ipcMain.on('openLoginWindow', () => {
@@ -171,7 +179,7 @@ app.on('ready', () => {
     createWork(data)
   })
   // zdg: 创建工具窗口-如 悬浮球
-  Tool()
+  Tool.init()
   // 打开-登录窗口
   createLoginWindow()
   app.on('activate', function () {

src/main/tool.js

@@ -1,18 +1,23 @@
 /**
  * @description: electron 封装的工具函数
+ * 消息整理
+ * tool-sphere:create 创建-悬浮球-窗口
  */
 import { app, shell, BrowserWindow, ipcMain } from 'electron'
 import { is } from '@electron-toolkit/utils'
 
 // const baseUrl = 'http://localhost:5173/#' // 开发环境使用
 const baseUrl = process.env['ELECTRON_RENDERER_URL']+'/#' // 开发环境使用
-
+// 所有窗口
-export default function() {
+let allWindow = {}
+// 其他已有窗口 wins
+export function init() {
   // 创建工具-悬浮球
-  ipcMain.on('create-tool-sphere', async(e, data) => {
+  ipcMain.on('tool-sphere:create', async(e, data) => {
-    console.log('测试xxxx', data)
+    console.log('xxx', allWindow)
+    // console.log('测试xxxx', data)
     await createTools(data) // 执行逻辑
-    e.reply('create-tool-sphere-reply', {code: 200, msg: 'success'}) // 返回结果
+    e.reply('tool-sphere:create-reply', {code: 200, msg: 'success'}) // 返回结果
   })
 }
 /**
@@ -24,7 +29,8 @@ export default function() {
  * @author: zdg
  * @date 2021-07-05 14:07:01
  */
-function createTools({url, width = 800, height = 600, option={}}) {
+ export function createTools({url, width = 800, height = 600, option={}}) {
+  const { mainWindow } = allWindow||{} // 获取主窗口
   const devUrl = `${baseUrl}${url}`
   const buildUrl = `file://${__dirname}/index.html${url}`
   const urlAll = is.dev ? devUrl : buildUrl
@@ -36,6 +42,9 @@ function createTools({url, width = 800, height = 600, option={}}) {
       resizable: false,   // 禁止窗口大小缩放
       transparent: true,  // 设置透明
       alwaysOnTop: true,  // 窗口是否总是显示在其他窗口之前
+
+      parent: mainWindow, // 父窗口
+      autoClose: true,    // 关闭窗口后自动关闭
       webPreferences: {
         nodeIntegration: true,    // nodeApi调用
         contextIsolation: false,  // 沙箱取消
@@ -47,6 +56,8 @@ function createTools({url, width = 800, height = 600, option={}}) {
     // url = 'https://www.baidu.com'
     console.log(urlAll)
     win.loadURL(urlAll)
+    // win.setFullScreen(true)                 // 设置窗口为全屏
+    win.setIgnoreMouseEvents(true)          // 忽略鼠标事件|使窗口不可选中
     win.once('ready-to-show', () => {
       win.show()
       resolve(win)
@@ -56,3 +67,24 @@ function createTools({url, width = 800, height = 600, option={}}) {
     })
   })
 }
+// 保存窗口
+export function setWin(win = {}) {
+  if (win && Object.keys(win).length){
+    Object.keys(win).forEach(key => {
+      if (!allWindow[key]) { // 不存在就保存
+        allWindow[key] = win[key]
+      }
+    })
+  }
+}
+
+// 工具窗口-特殊区域恢复鼠标
+function toolMouse(toolWin) {
+  ipcMain.on('tool-mouse', (e, data) => {
+    const { id } = data
+    const win = allWindow[id]
+    if (win) {
+      win.setIgnoreMouseEvents(false)
+    }
+  })
+}

src/preload/index.js

@@ -1,16 +1,15 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 
 // Custom APIs for renderer
-const api = {}
+const api = {
-
+}
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
 if (process.contextIsolated) {
   try {
     contextBridge.exposeInMainWorld('electron', electronAPI)
-    contextBridge.exposeInMainWorld('electronAPI')
     contextBridge.exposeInMainWorld('api', api)
   } catch (error) {
     console.error(error)

src/renderer/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1721179711733') format('woff2'),
+  src: url('iconfont.woff2?t=1721815727687') format('woff2'),
-       url('iconfont.woff?t=1721179711733') format('woff'),
+       url('iconfont.woff?t=1721815727687') format('woff'),
-       url('iconfont.ttf?t=1721179711733') format('truetype'),
+       url('iconfont.ttf?t=1721815727687') format('truetype'),
-       url('iconfont.svg?t=1721179711733#iconfont') format('svg');
+       url('iconfont.svg?t=1721815727687#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,54 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiazai9:before {
+  content: "\e60b";
+}
+
+.icon-hudong:before {
+  content: "\e60c";
+}
+
+.icon-xiangpica:before {
+  content: "\e6be";
+}
+
+.icon-gengduo:before {
+  content: "\e62d";
+}
+
+.icon-jujiao:before {
+  content: "\e615";
+}
+
+.icon-huabi:before {
+  content: "\e795";
+}
+
+.icon-mouse:before {
+  content: "\e603";
+}
+
+.icon-xiayiye:before {
+  content: "\e68b";
+}
+
+.icon-shangyiye:before {
+  content: "\e68e";
+}
+
+.icon-shuangye:before {
+  content: "\e64e";
+}
+
+.icon-danyemoban:before {
+  content: "\e859";
+}
+
+.icon-lingdang:before {
+  content: "\e613";
+}
+
 .icon-yidongdaozu:before {
   content: "\e67d";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,90 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "720967",
+      "name": "更多",
+      "font_class": "xiazai9",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "3596229",
+      "name": "互动",
+      "font_class": "hudong",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "5233263",
+      "name": "橡皮擦",
+      "font_class": "xiangpica",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "5905756",
+      "name": "更多",
+      "font_class": "gengduo",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "11107711",
+      "name": "聚焦",
+      "font_class": "jujiao",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "36969022",
+      "name": "画笔",
+      "font_class": "huabi",
+      "unicode": "e795",
+      "unicode_decimal": 59285
+    },
+    {
+      "icon_id": "30792830",
+      "name": "28D鼠标箭头-copy",
+      "font_class": "mouse",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "694110",
+      "name": "下一页",
+      "font_class": "xiayiye",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "694115",
+      "name": "上一页",
+      "font_class": "shangyiye",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "930693",
+      "name": "双页",
+      "font_class": "shuangye",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "2144697",
+      "name": "单页模板",
+      "font_class": "danyemoban",
+      "unicode": "e859",
+      "unicode_decimal": 59481
+    },
+    {
+      "icon_id": "17990800",
+      "name": "铃铛",
+      "font_class": "lingdang",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
     {
       "icon_id": "1207918",
       "name": "移动到组",

src/renderer/src/assets/iconfont/iconfont.svg

@@ -14,6 +14,30 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="xiazai9" unicode="&#58891;" d="M102.4 486.4C46.08 486.4 0 440.32 0 384s46.08-102.4 102.4-102.4 102.4 46.08 102.4 102.4C204.8 440.32 158.72 486.4 102.4 486.4zM921.6 486.4c-56.32 0-102.4-46.08-102.4-102.4s46.08-102.4 102.4-102.4S1024 327.68 1024 384C1024 440.32 977.92 486.4 921.6 486.4zM512 486.4c-56.32 0-102.4-46.08-102.4-102.4s46.08-102.4 102.4-102.4 102.4 46.08 102.4 102.4C614.4 440.32 568.32 486.4 512 486.4z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="hudong" unicode="&#58892;" d="M99.776 554.24c0 169.408 141.056 306.816 315.008 306.816h0.768v-85.312h-0.768c-125.44 0-227.456-99.328-227.456-221.504v-1.92h106.944L147.2 409.344-0.064 552.32h99.84v1.92zM923.52 213.248c0-169.408-141.12-306.816-314.944-306.816h-0.768v85.312h0.768c125.44 0 227.456 99.392 227.456 221.568v1.92H729.088l147.072 142.976 147.2-142.976h-99.84v-1.984zM398.912 259.392c27.584 0 50.048-21.184 50.048-47.104v-194.752c0-25.984-22.464-47.104-49.984-47.104H114.048c-27.584 0-50.048 21.184-50.048 47.104v194.752c0 25.984 22.464 47.104 50.048 47.104h284.864m0 64H114.048c-62.976 0-114.048-49.792-114.048-111.104v-194.752c0-61.312 51.008-111.104 114.048-111.104h284.928c62.976 0 113.984 49.856 113.984 111.104v194.752c0 61.312-51.008 111.104-114.048 111.104zM906.176 797.184c27.584 0 50.048-21.12 50.048-47.104v-194.752c0-25.984-22.464-47.168-50.048-47.168H621.248c-27.584 0-49.984 21.184-49.984 47.168V750.08c0 25.984 22.464 47.104 49.984 47.104h284.928m0 64H621.248c-62.976 0-113.984-49.728-113.984-111.104v-194.752c0-61.376 51.008-111.168 113.984-111.168h284.992c62.912 0 114.048 49.728 114.048 111.168V750.08c-0.064 61.312-51.072 111.104-114.112 111.104z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="xiangpica" unicode="&#59070;" d="M1023 529.9L662.3 890.8 585 813.4l-34.4 34.4L69.7 358l34.4-34.4-51.5-34.4c-68.7-68.7-68.7-171.9 0-240.6l120.2-120.3c68.7-68.7 171.8-68.7 240.5 0l42.9 43 34.4-34.4 489.5 489.8-34.4 25.8 77.3 77.4zM662.3 830.6l300.6-300.8-51.5-51.6-300.6 309.5 51.5 42.9zM404.7-28.7c-60.1-60.2-154.6-60.2-214.7 0l-94.5 94.5c-60.1 60.2-60.1 154.7 0 214.8l34.4 17.2L430.5-3l-25.8-25.7z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="gengduo" unicode="&#58925;" d="M166.6 796.4h228.6c37.9 0 68.6-30.7 68.6-68.6v-228.6c0-37.9-30.7-68.6-68.6-68.6H166.6c-38 0-68.6 30.8-68.6 68.6V727.8c0 38 30.7 68.6 68.6 68.6z m457.3 0h228.6c38 0 68.6-30.7 68.6-68.6v-228.6c0-37.9-30.7-68.6-68.6-68.6H623.9c-37.9 0-68.6 30.7-68.6 68.6V727.8c0 38 30.7 68.6 68.6 68.6zM166.6 339.2h228.6c37.9 0 68.6-30.7 68.6-68.6V42c0-37.9-30.7-68.6-68.6-68.6H166.6c-38 0-68.6 30.7-68.6 68.6V270.5c0 37.9 30.7 68.7 68.6 68.7z m685.9-45.8c12.7 0 22.8-10.3 22.8-22.8V42c0-12.7-10.3-22.8-22.8-22.8H623.9c-12.7 0-22.8 10.3-22.8 22.8V270.5c0 12.7 10.3 22.8 22.8 22.8h228.6z m0 45.8H623.9c-37.9 0-68.6-30.7-68.6-68.6V42c0-37.9 30.7-68.6 68.6-68.6h228.6c37.9 0 68.6 30.7 68.6 68.6V270.5c0.1 37.9-30.6 68.7-68.6 68.7z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="jujiao" unicode="&#58901;" d="M994.574336 186.507264c8.716288-8.691712 13.041664-19.152896 13.041664-31.37536v-133.373952c0-36.806656-13.02528-68.182016-39.07584-94.257152-26.05056-26.075136-57.46688-39.1168-94.306304-39.1168H740.827136c-12.296192 0-22.757376 4.34176-31.440896 13.172736-8.699904 8.552448-13.06624 19.152896-13.06624 31.37536s4.366336 22.69184 13.06624 31.37536c8.68352 8.68352 19.144704 13.041664 31.440896 13.041664h133.40672c12.263424 0 22.77376 4.34176 31.432704 13.033472 8.72448 8.691712 13.041664 19.152896 13.041664 31.506432V155.131904c0 12.353536 4.34176 22.822912 13.058048 31.37536 8.675328 8.822784 19.16928 13.172736 31.45728 13.172736l-0.090112-0.131072c12.271616 0 22.77376-4.358144 31.440896-13.041664zM283.19744 879.616c12.271616 0 22.77376-4.349952 31.41632-13.041664C323.362816 857.874432 327.68 847.405056 327.68 835.182592c0-12.36992-4.317184-22.831104-13.058048-31.391744-8.634368-8.830976-19.144704-13.172736-31.408128-13.172736h-133.36576c-12.288 0-22.77376-4.21888-31.432704-13.041664-8.740864-8.568832-13.074432-19.16928-13.074432-31.391744V612.88448c0-12.361728-4.333568-22.822912-13.058048-31.522816C83.615744 572.669952 73.138176 568.32 60.874752 568.32c-12.288 0-22.765568 4.349952-31.432704 13.041664C20.717568 590.061568 16.384 600.530944 16.384 612.88448V746.184704c0 36.82304 13.017088 68.206592 39.07584 94.28992C81.5104 866.566144 112.934912 879.616 149.757952 879.616h0.08192L283.205632 879.616zM92.233728 186.638336c8.732672-8.699904 13.058048-19.16928 13.058048-31.391744v-133.431296c0-12.230656 4.317184-22.69184 13.058048-31.391744 8.68352-8.68352 19.152896-13.041664 31.424512-13.041664H283.19744c12.263424 0 22.765568-4.34176 31.440896-13.041664 8.716288-8.691712 13.041664-19.16928 13.041664-31.522816 0-12.230656-4.325376-22.69184-13.041664-31.391744-8.68352-8.691712-19.16928-13.041664-31.440896-13.041664H149.774336c-36.831232 0-68.231168 13.041664-94.306304 39.133184C29.401088-46.522368 16.384-15.007744 16.384 21.807104V155.11552c0 12.230656 4.317184 22.831104 13.041664 31.522816 8.68352 8.699904 19.16928 13.041664 31.424512 13.041664h-0.04096c12.279808 0.008192 22.749184-4.34176 31.424512-13.033472zM874.25024 879.484928c36.831232 0 68.23936-13.041664 94.28992-39.002112C994.59072 814.391296 1007.616 782.999552 1007.616 746.192896v-133.44768c0-12.222464-4.325376-22.822912-13.041664-31.37536C985.9072 572.522496 975.413248 568.32 963.13344 568.32c-12.271616 0-22.77376 4.210688-31.424512 13.041664-8.72448 8.56064-13.041664 19.161088-13.041664 31.383552v133.44768c0 12.222464-4.34176 22.683648-13.06624 31.37536-8.667136 8.699904-19.152896 13.049856-31.440896 13.049856H740.80256c-12.279808 0-22.77376 4.34176-31.424512 13.041664C700.653568 812.35968 696.32 822.820864 696.32 835.05152c0 12.36992 4.34176 22.822912 13.058048 31.522816C718.0288 875.266048 728.51456 879.616 740.80256 879.616l0.065536-0.131072h133.382144zM516.096 379.904m-155.648 0a155.648 155.648 0 1 1 311.296 0 155.648 155.648 0 1 1-311.296 0Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="huabi" unicode="&#59285;" d="M140.8 243.2c-4.242286-4.242286-8.557714-12.8-12.8-21.357714l-42.642286-213.284572a34.377143 34.377143 0 0 1 12.8-38.4 38.765714 38.765714 0 0 1 29.842286-12.8h8.557714l213.284572 42.642286a23.405714 23.405714 0 0 1 21.357714 12.8L844.8 486.4 614.4 716.8 140.8 243.2zM981.357714 640a38.765714 38.765714 0 0 1-12.8 29.842286L797.842286 840.557714a41.252571 41.252571 0 0 1-59.684572 0l-55.515428-55.515428 230.4-230.4 55.515428 55.515428a38.765714 38.765714 0 0 1 12.8 29.842286z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="mouse" unicode="&#58883;" d="M573.59 278.24l118.15-253.6c6.65-14.37 0.53-31.14-13.84-37.79l-103.25-48.17c-14.37-6.65-31.13-0.53-37.79 13.84l-120.8 259.19L267.3 62.960000000000036c-11.18-11.18-29.01-11.18-40.18 0-5.32 5.32-8.25 12.51-8.25 20.22V803.53c0 15.7 12.77 28.47 28.47 28.47 7.19 0 13.84-2.66 19.16-7.45l529.28-481.38c11.71-10.64 12.51-28.47 1.86-40.18-4.79-5.32-11.71-8.78-18.89-9.31l-205.16-15.44z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="xiayiye" unicode="&#59019;" d="M262.3386 833.6323 762.3127 383.6508 262.3386-66.3255Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="shangyiye" unicode="&#59022;" d="M779.704065 749.884155c0.082888 12.881378-1.100054 22.822798-9.91993 31.327496-1.528819 1.482771-3.160993 2.758834-4.880147 3.923356-5.882987 4.114714-13.130042 6.578836-20.979824 6.578836-10.750855 0-16.845667-4.072759-26.91193-11.800767L254.198469 437.507658c-7.198959-6.944156-10.700713-16.087397-10.559497-25.195845-0.14224-9.108448 3.360538-18.252713 10.559497-25.195845l464.578967-343.721389c17.667382-13.287631 36.927027-13.623275 51.006697 0 8.819876 8.516977 10.214642 19.716041 9.91993 31.331589L779.704065 749.884155z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="shuangye" unicode="&#58958;" d="M848.266092 813.673993 175.733908 813.673993c-61.922305 0-112.089891-50.207495-112.089891-112.087844l0-635.169227c0-61.920258 50.167586-112.089891 112.089891-112.089891l672.532183 0c61.916165 0 112.087844 50.169633 112.087844 112.089891L960.353936 701.585125C960.353936 763.465474 910.182256 813.673993 848.266092 813.673993zM138.371976 66.415898 138.371976 701.585125c0 20.650319 16.744359 37.362956 37.362956 37.362956l298.903647 0 0-709.895139L175.733908 29.052942C155.116335 29.053965 138.371976 45.762509 138.371976 66.415898zM885.629048 66.415898c0-20.654412-16.748453-37.362956-37.362956-37.362956L549.363468 29.052942 549.363468 738.948081l298.903647 0c20.614503 0 37.362956-16.712637 37.362956-37.362956L885.630071 66.415898zM213.096864 552.133302l186.813756 0 0-37.362956-186.813756 0 0 37.362956ZM213.096864 402.682501l186.813756 0 0-37.362956-186.813756 0 0 37.362956ZM213.096864 253.229654l186.813756 0 0-37.362956-186.813756 0 0 37.362956ZM624.088356 552.133302l186.813756 0 0-37.362956-186.813756 0 0 37.362956ZM624.088356 402.682501l186.813756 0 0-37.362956-186.813756 0 0 37.362956ZM624.088356 253.229654l186.813756 0 0-37.362956-186.813756 0 0 37.362956Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="danyemoban" unicode="&#59481;" d="M801.757337 887.402181h-70.842465v-0.201591H145.744385c-36.021401 0-65.225537-29.196972-65.225537-65.214281v-876.16193c0-36.028565 29.204136-65.225537 65.225537-65.225537h732.507136c36.025495 0 65.22963 29.207206 65.229631 65.225537V745.714182L801.757337 887.402181z m69.313645-878.988302c0-30.886451-24.296359-55.916521-54.284347-55.91652H207.208249c-29.987988 0-54.284347 25.029046-54.284347 55.91652V759.395786c0 30.876218 24.296359 55.909357 54.284347 55.909357h523.706623v-140.42524h140.15611v-666.466024zM695.120644 599.797881H328.875263c-18.028609 0-32.624025-14.598486-32.624025-32.609699v-6.681166c0-18.011212 14.594393-32.616862 32.624025-32.616862h366.244358c18.011212 0 32.605605 14.605649 32.605605 32.616862v6.681166c0.001023 18.011212-14.594393 32.609699-32.604582 32.609699z m0-215.703737H328.875263c-18.028609 0-32.624025-14.598486-32.624025-32.598442v-6.691399c0-18.011212 14.594393-32.605605 32.624025-32.605606h366.244358c18.011212 0 32.605605 14.594393 32.605605 32.605606v6.691399c0.001023 17.999956-14.594393 32.598442-32.604582 32.598442z m0-215.694527H328.875263c-18.028609 0-32.624025-14.608719-32.624025-32.605605v-6.695493c0-18.007119 14.594393-32.605605 32.624025-32.605605h366.244358c18.011212 0 32.605605 14.598486 32.605605 32.605605v6.695493c0.001023 17.996886-14.594393 32.605605-32.604582 32.605605z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="lingdang" unicode="&#58899;" d="M257.7 243.70000000000005h510.6c17.9 0 32.5 14.5 32.5 32.5V480.9c0 143.2-104.6 261.9-241.5 284 2.1 5.5 3.3 11.6 3.3 17.8 0 27.4-22.2 49.6-49.6 49.6s-49.6-22.2-49.6-49.6c0-6.3 1.2-12.3 3.3-17.8-136.9-22.1-241.5-140.9-241.5-284v-204.7c0-17.9 14.6-32.5 32.5-32.5zM513-63.60000000000002c44.4 0 80.3 36 80.3 80.3H432.7c0-44.4 35.9-80.3 80.3-80.3zM911.7 115L895 148.29999999999995c-14.8 29.7-47.7 52.1-74.5 52.1h-615c-26.8 0-59.7-22.4-74.5-52.1L114.3 115c-17.5-35.1-6.6-65.9 25.9-65.9h745.6c32.5 0 43.5 30.8 25.9 65.9z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="yidongdaozu" unicode="&#59005;" d="M904.448 270.272 119.616 270.272c-23.68 0-44.736-14.656-52.48-36.48C65.024 227.968 64 221.952 64 216c0-16.32 7.616-32.192 21.184-42.688l293.248-225.728c24.128-18.56 59.008-14.464 78.016 9.088 18.944 23.552 14.848 57.664-9.28 76.224L288 156.544l616 0c30.72 0 56 29.44 56 59.456C960 246.016 935.168 270.272 904.448 270.272zM119.552 497.728l784.832 0c23.68 0 44.736 14.656 52.48 36.48C958.976 540.032 960 546.048 960 552c0 16.32-7.616 32.192-21.184 42.688l-293.248 225.728c-24.128 18.56-59.008 14.464-78.016-9.088C548.608 787.776 552.64 753.6 576.832 735.04L736 611.456 120 611.456C89.28 611.456 64 582.016 64 552 64 521.984 88.832 497.728 119.552 497.728z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="shanchu" unicode="&#59474;" d="M736.653061-33.959184H287.346939c-45.97551 0-83.591837 37.616327-83.591837 83.591837V540.734694h616.489796v-491.102041c0-45.97551-37.616327-83.591837-83.591837-83.591837zM245.55102 498.938776v-449.306123c0-22.987755 18.808163-41.795918 41.795919-41.795918h449.306122c22.987755 0 41.795918 18.808163 41.795919 41.795918V498.938776H245.55102zM407.510204 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM616.489796 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM846.367347 498.938776H177.632653c-45.97551 0-83.591837 37.616327-83.591837 83.591836v31.346939c0 45.97551 37.616327 83.591837 83.591837 83.591837h668.734694c45.97551 0 83.591837-37.616327 83.591837-83.591837v-31.346939c0-45.97551-37.616327-83.591837-83.591837-83.591836zM177.632653 655.673469c-22.987755 0-41.795918-18.808163-41.795918-41.795918v-31.346939c0-22.987755 18.808163-41.795918 41.795918-41.795918h668.734694c22.987755 0 41.795918 18.808163 41.795918 41.795918v31.346939c0 22.987755-18.808163 41.795918-41.795918 41.795918H177.632653zM650.44898 655.673469h-276.89796c-28.734694 0-52.244898 23.510204-52.244898 52.244898v41.795919c0 28.734694 23.510204 52.244898 52.244898 52.244898h276.89796c28.734694 0 52.244898-23.510204 52.244898-52.244898v-41.795919c0-28.734694-23.510204-52.244898-52.244898-52.244898z m-276.89796 104.489796c-5.746939 0-10.44898-4.702041-10.448979-10.448979v-41.795919c0-5.746939 4.702041-10.44898 10.448979-10.448979h276.89796c5.746939 0 10.44898 4.702041 10.448979 10.448979v41.795919c0 5.746939-4.702041 10.44898-10.448979 10.448979h-276.89796z"  horiz-adv-x="1024" />

src/renderer/src/plugins/fabric/event/clickEvent.js

@@ -135,7 +135,6 @@ export class CanvasClickEvent {
               //   autoDrawData.resetLoadedSVG()
               //   this.mouseDownTime = new Date().getTime()
               // }
-              console.log('xxxx')
               this.isDrawBasic = true
               break
             default:
@@ -211,7 +210,6 @@ export class CanvasClickEvent {
       }
       // zdg: 基础画笔 保存数据
       if (this.isDrawBasic) FabricVue.history?.saveState()
-      window.test = FabricVue
     })
 
     canvas?.on('mouse:dblclick', (e) => {

src/renderer/src/store/modules/draw.js

@@ -156,7 +156,7 @@ export const useDrawStore = defineStore(
   {
     state() {
       return {
-        drawWidth: 10,
+        drawWidth: 1,
         drawColors: ['#000000'],
         shadowWidth: 0,
         shadowColor: '#000000',

src/renderer/src/utils/tool.js

@@ -2,23 +2,43 @@
  * @description: electron 封装的工具函数
  */
 const { ipcRenderer } = window.electron || {}
-
+// const {getCurrentWindow,BrowserWindow, shell, app} = require('@electron/remote');
+import remote from '@electron/remote'
+const remote = require('@electron/remote')
+console.log('xxxxx ', remote)
 /**
+ * @description 消息发送-nodejs 消息发送
  * @form src/main/tool.js 来源
- * @description 创建工具
+ * @param {*} key 消息key 
- * @param {*} key 消息头
+ *  tool-sphere:create 创建-悬浮球
- *  create-tool-sphere 创建-悬浮球 | url:路由地址,width:窗口宽度,height:窗口高度,option:自定义选项
  * @param {*} data 参数 
+ *  url:路由地址,width:窗口宽度,height:窗口高度,option:自定义选项
+ * @returns 
  */
-export function createTools(key, data) {
+export function ipcMsgSend(key, data) {
-  const msgKey = `create-tool-${key}` // 消息头
-  const msgKeyRes = `${msgKey}-reply` // 消息头-返回结果
   return new Promise((resolve) => {
     // 返回结果-监听
-    ipcRenderer.once(msgKeyRes, async (e, res) => {
+    ipcRenderer.once(`${key}-reply`, (e, res) => {
       resolve(res)
     })
     // 发送消息
-    ipcRenderer.send(msgKey, data)
+    ipcRenderer.send(key, data)
   })
 }
+
+export function test() {
+  // console.log(BrowserWindow)
+  // const win = new BrowserWindow({
+  //   width: 400, height: 400
+  // })
+  // win.loadURL('https://www.baidu.com')
+  // win.show()
+  // win.on('close', () => {
+  //   win = null
+  // })
+  // const url = app.getPath('userData')+'/123.pdf'
+  // console.log(app.getPath('userData'))
+  // shell.openExternal(url)
+  const win = getCurrentWindow()
+  console.log(win)
+}

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

@@ -16,6 +16,7 @@
   </div>
   <!-- 上传弹窗 -->
   <uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
+  <!-- <el-button @click="testClick">测试</el-button> -->
 </template>
 
 <script setup>
@@ -26,19 +27,19 @@ 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'
+import { ipcMsgSend, test } from '@/utils/tool'
 
 const sourceStore = useResoureStore()
 const isDialogOpen = ref(false)
-
+const testClick = () => {console.log('xxxx');test()}
 const openDialog = () => {
   isDialogOpen.value = true
 }
-// onMounted(async () => {
+onMounted(async () => {
-//   const params = { url: '/tool/sphere', width: 400, height: 400 }
+  // const params = { url: '/tool/sphere' }
-//   const res = await createTools('sphere', params)
+  // const res = await ipcMsgSend('tool-sphere:create', params)
   // console.log('消息返回：', res)
-// })
+})
 // 查询
 const getData = (data) => {
   const { textBook, node } = data

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

@@ -1,29 +1,102 @@
 <template>
-  <div>
+  <div class="warp-all">
-    xxxxx
+
+    <el-row class="tool-bottom-all">
+      <el-col :span="3" class="flex justify-center items-center">
+        <div class="c-logo">
+          <el-image :src="logo"></el-image>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block
+          @change="tabChange">
+          <template #default="{item}">
+            <div class="c-btn flex flex-col items-center gap-2 p-2">
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{item.label}}</span>
+            </div>
+          </template>
+        </el-segmented>
+      </el-col>
+    </el-row>
   </div>
-  <canvas ref="canvasRef" />
 </template>
 
 <script setup>
 // 功能说明：electron 悬浮球
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
-import { FabricVue } from '@/plugins/fabric'
+import logo from '@root/resources/icon.png'
-// import * as fabricStore from '@/store/modules/draw'
+const tabActive = ref('select')
-// let useDrawStore = fabricStore.useDrawStore()
+const btnList = [
-// console.log(useDrawStore)
+  { label: '选择', value: 'select', icon: 'icon-mouse' },
-let canvasRef = ref(null)
+  { label: '画笔', value: 'brush', icon: 'icon-huabi' },
+  { label: '板擦', value: 'eraser', icon: 'icon-xiangpica' },
+  { label: '互动', value: 'interact', icon: 'icon-hudong' },
+  { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
+  { label: '更多', value: 'more', icon: 'icon-xiazai9' },
+]
 
-onMounted(() => {
+// ==== 方法 ===
-  console.log(canvasRef, FabricVue)
+const tabChange = (val) => { // 切换tab-change
-  if (canvasRef.value) {
+  console.log(val)
-    const option = { width: 900, height: 900 }
+  switch (val) {
-    FabricVue.initCanvas(canvasRef.value, option)
+    case 'brush':
+      break
+    case 'eraser':
+      break
+    case 'interact':
+      break
+    case 'focus':
+      break
+    case 'more':
+      break
+    default:
+      break
+  }
 }
-})
-
 </script>
 
 <style lang="scss" scoped>
-
+.warp-all{
+  position: relative;
+}
+// 底部工具栏
+.tool-bottom-all{
+  width: 45vw;
+  position: fixed;
+  bottom: 3em;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f5f7fa;
+  border-radius: 50px;
+  // box-shadow: var(--el-box-shadow-light);
+  box-shadow: 0px 0px 12px rgb(0 0 0 / 24%);
+  .c-logo{
+    padding: 1rem;
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgb(0 0 0 / 40%);
+    position: absolute;
+    left: 0;
+  }
+  .c-btn{
+    i{font-size: 2rem;}
+  }
+  .c-btns{
+    :deep(.el-segmented__item){
+      position: relative;
+      margin: 0 0.5rem;
+      &:nth-last-child(1):before,
+      &:nth-last-child(2):before{
+        content: "";
+        width: 2px;
+        height: calc(100% - 20px);
+        background: var(--el-border-color-light);
+        position: absolute;
+        left: -8px;
+      }
+    }
+  }
+}
 </style>

src/renderer/src/views/tool/test.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    xxxxx
+  </div>
+  <canvas ref="canvasRef" />
+</template>
+
+<script setup>
+// 功能说明：electron 悬浮球
+import { ref, onMounted } from 'vue'
+import { FabricVue } from '@/plugins/fabric'
+// import * as fabricStore from '@/store/modules/draw'
+// let useDrawStore = fabricStore.useDrawStore()
+// console.log(useDrawStore)
+let canvasRef = ref(null)
+
+onMounted(async() => {
+  console.log(canvasRef, FabricVue)
+  if (canvasRef.value) {
+    const option = { width: 400, height: 400, freeDrawingCursor: 'default' }
+    await FabricVue.initCanvas(canvasRef.value, option)
+    FabricVue.canvas.setWidth(500)
+    FabricVue.canvas.setHeight(500)
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>