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

@@ -34,7 +34,7 @@
   </div>
 </template>
 <script setup>
-import { computed, defineProps, ref, reactive, watchEffect, onMounted } from 'vue'
+import { computed, defineProps, ref, reactive, watchEffect, onMounted} from 'vue'
 import { sessionStore } from '@/utils/store'
 import homework from './homework.vue';
 
@@ -100,10 +100,10 @@ const clickHandel = (o, e) => {
   }
   emit('change', o)
 }
-
 const closeActive = () =>{
   isVisible.value = false
 }
+defineExpose({closeActive})
 </script>
 <style lang="scss" scoped>
 .warp{
@@ -115,7 +115,13 @@ const closeActive = () =>{
   //min-height: 40vh;
   min-width: 4em;
   border-radius: 4em;
-  background-color: #121212;
+  background-color: rgba(18,18,18,0.3);
+  border-color: rgba(1, 1, 1, 0.1);
+  &:hover{
+    opacity: 1;
+    background-color: rgba(18,18,18,1);
+    border-color: rgba(1, 1, 1, 1);
+  }
   .el-space{margin: 20px 0 0;}
   .c-btn{
     color: #d9dce3;

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

@@ -4,7 +4,7 @@
     <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
 
     <!-- 侧边工具栏 -->
-    <side-vue v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue>
+    <side-vue ref="sideVueRef" v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue>
 
     <!-- 点赞组件 -->
     <upvote-vue ref="upvoteRef" type="2"></upvote-vue>
@@ -13,7 +13,7 @@
     <im-chat ref="imChatRef" @change="chatChange" group />
 
     <!-- 底部工具栏 -->
-    <div class="tool-bottom-all"
+    <!-- <div class="tool-bottom-all"
       @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
       <div v-drag="{handle:'.tool-bottom-all', dragtime}"
         @v-drag-start="dragtime = Date.now()">
@@ -34,7 +34,7 @@
           </el-segmented>
         </div>
       </transition>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -67,6 +67,7 @@ const toolStore = useToolState()  // 状态管理
 const boardVueRef=ref(null)       // 画板ref
 const upvoteRef = ref(null)       // 点赞 ref
 const imChatRef = ref(null)       // im-chat ref
+const sideVueRef = ref(null)      // 侧边栏 ref
 const classObj = reactive({       // 课程相关
   id: route.query.reservId,       // 课程id
   data: {}                        // 课程信息
@@ -83,6 +84,8 @@ const btnList = [                 // 工具栏按钮列表
   // { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
   // { label: '更多', value: 'more', icon: 'icon-xiazai9' },
 ]
+let timingSide = null             // 计时器-侧边栏
+
 // === 页面加载完毕 ===
 onMounted(async() => {
   if (!electron) return // 浏览器端
@@ -140,7 +143,8 @@ const logoHandle = (e,t) => {
 // 底部工具栏：移入移出-是否穿透
 const mouseChange = (bool) => {
   let resBool = false
-  if (bool == 0) return setIgnore(resBool) // 移入不穿透
+  console.log('mouseChange:', bool, resBool)
+  if (!bool) return setIgnore(resBool) // 移入不穿透
   if (tabActive.value == 'select') resBool = !!bool
   else {
     if (!isShow.value) resBool = !!bool
@@ -203,6 +207,14 @@ const sideMouse = e => {
     return
   }
   mouseChange(type == 'mouseleave')
+  // 关闭侧边工具内容窗口
+  if (type == 'mouseleave') {
+    timingSide = setTimeout(() => {
+      sideVueRef.value.closeActive()
+    }, 500)
+  } else { // 移入
+    if (!!timingSide) clearTimeout(timingSide)
+  }
 }
 // 侧边工具栏: 操作变化
 const sideChange = async o => {