From d50d4722aaca5aabd157b7a47ce764c3d2f5a450 Mon Sep 17 00:00:00 2001 From: zdg Date: Fri, 26 Jul 2024 12:48:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=82=AC=E6=B5=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/index.js | 16 +- src/main/tool.js | 14 +- src/renderer/src/router/tool.js | 6 + src/renderer/src/store/modules/draw.js | 11 +- src/renderer/src/utils/tool.js | 146 +++++++++++++++--- src/renderer/src/views/resource/index.vue | 11 +- .../src/views/tool/components/board.vue | 24 +++ src/renderer/src/views/tool/sphere.vue | 28 +++- src/renderer/src/views/tool/test.vue | 16 +- 9 files changed, 207 insertions(+), 65 deletions(-) create mode 100644 src/renderer/src/views/tool/components/board.vue diff --git a/src/main/index.js b/src/main/index.js index f50e06d..ed679a1 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -3,10 +3,11 @@ import { join } from 'path' import { electronApp, optimizer, is } from '@electron-toolkit/utils' import icon from '../../resources/icon.png?asset' import File from './file' -import * as Tool from './tool' // 代理 electron/remote -import remote from '@electron/remote/main' // 第一步：引入remote -remote.initialize() // 第二步： 初始化remote +// 第一步：引入remote +import remote from '@electron/remote/main' +// 第二步： 初始化remote +remote.initialize() File({ app, shell, BrowserWindow, ipcMain }) @@ -63,6 +64,9 @@ function createMainWindow() { mainWindow.on('ready-to-show', () => { mainWindow.show() }) + mainWindow.on('closed', () => { + mainWindow = null + }) mainWindow.webContents.setWindowOpenHandler((details) => { shell.openExternal(details.url) return { action: 'deny' } @@ -74,6 +78,8 @@ function createMainWindow() { } else { mainWindow.loadFile(join(__dirname, '../renderer/index.html')) } + // mainWindow.setAlwaysOnTop(true, "screen-saver") // 将窗口设置为顶层窗口 + // mainWindow.setVisibleOnAllWorkspaces(true) // 如果窗口在所有工作区都可见 // 第三步： 开启remote服务 remote.enable(mainWindow.webContents) } @@ -162,7 +168,6 @@ app.on('ready', () => { } loginWindow.destroy() loginWindow = null - Tool.setWin({mainWindow}) // 将主窗口传递到工具类中 }) // 打开登录窗口 ipcMain.on('openLoginWindow', () => { @@ -178,8 +183,7 @@ app.on('ready', () => { ipcMain.on('openWork', (e, data) => { createWork(data) }) - // zdg: 创建工具窗口-如 悬浮球 - Tool.init() + // 打开-登录窗口 createLoginWindow() app.on('activate', function () { diff --git a/src/main/tool.js b/src/main/tool.js index 27bea98..8be3a66 100644 --- a/src/main/tool.js +++ b/src/main/tool.js @@ -14,7 +14,6 @@ let allWindow = {} export function init() { // 创建工具-悬浮球 ipcMain.on('tool-sphere:create', async(e, data) => { - console.log('xxx', allWindow) // console.log('测试xxxx', data) await createTools(data) // 执行逻辑 e.reply('tool-sphere:create-reply', {code: 200, msg: 'success'}) // 返回结果 @@ -56,7 +55,7 @@ export function init() { // url = 'https://www.baidu.com' console.log(urlAll) win.loadURL(urlAll) - // win.setFullScreen(true) // 设置窗口为全屏 + win.setFullScreen(true) // 设置窗口为全屏 win.setIgnoreMouseEvents(true) // 忽略鼠标事件|使窗口不可选中 win.once('ready-to-show', () => { win.show() @@ -77,14 +76,3 @@ export function setWin(win = {}) { }) } } - -// 工具窗口-特殊区域恢复鼠标 -function toolMouse(toolWin) { - ipcMain.on('tool-mouse', (e, data) => { - const { id } = data - const win = allWindow[id] - if (win) { - win.setIgnoreMouseEvents(false) - } - }) -} diff --git a/src/renderer/src/router/tool.js b/src/renderer/src/router/tool.js index a99c5a2..ef55df0 100644 --- a/src/renderer/src/router/tool.js +++ b/src/renderer/src/router/tool.js @@ -13,6 +13,12 @@ export const toolRouters = [ name: 'toolSphere', meta: {title: '悬浮球'} }, + { + path: 'test', + component: () => import('@/views/tool/test.vue'), + name: 'toolTest', + meta: {title: '测试'} + }, ] }, { diff --git a/src/renderer/src/store/modules/draw.js b/src/renderer/src/store/modules/draw.js index fc28064..bf486e1 100644 --- a/src/renderer/src/store/modules/draw.js +++ b/src/renderer/src/store/modules/draw.js @@ -118,6 +118,7 @@ export const useBoardStore = defineStore( // init background | 初始化背景 initBackground() { const backgroundColor = FabricVue?.canvas?.backgroundColor + console.log('xxxx', backgroundColor, FabricVue?.canvas) if (backgroundColor && typeof backgroundColor === 'string') { const type = colorUtils.getColorFormat(backgroundColor) if (type === 'hex') { @@ -131,9 +132,13 @@ export const useBoardStore = defineStore( this.backgroundOpacity = opacity } } else if (FabricVue?.canvas) { - FabricVue.canvas.backgroundColor = 'rgba(255, 255, 255, 1)' - this.backgroundColor = 'rgba(255, 255, 255, 1)' - this.backgroundOpacity = 1 + if (this.backgroundColor) { + FabricVue.canvas.backgroundColor = this.backgroundColor + } else { + FabricVue.canvas.backgroundColor = 'rgba(255, 255, 255, 1)' + this.backgroundColor = 'rgba(255, 255, 255, 1)' + this.backgroundOpacity = 1 + } } const backgroundImage = FabricVue?.canvas?.backgroundImage diff --git a/src/renderer/src/utils/tool.js b/src/renderer/src/utils/tool.js index 4132cf8..55070f4 100644 --- a/src/renderer/src/utils/tool.js +++ b/src/renderer/src/utils/tool.js @@ -1,11 +1,16 @@ /** * @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) +// const { ipcRenderer } = window.electron || {} +// import { ipcRenderer } from 'electron' // 渲染器里面可以使用ipcRenderer +// const path = require('path') +const Remote = require('@electron/remote') + +// 常用变量 +const BaseUrl = process.env['ELECTRON_RENDERER_URL']+'/#' +const isDev = process.env.NODE_ENV !== 'production' + + /** * @description 消息发送-nodejs 消息发送 * @form src/main/tool.js 来源 @@ -25,20 +30,117 @@ export function ipcMsgSend(key, 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) -} \ No newline at end of file +/** + * 创建-窗口 调用该方法 + * @param {*} type 类型 + * tool-sphere 创建-悬浮球 + * @param {*} data 参数 + * @returns + */ +export const createWindow = async (type, data) => { + if (!type) return console.error('createWindow: type is null') + switch(type) { + case 'tool-sphere': { // 创建-悬浮球 + const option = data.option||{} + const defOption = { + frame: false, // 要创建无边框窗口 + resizable: false, // 禁止窗口大小缩放 + transparent: true, // 设置透明 + alwaysOnTop: true, // 窗口是否总是显示在其他窗口之前 + // parent: mainWin, // 父窗口 + // autoClose: true, // 关闭窗口后自动关闭 + } + data.option = {...defOption, ...option} + const win = await toolWindow(data) + win.show() + win.setFullScreen(true) // 设置窗口为全屏 + win.setIgnoreMouseEvents(true, {forward: true}) // 忽略鼠标事件但是事件继续传递给窗口 + win.setAlwaysOnTop(true,'screen-saver') // 将窗口设置为顶层窗口 + win.setVisibleOnAllWorkspaces(true) // 如果窗口在所有工作区都可见 + // win.webContents.openDevTools() // 打开调试工具 + eventHandles(type, win) // 事件监听处理 + return win + } + default: + break + } +} +/** + * @description: 基础-创建工具-窗口 + * @param {*} url 路由地址 + * @param {number} [width=800] 窗口宽度 + * @param {number} [height=600] 窗口高度 + * @param {{}} [option={}] 自定义选项 + * @author: zdg + * @date 2021-07-05 14:07:01 + */ +export function toolWindow({url, isFile, isConsole, option={}}) { + // width = window.screen.width + let width = option?.width || 800 + let height = option?.height || 600 + const mainWin = Remote.getCurrentWindow() // 获取主窗口对象 + const devUrl = `${BaseUrl}${url}` + const buildUrl = `file://${__dirname}/index.html${url}` + const urlAll = isDev ? devUrl : buildUrl + return new Promise((resolve) => { + const config = { + width, height, + type: 'toolbar', // 创建的窗口类型为工具栏窗口 + webPreferences: { + preload: '@root/src/preload/index.js', + nodeIntegration: true, // nodeApi调用 + contextIsolation: false, // 沙箱取消 + // webSecurity: false // 跨域关闭 + }, + ...option + } + // 创建-新窗口 + let win = new Remote.BrowserWindow(config) + if (!!isFile) win.loadFile(urlAll) // 加载文件 + else win.loadURL(urlAll) // 加载url + win.once('ready-to-show', () => {resolve(win)}) + // 主窗口关闭事件 + mainWin.once('closed', () => { win.destroy()}) + // 内部监听器 + win.webContents.on('did-finish-load', () => {}) + // 内部监听器-是否打印 + if (!!isConsole) { + win.webContents.on('console-message', (e,leve,m,lin,s) => { + console.log('console-msg: ', m) + }) + } + }) +} +/** + * 窗口创建-事件处理 + * @param {*} type 事件类型 + * @param {*} win 窗口对象 + */ +const eventHandles = (type, win) => { + // 公共方法 + const publicMethods = ({onClosed}) => { + // 监听关闭事件 + Remote.ipcMain.once('close-window', () => {win.destroy()}) + win.on('closed', () => {!!onClosed && onClosed();win = null}) + } + switch(type) { + case 'tool-sphere': { // 创建-悬浮球 + // 监听设置穿透 + const setIgnore = (_, ignore) => {win.setIgnoreMouseEvents(ignore, {forward: true})} + Remote.ipcMain.on('tool-sphere:set:ignore', setIgnore) + // 关闭窗口 + Remote.ipcMain.once('tool-sphere:close', () => { win.destroy() }) + // 放大监听-测试 + Remote.ipcMain.once('maximize-window', () => { + win.destroy() + console.log('关闭窗口') + }) + const on = { + onClosed: () => {Remote.ipcMain.off('tool-sphere:set:ignore', setIgnore)} + } + publicMethods(on) // 加载公共方法 + break} + default: + break + } +} diff --git a/src/renderer/src/views/resource/index.vue b/src/renderer/src/views/resource/index.vue index c46d0a3..66c7d30 100644 --- a/src/renderer/src/views/resource/index.vue +++ b/src/renderer/src/views/resource/index.vue @@ -16,7 +16,7 @@ - + 测试 + \ No newline at end of file diff --git a/src/renderer/src/views/tool/sphere.vue b/src/renderer/src/views/tool/sphere.vue index 86ff5c8..51d39dc 100644 --- a/src/renderer/src/views/tool/sphere.vue +++ b/src/renderer/src/views/tool/sphere.vue @@ -1,11 +1,10 @@