Merge pull request 'zdg' (#101) from zdg into main

Reviewed-on: #101
This commit is contained in:
zhengdegang 2024-08-05 17:49:43 +08:00
commit d64b469ac8
7 changed files with 109 additions and 28 deletions

View File

@ -205,14 +205,8 @@ app.on('ready', () => {
ipcMain.on('openWindow', (e, data) => {
createLinkWin(data)
})
// 新窗口创建-监听
ipcMain.on('new-window', (e, data) => {
const { id, type } = data
const win = BrowserWindow.fromId(id)
win.type = type // 绑定独立标识
remote.enable(win.webContents) // 开启远程服务
})
// zdg: 消息监听
handleAll()
// 打开-登录窗口
createLoginWindow()
@ -229,3 +223,24 @@ app.on('window-all-closed', () => {
app.quit()
}
})
// 监听全局事件
function handleAll() {
// 新窗口创建-监听
ipcMain.on('new-window', (e, data) => {
const { id, type } = data
const win = BrowserWindow.fromId(id)
win.type = type // 绑定独立标识
remote.enable(win.webContents) // 开启远程服务
})
// 用于监听-状态管理变化-同步所有窗口
ipcMain.handle('pinia-state-change', (e, storeName, jsonStr) => {
for(const curWin of BrowserWindow.getAllWindows()){
const id = curWin.webContents.id
const bool = id !== e.sender.id && !curWin.isDestroyed()
if (bool) { // 除了消息发送窗口和销毁的窗口 其他都发送
curWin.webContents.send('pinia-state-set', storeName, jsonStr)
}
}
})
}

View File

@ -0,0 +1,41 @@
/**
* 共享数据状态-多窗口
*/
const { ipcRenderer } = require('electron') // app使用
export function shareStorePlugin({store}) {
store.$subscribe(() => { // 自动同步
// 在存储变化的时候执行
const storeName = store.$id
// 用于多窗口共享(需要共享的状态名称)
const names = ['tool']
if (names.includes(storeName)) stateSync(store) // 需要同步
})
// 暴露方法-手动同步
store.stateSync = () => stateSync(store)
// 监听主线程消息-同步数据
stateChange(store)
}
// 同步数据-发送给主线程
function stateSync(store) {
const storeName = store.$id
const jsonStr = JSON.stringify(store.$state)
// 通知主线程更新
ipcRenderer.invoke('pinia-state-change', storeName, jsonStr)
}
// 同步数据-接收主线程消息
function stateChange(store) {
const storeName = store.$id
ipcRenderer.on('pinia-state-set', (e, sName, jsonStr) => {
if (sName == storeName) { // 更新对应数据
console.log('state-set', jsonStr, sName)
const curJson = JSON.stringify(store.$state) // 当前数据
const isUp = curJson != jsonStr // 不同的时候才写入,不然会导致触发数据变化监听,导致死循环
if (!isUp) return
const stateJson = JSON.parse(jsonStr) // 新数据
// 更新状态
store.$patch(stateJson)
// 您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态
// store.$state = stateJson
}
})
}

View File

@ -1,7 +1,9 @@
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { shareStorePlugin } from '@/plugins/shareStore'
const pinia = createPinia() //创建pinia实例
pinia.use(piniaPluginPersistedstate) //将插件添加到 pinia 实例上
pinia.use(shareStorePlugin) // 多窗口数据状态共享
export const store = pinia

View File

@ -0,0 +1,13 @@
/**
* 工具类-窗口-状态管理
*/
import { defineStore } from 'pinia'
export const useToolState = defineStore('tool', {
state: () => ({
model: 'select', // 悬浮球-当前模式
showBoardAll: false, // 全屏画板-是否显示
}),
actions: {
}
})

View File

@ -23,7 +23,6 @@
</div>
<!-- 上传弹窗 -->
<uploadDialog v-model="isDialogOpen" @submit-file="submitFile" />
<!-- <el-button @click="testClick">测试</el-button> -->
</template>
<script setup>
@ -35,22 +34,17 @@ import ResoureList from './container/resoure-list.vue'
import uploadDialog from '@/components/upload-dialog/index.vue'
import uploaderState from '@/store/modules/uploader'
import { createWindow } from '@/utils/tool'
//
import { useToolState } from '@/store/modules/tool'
const sourceStore = useResoureStore()
const isDialogOpen = ref(false)
const toolStore = useToolState()
const openDialog = () => {
isDialogOpen.value = true
}
onMounted(async () => {
// const params = { url: '/tool/sphere' }
// const res = await ipcMsgSend('tool-sphere:create', params)
// console.log('', res)
})
const testClick = async () => {
const win = await createWindow('tool-sphere', { url: '/tool/sphere' })
console.log('消息返回:', win)
}
// onMounted(async () => {
// console.log('toolStore: ', toolStore.windowState)
// })
//
const getData = (data) => {
const { textBook, node } = data

View File

@ -1,6 +1,8 @@
<template>
<canvas ref="canvasRef" />
<slot></slot>
<div>
<canvas ref="canvasRef" />
<slot></slot>
</div>
</template>
<script setup>
//

View File

@ -1,6 +1,6 @@
<template>
<div class="warp-all">
<board-vue v-model="tabActive"></board-vue>
<board-vue v-model="tabActive" v-show="isShow"></board-vue>
<!-- 底部工具栏 :style="dataPos.style"-->
<div class="tool-bottom-all"
@mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
@ -27,18 +27,20 @@
<script setup>
// electron
import { onMounted, ref, reactive } from 'vue'
import { onMounted, ref, reactive, watchEffect } from 'vue'
import logo from '@root/resources/icon.png' // logo
import boardVue from './components/board.vue' //
import vDrag from './directive/drag'
// const Remote = require('@electron/remote') // remote
import vDrag from './directive/drag' // -
import { useToolState } from '@/store/modules/tool'
const { ipcRenderer } = require('electron') // app使
// const ipcRenderer = { send: () => {} } // 使
const tabActive = ref('select') //
const isFold = ref(false) //
const isDrag = ref(false) //
const dragtime = ref(0)
const dragtime = ref(0) // -
const isShow = ref(false)
const toolStore = useToolState()
const btnList = [ //
{ label: '选择', value: 'select', icon: 'icon-mouse' },
{ label: '画笔', value: 'brush', icon: 'icon-huabi' },
@ -48,9 +50,17 @@ const btnList = [ // 工具栏按钮列表
// { label: '', value: 'focus', icon: 'icon-jujiao' },
// { label: '', value: 'more', icon: 'icon-xiazai9' },
]
onMounted(() => {
// isShow.value = toolStore.showBoardAll // -
// console.log('xxx: ', toolStore.model)
// setTimeout(() => {
// toolStore.windowState.test = ''
// }, 2000);
})
// ==== ===
const tabChange = (val) => { // tab-change
console.log(val)
// console.log('xxxx:', val)
toolStore.showBoardAll = true
switch (val) {
case 'brush': //
break
@ -68,6 +78,7 @@ const tabChange = (val) => { // 切换tab-change
default:
break
}
toolStore.model = val // tab
}
const logoHandle = (e,t) => { // logo - |
if (Date.now() - dragtime.value < 200) {
@ -80,6 +91,9 @@ const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
if (tabActive.value == 'select') resBool = !!bool
ipcRenderer.send('tool-sphere:set:ignore', resBool)
}
watchEffect(() => { //
isShow.value = toolStore.showBoardAll // -
})
</script>
<style lang="scss" scoped>