新增设置-桌面歌词设置-鼠标移入歌词区域时降低歌词透明度（#883）

src/renderer-lyric/App.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-#container(:class="[theme, lrcConfig.isLock ? 'lock' : null]")
-  #main
+#container(:class="[theme, { lock: lrcConfig.isLock }, { hide: isHoverHide && isMouseEnter }]")
+  #main(@mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
       .control-bar(v-show="!lrcConfig.isLock")
         core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
@@ -21,6 +21,51 @@ import { rendererOn, rendererInvoke, rendererSend, NAMES } from '../common/ipc'
 
 window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
 
+let mouseCheckTools = {
+  x: 0,
+  y: 0,
+  preX: 0,
+  preY: 0,
+  timeout: null,
+  handleCheck(setShow) {
+    let xDiff = Math.abs(this.x - this.preX)
+    let yDiff = Math.abs(this.y - this.preY)
+    if (xDiff > 8) {
+      if (this.x > this.preX) {
+        if (this.x + xDiff * 1.25 > window.innerWidth - 16) return setShow()
+      } else {
+        if (this.x - xDiff * 1.25 < 8) return setShow()
+      }
+    }
+    if (yDiff > 8) {
+      if (this.y > this.preY) {
+        if (this.y + yDiff * 1.25 > window.innerHeight - 16) return setShow()
+      } else {
+        if (this.y - yDiff * 1.25 < 8) return setShow()
+      }
+    }
+
+    // setShow(false)
+  },
+  handleMove(x, y, setShow) {
+    // console.log(x, y, this.x, this.y)
+    this.preX = this.x
+    this.preY = this.y
+    this.x = x
+    this.y = y
+    this.startTimeout(setShow)
+  },
+  startTimeout(setShow) {
+    this.stopTimeout()
+    this.timeout = setTimeout(this.handleCheck.bind(this), 200, setShow)
+  },
+  stopTimeout() {
+    if (!this.timeout) return
+    clearTimeout(this.timeout)
+    this.timeout = null
+  },
+}
+
 export default {
   data() {
     return {
@@ -39,6 +84,7 @@ export default {
         x: -1,
         y: -1,
         theme: 0,
+        isHoverHide: false,
         style: {
           font: '',
           fontSize: 125,
@@ -91,6 +137,7 @@ export default {
           className: 'blue2',
         },
       ],
+      isMouseEnter: false,
     }
   },
   computed: {
@@ -98,6 +145,9 @@ export default {
       let theme = this.themeList.find(t => t.id == this.lrcConfig.theme) || this.themeList[0]
       return theme.className
     },
+    isHoverHide() {
+      return this.lrcConfig.isLock && this.lrcConfig.isHoverHide
+    },
   },
   created() {
     rendererOn(NAMES.winLyric.set_lyric_config, (event, config) => this.handleUpdateConfig(config))
@@ -139,6 +189,13 @@ export default {
     },
     handleMouseMove(event) {
       this.handleMove(event.clientX, event.clientY)
+
+      if (this.isHoverHide) {
+        this.handleMouseEnter()
+        mouseCheckTools.handleMove(event.clientX, event.clientY, () => {
+          this.handleMouseLeave()
+        })
+      }
     },
     handleTouchMove(event) {
       if (event.changedTouches.length) {
@@ -147,7 +204,7 @@ export default {
       }
     },
     handleMove(clientX, clientY) {
-      if (!this.resize.origin) return
+      if (!this.resize.origin || this.lrcConfig.isLock) return
       // if (!event.target.classList.contains('resize-' + this.resize.origin)) return
       // console.log(event.target)
       let bounds = {
@@ -211,6 +268,17 @@ export default {
     // handleMouseOver() {
     //   // this.handleMouseUp()
     // },
+    handleMouseEnter() {
+      // console.log('enter - >')
+      if (!this.isHoverHide || this.isMouseEnter) return
+      this.isMouseEnter = true
+    },
+    handleMouseLeave() {
+      // console.log('leave - <')
+      if (!this.isHoverHide) return
+      this.isMouseEnter = false
+      mouseCheckTools.stopTimeout()
+    },
   },
 }
 </script>
@@ -240,11 +308,16 @@ body {
   padding: 8px;
   box-sizing: border-box;
   height: 100%;
+  transition: opacity .3s ease;
+  opacity: 1;
   &.lock {
     #main {
       background-color: transparent;
     }
   }
+  &.hide {
+    opacity: .05;
+  }
 }
 
 .resize-left {