ppt 上课优化

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

@@ -129,7 +129,7 @@ const sendHomework = (row,type) => {
 }
 //
 const closeHomework = async() => {
-  ipcMsgSend('tool-sphere:set:ignore', true)
+  // ipcMsgSend('tool-sphere:set:ignore', true)
 }
 
 

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

@@ -74,6 +74,7 @@ const list = computed(() => props.data.map((o,i) => {
 onMounted(() => {
   posBtnAll = btnRef.value.getBoundingClientRect()
   hPost.value = Math.round(posBtnAll.height)
+  // btnRef.value.style.marginTop = -hPost.value / 2 + 'px'
   curNode = sessionStore?.get?.('subject.curNode')
 })
 // === 方法 ===
@@ -101,7 +102,10 @@ const clickHandel = (o, e) => {
   emit('change', o)
 }
 const closeActive = () =>{
+  if (isVisible.value) { // 打开状态，关闭
     isVisible.value = false
+    emit('change', { prop: 'close' })
+  }
 }
 defineExpose({closeActive})
 </script>
@@ -111,8 +115,8 @@ defineExpose({closeActive})
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
+  z-index: 1;
   right: 10px;
-  //min-height: 40vh;
   min-width: 4em;
   border-radius: 4em;
   background-color: rgba(18,18,18,0.3);

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

@@ -1,5 +1,7 @@
 <template>
   <div class="warp-all">
+    <!-- 遮罩层 -->
+    <div class="mask" v-show="isMask" @click="maskChange(true)"></div>
     <!-- 画板 -->
     <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
 
@@ -62,7 +64,8 @@ const isDrag = ref(false)         // 开始拖拽
 const dragtime = ref(0)           // 拖拽时间-计算点击还是拖动
 const isShow = ref(false)         // 是否显示-画板
 const isOver = ref(false)         // 是否下课
-const isOpenBook = ref(false)
+const isOpenBook = ref(false)     // 是否打开pdf课本
+const isMask = ref(false)         // 是否显示遮罩层
 const toolStore = useToolState()  // 状态管理
 const boardVueRef=ref(null)       // 画板ref
 const upvoteRef = ref(null)       // 点赞 ref
@@ -93,7 +96,7 @@ onMounted(async() => {
   // window.test1 = toolStore
   getClassInfo()        // 获取课堂详情 ex3
   resetStatus()       // 开启重置状态-监听
- 
+ console.log(sideVueRef.value.isVisible)
 })
 
 // ==== 方法 ===
@@ -143,7 +146,7 @@ const logoHandle = (e,t) => {
 // 底部工具栏：移入移出-是否穿透
 const mouseChange = (bool) => {
   let resBool = false
-  console.log('mouseChange:', bool, resBool)
+  // console.log('mouseChange:', bool, resBool)
   if (!bool) return setIgnore(resBool) // 移入不穿透
   if (tabActive.value == 'select') resBool = !!bool
   else {
@@ -152,12 +155,10 @@ const mouseChange = (bool) => {
     const isPdf = !resBool && toolStore.isPdfWin
     if (isPdf) resBool = true
   }
-  console.log('mouseChange:', bool, resBool)
+  // console.log('mouseChange:', bool, resBool)
   setIgnore(resBool)
 }
-const touchChange = (e) => {
-  console.log(e)
-}
+
 // im-chat: 聊天事件 {type, data}
 const chatChange = (type, data, ...args) => {
   if (type == 'createGroup') {  // 创建群-监听
@@ -189,14 +190,6 @@ const setIgnore = (bool) => {ipcMsgSend('tool-sphere:set:ignore', bool)}
 // 重置状态: 鼠标|画板
 const resetStatus = () => {
   if (toolStore.isToolWin) return // 已经打开过-忽略
-  // 以下代码废弃-暂时无用
-  // ipcMain?.removeHandler('tool-sphere:reset') // 避免已绑定，先移除在绑定
-  // ipcMain?.handle?.('tool-sphere:reset', () => {
-  //   setTimeout(() => {
-  //     boardVueRef.value.handleMode(tabActive.value)
-  //     mouseChange(1)
-  //   }, 500)
-  // })
   toolStore.isToolWin = true // 标记状态
 }
 // 侧边工具栏: 移入移出
@@ -206,15 +199,10 @@ const sideMouse = e => {
     setIgnore(false) // 关闭窗口鼠标-穿透
     return
   }
-  mouseChange(type == 'mouseleave')
-  // // 关闭侧边工具内容窗口
-  // if (type == 'mouseleave') {
-  //   timingSide = setTimeout(() => {
-  //     sideVueRef.value.closeActive()
-  //   }, 500)
-  // } else { // 移入
-  //   if (!!timingSide) clearTimeout(timingSide)
-  // }
+  // 打开内容且触发移出事件时
+  const bool = isMask.value && type =='mouseleave'
+  if (bool) mouseChange(false) // 不穿透
+  else mouseChange(type == 'mouseleave')
 }
 // 侧边工具栏: 操作变化
 const sideChange = async o => {
@@ -230,7 +218,11 @@ const sideChange = async o => {
         isOpenBook.value = true
       }
       break
+    case 'close': // 关闭
+      maskChange(false)
+      break
     case 'resource': // 资源
+      isMask.value = !isMask.value
       break
     case 'interact': // 互动
       break
@@ -267,6 +259,13 @@ const sideChange = async o => {
   }
 }
 
+// 遮罩层-触发事件
+const maskChange = (bool) => {
+  isMask.value = false
+  bool && sideVueRef.value.closeActive() // 关闭侧边栏内容窗口
+  mouseChange(true)              // 允许穿透
+}
+
 // === 监听器 ===
 watchEffect(() => {
   if (isOver.value) return // 下课, 不往下执行
@@ -286,6 +285,12 @@ watchEffect(() => {
 .warp-all{
   position: relative;
 }
+// 遮罩层
+.mask{
+  position: fixed;
+  inset: 0;
+  background: rgba(1, 1, 1, 0.3);
+}
 // 底部工具栏
 .tool-bottom-all{
   // width: 45vw;
@@ -328,6 +333,7 @@ watchEffect(() => {
     }
   }
 }
+// 底部动画
 .a-fade-leave-active,.a-fade-enter-active{
   transition: all .3s;
 }