ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

修复桌面歌词的 鼠标移入歌词区域时提高透明度 设置不稳定的问题 (#2679)

Browse Source 
Co-authored-by: lyswhut <lyswhut@qq.com>
This commit is contained in:
Little_100
2026-03-07 13:52:35 +08:00
committed by GitHub
co-authored by lyswhut
parent 8d6b207833
commit 0695bbaa70
9 changed files with 121 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
publish/changeLog.md
+1 -7
View File
@@ -1,12 +1,6 @@
我们很高兴地宣布新项目 Any Listen 的桌面版已发布，目前已支持列表跟随本地文件自动更新、加载并播放WebDAV上的歌曲等功能，更多功能仍在积极开发中，桌面版与Web版将同步更新。
对于有播放本地音乐或播放服务器上音乐需求的人可以试试，若遇到任何问题可以发 issue 反馈。
### 优化
- 优化托盘图标行为：在非 Windows 系统中，点击托盘图标时不再显示主窗口
### 修复
- 修复音量条在调整音量时实际音量与显示的数值不一致的问题（#2606）
- 修复某些情况下搜索框的搜索按钮布局错位的问题（#2622）
- 修复 wyy 部分歌曲无法被搜索的问题（#2666, @ikun0014）
- 修复桌面歌词的 鼠标移入歌词区域时提高透明度 设置不稳定的问题（#2679, @Little100）
src/common/ipcNames.ts
+1
View File
@@ -166,6 +166,7 @@ const modules = {
key_down: 'key_down',
request_main_window_channel: 'request_main_window_channel',
provide_main_window_channel: 'provide_main_window_channel',
mouse_enter_leave: 'mouse_enter_leave',
},
hotKey: {
enable: 'enable',
src/main/modules/winLyric/config.ts
+7 -2
View File
@@ -1,7 +1,8 @@
import { isLinux } from '@common/utils'
import { closeWindow, createWindow, getBounds, isExistWindow, alwaysOnTopTools, setBounds, setIgnoreMouseEvents, setSkipTaskbar } from './main'
import { sendConfigChange } from './rendererEvent'
import { sendConfigChange, sendMouseLeave } from './rendererEvent'
import { buildLyricConfig, getLyricWindowBounds, initWindowSize, watchConfigKeys } from './utils'
import { mouseCheckTools } from './mouseCheckTools'
let isLock: boolean
let isEnable: boolean
@@ -21,8 +22,10 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
isLock = global.lx.appSetting['desktopLyric.isLock']
if (global.lx.appSetting['desktopLyric.isLock']) {
setIgnoreMouseEvents(true, { forward: !isLinux && global.lx.appSetting['desktopLyric.isHoverHide'] })
mouseCheckTools.runCheck(sendMouseLeave)
} else {
setIgnoreMouseEvents(false, { forward: !isLinux && global.lx.appSetting['desktopLyric.isHoverHide'] })
mouseCheckTools.cacnelCheck()
}
}
if (keys.includes('desktopLyric.isHoverHide') && isHoverHide != global.lx.appSetting['desktopLyric.isHoverHide']) {
@@ -30,6 +33,7 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
if (!isLinux) {
setIgnoreMouseEvents(global.lx.appSetting['desktopLyric.isLock'], { forward: global.lx.appSetting['desktopLyric.isHoverHide'] })
}
mouseCheckTools.runCheck(sendMouseLeave)
}
if (keys.includes('desktopLyric.isAlwaysOnTop') && isAlwaysOnTop != global.lx.appSetting['desktopLyric.isAlwaysOnTop']) {
isAlwaysOnTop = global.lx.appSetting['desktopLyric.isAlwaysOnTop']
@@ -54,7 +58,7 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
if (keys.includes('desktopLyric.isLockScreen') && isLockScreen != global.lx.appSetting['desktopLyric.isLockScreen']) {
isLockScreen = global.lx.appSetting['desktopLyric.isLockScreen']
if (global.lx.appSetting['desktopLyric.isLockScreen']) {
setBounds(getLyricWindowBounds(getBounds(), {
setBounds(getLyricWindowBounds(getBounds()!, {
x: 0,
y: 0,
w: global.lx.appSetting['desktopLyric.width'],
@@ -77,6 +81,7 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
createWindow()
} else {
alwaysOnTopTools.clearLoop()
mouseCheckTools.cacnelCheck()
closeWindow()
}
}
src/main/modules/winLyric/main.ts
+2 -2
View File
@@ -172,8 +172,8 @@ export const sendEvent = <T = any>(name: string, params?: T) => {
mainSend(browserWindow, name, params)
}
export const getBounds = (): Electron.Rectangle => {
if (!browserWindow) throw new Error('window is not available')
export const getBounds = (): Electron.Rectangle | null => {
if (!browserWindow) return null
return browserWindow.getBounds()
}
src/main/modules/winLyric/mouseCheckTools.ts
+57
View File
@@ -0,0 +1,57 @@
import { screen } from 'electron'
import { getBounds } from './main'
import { isLinux } from '@common/utils'
export const mouseCheckTools = {
timer: null as NodeJS.Timeout | null,
isMouseInWindow: false,
sendMouseLeave: null as (() => void) | null,
onInBoundsChange(isInBounds: boolean) {
if (isInBounds) return
this.stop()
this.sendMouseLeave?.()
},
checkMousePosition() {
const bounds = getBounds()
if (!bounds) return
const point = screen.getCursorScreenPoint()
const isInBounds = point.x >= bounds.x && point.x <= bounds.x + bounds.width &&
point.y >= bounds.y && point.y <= bounds.y + bounds.height
if (isInBounds !== this.isMouseInWindow) {
this.isMouseInWindow = isInBounds
this.onInBoundsChange(isInBounds)
}
},
start() {
this.timer = setTimeout(() => {
this.timer = null
this.checkMousePosition()
this.start()
}, 500)
},
stop() {
if (!this.timer) return
clearTimeout(this.timer)
this.timer = null
// console.log('stop check')
},
setMouseInWindow(isInWindow: boolean) {
this.isMouseInWindow = isInWindow
},
runCheck(sendMouseLeave: () => void) {
if (isLinux || !global.lx.appSetting['desktopLyric.isLock'] || !global.lx.appSetting['desktopLyric.isHoverHide'] || !this.isMouseInWindow) return
// console.log('run check')
this.sendMouseLeave = sendMouseLeave
this.stop()
this.start()
},
cacnelCheck() {
this.stop()
},
}
src/main/modules/winLyric/rendererEvent.ts
+15 -1
View File
@@ -5,6 +5,7 @@ import { buildLyricConfig, getLyricWindowBounds } from './utils'
import { sendNewDesktopLyricClient } from '@main/modules/winMain'
import { getBounds, getMainFrame, sendEvent, setBounds, setResizeable } from './main'
import { MessageChannelMain } from 'electron'
import { mouseCheckTools } from './mouseCheckTools'
export default () => {
@@ -26,7 +27,7 @@ export default () => {
})
mainOn<LX.DesktopLyric.NewBounds>(WIN_LYRIC_RENDERER_EVENT_NAME.set_win_bounds, ({ params: options }) => {
setBounds(getLyricWindowBounds(getBounds(), options))
setBounds(getLyricWindowBounds(getBounds()!, options))
})
mainOn<boolean>(WIN_LYRIC_RENDERER_EVENT_NAME.set_win_resizeable, ({ params: resizable }) => {
@@ -45,6 +46,16 @@ export default () => {
// without going through the main process!
console.log('request_main_window_channel')
})
mainOn<boolean>(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, ({ params: isEnter }) => {
if (isEnter) {
mouseCheckTools.setMouseInWindow(true)
mouseCheckTools.runCheck(sendMouseLeave)
} else {
mouseCheckTools.setMouseInWindow(false)
mouseCheckTools.cacnelCheck()
}
})
}
export const sendConfigChange = (setting: Partial<LX.DesktopLyric.Config>) => {
@@ -55,3 +66,6 @@ export const sendMainWindowInitedEvent = () => {
sendEvent(WIN_LYRIC_RENDERER_EVENT_NAME.main_window_inited)
}
export const sendMouseLeave = () => {
sendEvent(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, false)
}
src/renderer-lyric/App.vue
+5 -4
View File
@@ -1,6 +1,6 @@
<template>
<div id="container" :class="[{ lock: setting['desktopLyric.isLock'] }, { hide: isHide || (isHoverHide && isMouseEnter) }]">
<div id="main" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousemove="handleMouseMoveMain">
<div id="container" :class="[{ lock: setting['desktopLyric.isLock'] }, { hide: isHide || isHoverHide }]">
<div id="main">
<transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut">
<div v-show="!setting['desktopLyric.isLock']" class="control-bar">
<layout-control-bar />
@@ -41,7 +41,7 @@ import usePauseHide from '@lyric/useApp/usePauseHide'
const isShowResize = window.os != 'windows'
useCommon()
const { handleMouseDown, handleTouchDown } = useWindowSize()
const { handleMouseMoveMain, isHoverHide, isMouseEnter } = useHoverHide()
const isHoverHide = useHoverHide()
useLyric()
useTheme()
const isHide = usePauseHide()
@@ -87,7 +87,8 @@ body {
}
&.hide {
opacity: .05;
&:hover {
&:not(.lock):hover {
opacity: 1;
}
}
src/renderer-lyric/useApp/useHoverHide.ts
+23 -80
View File
@@ -1,98 +1,41 @@
import { computed, ref } from '@common/utils/vueTools'
import { computed, ref, onBeforeUnmount } from '@common/utils/vueTools'
import { setting } from '@lyric/store/state'
let mouseCheckTools: {
x: number
y: number
preX: number
preY: number
timeout: NodeJS.Timeout | null
handleCheck: (setShow: () => void) => void
handleMove: (x: number, y: number, setShow: () => void) => void
startTimeout: (setShow: () => void) => void
stopTimeout: () => void
} = {
x: 0,
y: 0,
preX: 0,
preY: 0,
timeout: null,
handleCheck(setShow: () => void) {
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) {
setShow()
return
}
} else {
if (this.x - xDiff * 1.25 < 8) {
setShow()
return
}
}
}
if (yDiff > 8) {
if (this.y > this.preY) {
if (this.y + yDiff * 1.25 > window.innerHeight - 16) {
setShow()
}
} else {
if (this.y - yDiff * 1.25 < 8) {
setShow()
}
}
}
// setShow(false)
},
handleMove(x: number, y: number, setShow: () => void) {
// 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: () => void) {
this.stopTimeout()
this.timeout = setTimeout(this.handleCheck.bind(this), 200, setShow)
},
stopTimeout() {
if (!this.timeout) return
clearTimeout(this.timeout)
this.timeout = null
},
}
import { sendMouseEnterLeave, onMouseEnterLeave } from '@lyric/utils/ipc'
export default () => {
const isMouseEnter = ref(false)
const isHoverHide = computed(() => {
return setting['desktopLyric.isLock'] && setting['desktopLyric.isHoverHide']
return setting['desktopLyric.isHoverHide'] && isMouseEnter.value
})
const handleMouseMoveMain = (event: MouseEvent) => {
if (!isHoverHide.value) return
const handleMouseMove = () => {
handleMouseEnter()
mouseCheckTools.handleMove(event.clientX, event.clientY, () => {
handleMouseLeave()
})
}
const handleMouseEnter = () => {
if (!isHoverHide.value || isMouseEnter.value) return
if (isMouseEnter.value) return
isMouseEnter.value = true
sendMouseEnterLeave(true)
}
const handleMouseLeave = () => {
if (!isHoverHide.value) return
if (!isMouseEnter.value) return
isMouseEnter.value = false
mouseCheckTools.stopTimeout()
sendMouseEnterLeave(false)
}
return {
isMouseEnter,
isHoverHide,
handleMouseMoveMain,
}
const removeMouseEnterLeaveListener = onMouseEnterLeave(({ params: isEnter }) => {
isMouseEnter.value = isEnter
})
document.body.addEventListener('mousemove', handleMouseMove)
document.body.addEventListener('mouseenter', handleMouseEnter)
document.body.addEventListener('mouseleave', handleMouseLeave)
onBeforeUnmount(() => {
removeMouseEnterLeaveListener()
document.body.removeEventListener('mousemove', handleMouseMove)
document.body.removeEventListener('mouseenter', handleMouseEnter)
document.body.removeEventListener('mouseleave', handleMouseLeave)
})
return isHoverHide
}
src/renderer-lyric/utils/ipc.ts
+10
View File
@@ -42,6 +42,16 @@ export const onMainWindowInited = (listener: LX.IpcRendererEventListener): Remov
}
}
export const sendMouseEnterLeave = (isEnter: boolean) => {
rendererSend(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, isEnter)
}
export const onMouseEnterLeave = (listener: LX.IpcRendererEventListenerParams<boolean>): RemoveListener => {
rendererOn<boolean>(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, listener)
return () => {
rendererOff(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, listener)
}
}
/**
* On Theme Change
* @param listener LX.IpcRendererEventListenerParams<shouldUseDarkColors: boolean>