electron 代理

This commit is contained in:
zdg 2024-07-25 13:24:31 +08:00
parent 79d36ea6ba
commit d2a2510e09
19 changed files with 385 additions and 63 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -1,18 +1,23 @@
/** /**
* @description: electron 封装的工具函数 * @description: electron 封装的工具函数
* 消息整理
* tool-sphere:create 创建-悬浮球-窗口
*/ */
import { app, shell, BrowserWindow, ipcMain } from 'electron' import { app, shell, BrowserWindow, ipcMain } from 'electron'
import { is } from '@electron-toolkit/utils' import { is } from '@electron-toolkit/utils'
// const baseUrl = 'http://localhost:5173/#' // 开发环境使用 // const baseUrl = 'http://localhost:5173/#' // 开发环境使用
const baseUrl = process.env['ELECTRON_RENDERER_URL']+'/#' // 开发环境使用 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) // 执行逻辑 await createTools(data) // 执行逻辑
e.reply('create-tool-sphere-reply', {code: 200, msg: 'success'}) // 返回结果 e.reply('tool-sphere:create-reply', {code: 200, msg: 'success'}) // 返回结果
}) })
} }
/** /**
@ -24,18 +29,22 @@ export default function() {
* @author: zdg * @author: zdg
* @date 2021-07-05 14:07:01 * @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 devUrl = `${baseUrl}${url}`
const buildUrl = `file://${__dirname}/index.html${url}` const buildUrl = `file://${__dirname}/index.html${url}`
const urlAll = is.dev ? devUrl : buildUrl const urlAll = is.dev ? devUrl : buildUrl
return new Promise((resolve) => { return new Promise((resolve) => {
let win = new BrowserWindow({ let win = new BrowserWindow({
width, height, width, height,
type: 'toolbar', //创建的窗口类型为工具栏窗口 type: 'toolbar', // 创建的窗口类型为工具栏窗口
frame: false, //要创建无边框窗口 frame: false, // 要创建无边框窗口
resizable: false, //禁止窗口大小缩放 resizable: false, // 禁止窗口大小缩放
transparent: true, //设置透明 transparent: true, // 设置透明
alwaysOnTop: true, //窗口是否总是显示在其他窗口之前 alwaysOnTop: true, // 窗口是否总是显示在其他窗口之前
parent: mainWindow, // 父窗口
autoClose: true, // 关闭窗口后自动关闭
webPreferences: { webPreferences: {
nodeIntegration: true, // nodeApi调用 nodeIntegration: true, // nodeApi调用
contextIsolation: false, // 沙箱取消 contextIsolation: false, // 沙箱取消
@ -47,6 +56,8 @@ function createTools({url, width = 800, height = 600, option={}}) {
// url = 'https://www.baidu.com' // url = 'https://www.baidu.com'
console.log(urlAll) console.log(urlAll)
win.loadURL(urlAll) win.loadURL(urlAll)
// win.setFullScreen(true) // 设置窗口为全屏
win.setIgnoreMouseEvents(true) // 忽略鼠标事件|使窗口不可选中
win.once('ready-to-show', () => { win.once('ready-to-show', () => {
win.show() win.show()
resolve(win) 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)
}
})
}

View File

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

View File

@ -1,9 +1,9 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2794390 */ 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 { .iconfont {
@ -14,6 +14,54 @@
-moz-osx-font-smoothing: grayscale; -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 { .icon-yidongdaozu:before {
content: "\e67d"; content: "\e67d";
} }

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,90 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "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", "icon_id": "1207918",
"name": "移动到组", "name": "移动到组",

View File

@ -14,6 +14,30 @@
/> />
<missing-glyph /> <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="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" /> <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" />

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View File

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

View File

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

View File

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

View File

@ -16,6 +16,7 @@
</div> </div>
<!-- 上传弹窗 --> <!-- 上传弹窗 -->
<uploadDialog v-model="isDialogOpen" @submitFile="submitFile" /> <uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
<!-- <el-button @click="testClick">测试</el-button> -->
</template> </template>
<script setup> <script setup>
@ -26,19 +27,19 @@ import ResoureSearch from './container/resoure-search.vue'
import ResoureList from './container/resoure-list.vue' import ResoureList from './container/resoure-list.vue'
import uploadDialog from '@/components/upload-dialog/index.vue' import uploadDialog from '@/components/upload-dialog/index.vue'
import uploaderState from '@/store/modules/uploader' import uploaderState from '@/store/modules/uploader'
import { createTools } from '@/utils/tool' import { ipcMsgSend, test } from '@/utils/tool'
const sourceStore = useResoureStore() const sourceStore = useResoureStore()
const isDialogOpen = ref(false) const isDialogOpen = ref(false)
const testClick = () => {console.log('xxxx');test()}
const openDialog = () => { const openDialog = () => {
isDialogOpen.value = true 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) // console.log('', res)
// }) })
// //
const getData = (data) => { const getData = (data) => {
const { textBook, node } = data const { textBook, node } = data

View File

@ -1,29 +1,102 @@
<template> <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> </div>
<canvas ref="canvasRef" />
</template> </template>
<script setup> <script setup>
// electron // 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> </script>
<style lang="scss" scoped> <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> </style>

View File

@ -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>