状态管理-多窗口共享

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

@@ -5,21 +5,9 @@ import { defineStore } from 'pinia'
 
 export const useToolState = defineStore('tool', {
   state: () => ({
-    // 窗口状态
-    windowState: {
-      // 窗口是否最小化
-      isMinimize: false,
-      // 窗口是否最大化
-      isMaximize: false,
-      // 窗口是否关闭
-      isClose: false,
-      test: ''
-    }
+    model: 'select', // 悬浮球-当前模式
+    showBoardAll: false, // 全屏画板-是否显示
   }),
   actions: {
-    // 设置窗口状态
-    setWindowState(payload) {
-      if(!!payload)this.windowState = payload
-    }
   }
 })

src/renderer/src/views/tool/components/board.vue

@@ -1,6 +1,8 @@
 <template>
+  <div>
     <canvas ref="canvasRef" />
     <slot></slot>
+  </div>
 </template>
 <script setup>
 // 功能说明：画板

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

@@ -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,7 +27,7 @@
 
 <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' // 自定义指令-拖拽
@@ -39,6 +39,7 @@ const tabActive = ref('select') // 工具栏当前选中项
 const isFold = ref(false)       // 折叠工具栏
 const isDrag = ref(false)       // 开始拖拽
 const dragtime = ref(0)         // 拖拽时间-计算点击还是拖动
+const isShow = ref(false)
 const toolStore = useToolState()
 const btnList = [ // 工具栏按钮列表
   { label: '选择', value: 'select', icon: 'icon-mouse' },
@@ -50,14 +51,16 @@ const btnList = [ // 工具栏按钮列表
   // { label: '更多', value: 'more', icon: 'icon-xiazai9' },
 ]
 onMounted(() => {
-  // console.log('xxx: ', JSON.stringify(toolStore.windowState))
-  setTimeout(() => {
-    toolStore.windowState.test = '测试成功'
-  }, 2000);
+  // 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
@@ -75,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) {
@@ -87,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>