src/renderer/src/utils/tool.js

@@ -58,6 +58,12 @@ export function ipcMsgSend(key, data, type) {
     return ipcRenderer?.invoke(key, data)
   }
 }
+export function ipcMsgSend2(key, ...args) {
+  return ipcRenderer?.send(key, ...args)
+}
+export function ipcMsgInvoke(key, ...args) {
+  return ipcRenderer?.invoke(key, ...args)
+}
 /**
  * @description 封装ipcRenderer事件监听
  * @param {*} fn on once handle invoke
@@ -197,9 +203,9 @@ const eventHandles = (type, win) => {
       const setIgnore = (_, ignore) => {win.setIgnoreMouseEvents(ignore, {forward: true})}
       Remote.ipcMain.handle('tool-sphere:set:ignore', setIgnore) // 异步
       // 关闭窗口
-      Remote.ipcMain.once('tool-sphere:close', () => { win&&win.destroy() })
+      Remote.ipcMain.handleOnce('tool-sphere:close', () => {win&&win.destroy()})
-      // 放大监听-测试
+      // // 放大监听-测试
-      Remote.ipcMain.once('maximize-window', () => {win&&win.destroy()})
+      // Remote.ipcMain.once('maximize-window', () => {win&&win.destroy()})
       const on = {
         onClosed: () => {
           Remote.ipcMain.removeHandler('tool-sphere:set:ignore', setIgnore)

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

@@ -38,7 +38,7 @@ const props = defineProps({
       { label: '资源', prop: 'resource', icon: 'icon-hudong' },
       { label: '互动', prop: 'interact', icon: 'icon-hudong' },
       { label: '窗口', prop: 'win', icon: 'icon-hudong' },
-      { label: '下课', prop: 'over', icon: 'icon-hudong' },
+      { label: '下课', prop: 'over', isExtra: true, icon: 'icon-hudong' },
     ]
   }
 })
@@ -71,12 +71,14 @@ const getStyle = (style,index) => {
 }
 // 事件
 const clickHandel = (o, e) => {
-  const node = e.target.parentNode.getBoundingClientRect()
+  if (!o.isExtra) { // 忽略其他操作: 打开内容窗口，指示器指向当前
-  const isColse = activeObj.value && activeObj.value.prop === o.prop && isVisible.value
+    const node = e.target.parentNode.getBoundingClientRect()
-  isVisible.value = !isColse // 相同的按钮且打开状态，点击关闭
+    const isColse = activeObj.value && activeObj.value.prop === o.prop && isVisible.value
-  activeObj.value = o
+    isVisible.value = !isColse // 相同的按钮且打开状态，点击关闭
-  const nodeH = parseInt(node.height / 2) // 高度的一半
+    activeObj.value = o
-  topPos.value = parseInt(node.top) - posBtnAll.top + nodeH
+    const nodeH = parseInt(node.height / 2) // 高度的一半
+    topPos.value = parseInt(node.top) - posBtnAll.top + nodeH
+  }
   emit('change', o)
 }
 </script>

src/renderer/src/views/tool/directive/ignore.js

@@ -29,7 +29,8 @@ class Ignore {
     })
   }
   changeHandle(e) {
-    const customEvent = new CustomEvent('ignore-mounted', {detail:{ignore: this, e}})
+    const data = {detail:{ignore: this, e, type: e.type}}
+    const customEvent = new CustomEvent('ignore-mounted', data)
     this.el.dispatchEvent(customEvent)
   }
 }

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

@@ -3,7 +3,7 @@
     <!-- 画板 -->
     <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
     <!-- 侧边工具栏 -->
-    <side-vue v-ignore></side-vue>
+    <side-vue v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue>
     <!-- 底部工具栏  :style="dataPos.style"-->
     <div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
       <div v-drag="{handle:'.tool-bottom-all', dragtime}"
@@ -36,7 +36,7 @@ import sideVue from './components/side.vue'  // 画板-子组件
 import vDrag from './directive/drag' // 自定义指令-拖拽
 import vIgnore from './directive/ignore' // 自定义指令-穿透
 import { useToolState } from '@/store/modules/tool'
-import { ipcMsgSend, ipcHandle, ipcMain } from '@/utils/tool' // 相关工具
+import { ipcMsgSend, ipcHandle, ipcMain, ipcMsgInvoke } from '@/utils/tool' // 相关工具
 const tabActive = ref('select')   // 工具栏当前选中项
 const isFold = ref(false)         // 折叠工具栏
 const isDrag = ref(false)         // 开始拖拽
@@ -53,44 +53,70 @@ const btnList = [ // 工具栏按钮列表
   // { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
   // { label: '更多', value: 'more', icon: 'icon-xiazai9' },
 ]
-// 页面加载完毕
+// === 页面加载完毕 ===
 onMounted(async() => {
   resetStatus() // 开启重置状态-监听
 })
-// const test = (e) => { console.log('test', e) }
+
+
 // ==== 方法 ===
-const tabChange = (val) => { // 切换tab-change
+// const test = (e) => { console.log('test', e) }
+// 切换tab-change
+const tabChange = (val) => {
   const bool = !toolStore.isPdfWin && !toolStore.showBoardAll
   if(bool) toolStore.showBoardAll = true
   // ipcMsgSend('tool-sphere:close')
   toolStore.model = val // 存储当前tab
 }
-const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
+// logo 点击-事件 折叠|展开
+const logoHandle = (e,t) => {
   if (Date.now() - dragtime.value < 200) {
     isFold.value = !isFold.value
   }
 }
-const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
+// 底部工具栏：移入移出-是否穿透
+const mouseChange = (bool) => {
   let resBool = false
   if (tabActive.value == 'select') resBool = !!bool
   if (!isShow.value) resBool = !!bool
   setIgnore(resBool)
 }
-const setIgnore = (bool) => { // 忽略鼠标穿透
+// 忽略鼠标穿透
-  ipcMsgSend('tool-sphere:set:ignore', bool)
+const setIgnore = (bool) => {ipcMsgSend('tool-sphere:set:ignore', bool)}
-}
+// 重置状态: 鼠标|画板
-const resetStatus = () => { // 重置状态
+const resetStatus = () => {
   if (toolStore.isToolWin) return // 已经打开过-忽略
   ipcMain?.handle?.('tool-sphere:reset', () => {
     setTimeout(() => {
       boardVueRef.value.handleMode(tabActive.value)
-      mouseChange(1) 
+      mouseChange(1)
     }, 500)
   })
   toolStore.isToolWin = true // 标记状态
 }
+// 侧边工具栏: 移入移出
+const sideMouse = e => {
+  const {type} = e.detail
+  mouseChange(type == 'mouseleave')
+}
+// 侧边工具栏: 操作变化
+const sideChange = o => {
+  // console.log(o)
+  switch(o.prop) {
+    case 'resource': // 资源
+      break
+    case 'interact': // 互动
+      break
+    case 'win':      // 窗口
+      break
+    case 'over':     // 下课
+      ipcMsgSend('tool-sphere:close')
+      break
+  }
+}
 
-watchEffect(() => { // 监听
+// === 监听器 ===
+watchEffect(() => {
   // 不同的时候, 更新值: 是否显示-画板  
   const show = !toolStore.isPdfWin && toolStore.showBoardAll
   if (show != isShow.value) isShow.value = show