src/main/index.js

@@ -202,14 +202,8 @@ app.on('ready', () => {
   ipcMain.on('openWindow', (e, data) => {
     createLinkWin(data)
   })
-  // 新窗口创建-监听
+  // zdg: 消息监听
-  ipcMain.on('new-window', (e, data) => {
+  handleAll()
-    const { id, type } = data
-    const win = BrowserWindow.fromId(id)
-    win.type = type // 绑定独立标识
-    remote.enable(win.webContents) // 开启远程服务
-  })
-
   // 打开-登录窗口
   createLoginWindow()
 
@@ -226,3 +220,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)
+      }
+    }
+  })
+}

src/renderer/src/plugins/shareStore.js

@@ -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 
+    }
+  })
+}

src/renderer/src/store/index.js

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

src/renderer/src/store/modules/tool.js

@@ -0,0 +1,25 @@
+/**
+ * 工具类-窗口-状态管理
+ */
+import { defineStore } from 'pinia'
+
+export const useToolState = defineStore('tool', {
+  state: () => ({
+    // 窗口状态
+    windowState: {
+      // 窗口是否最小化
+      isMinimize: false,
+      // 窗口是否最大化
+      isMaximize: false,
+      // 窗口是否关闭
+      isClose: false,
+      test: ''
+    }
+  }),
+  actions: {
+    // 设置窗口状态
+    setWindowState(payload) {
+      if(!!payload)this.windowState = payload
+    }
+  }
+})

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

@@ -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 () => {
+// onMounted(async () => {
-  // const params = { url: '/tool/sphere' }
+//   console.log('toolStore: ', toolStore.windowState)
-  // 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)
-}
 // 查询
 const getData = (data) => {
   const { textBook, node } = data

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

@@ -30,15 +30,16 @@
 import { onMounted, ref, reactive } from 'vue'
 import logo from '@root/resources/icon.png' // logo
 import boardVue from './components/board.vue'  // 画板
-import vDrag from './directive/drag'
+import vDrag from './directive/drag' // 自定义指令-拖拽
-// const Remote = require('@electron/remote')  // remote对象
+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 toolStore = useToolState()
 const btnList = [ // 工具栏按钮列表
   { label: '选择', value: 'select', icon: 'icon-mouse' },
   { label: '画笔', value: 'brush', icon: 'icon-huabi' },
@@ -48,9 +49,15 @@ const btnList = [ // 工具栏按钮列表
   // { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
   // { label: '更多', value: 'more', icon: 'icon-xiazai9' },
 ]
+onMounted(() => {
+  // console.log('xxx: ', JSON.stringify(toolStore.windowState))
+  setTimeout(() => {
+    toolStore.windowState.test = '测试成功'
+  }, 2000);
+})
 // ==== 方法 ===
 const tabChange = (val) => { // 切换tab-change
-  console.log(val)
+  // console.log(val)
   switch (val) {
     case 'brush': // 画笔
       break