在歌词滚动结束后清理窗口阴影，缓解Mac下桌面歌词出现残留阴影的问题

publish/changeLog.md

@@ -6,6 +6,7 @@
 
 - 修复存在多级弹窗时的背景显示问题
 - 增大在线导入自定义源文件的大小限制问题（#1857）
+- 在歌词滚动结束后清理窗口阴影，缓解Mac下桌面歌词出现残留阴影的问题
 
 ### 变更
 

src/common/ipcNames.ts

@@ -165,6 +165,7 @@ const modules = {
     key_down: 'key_down',
     request_main_window_channel: 'request_main_window_channel',
     provide_main_window_channel: 'provide_main_window_channel',
+    invalidate_shadow: 'invalidate_shadow',
   },
   hotKey: {
     enable: 'enable',

src/main/modules/winLyric/main.ts

@@ -194,6 +194,11 @@ export const getMainFrame = (): Electron.WebFrameMain | null => {
   return browserWindow.webContents.mainFrame
 }
 
+export const invalidateShadow = () => {
+  if (!browserWindow) return
+  browserWindow.invalidateShadow()
+}
+
 interface AlwaysOnTopTools {
   timeout: NodeJS.Timeout | null
   setAlwaysOnTop: (isLoop: boolean) => void

src/main/modules/winLyric/rendererEvent.ts

@@ -3,7 +3,7 @@ import { mainOn, mainHandle } from '@common/mainIpc'
 import { WIN_LYRIC_RENDERER_EVENT_NAME } from '@common/ipcNames'
 import { buildLyricConfig, getLyricWindowBounds } from './utils'
 import { sendNewDesktopLyricClient } from '@main/modules/winMain'
-import { getBounds, getMainFrame, sendEvent, setBounds } from './main'
+import { getBounds, getMainFrame, invalidateShadow, sendEvent, setBounds } from './main'
 import { MessageChannelMain } from 'electron'
 
 
@@ -29,6 +29,10 @@ export default () => {
     setBounds(getLyricWindowBounds(getBounds(), options))
   })
 
+  mainOn(WIN_LYRIC_RENDERER_EVENT_NAME.invalidate_shadow, () => {
+    invalidateShadow()
+  })
+
   mainOn(WIN_LYRIC_RENDERER_EVENT_NAME.request_main_window_channel, ({ event }) => {
     if (event.senderFrame !== getMainFrame()) return
     // Create a new channel ...

src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js

@@ -2,7 +2,7 @@ import { ref, onMounted, onBeforeUnmount, watch, nextTick } from '@common/utils/
 import { scrollTo } from '@common/utils/renderer'
 import { lyric } from '@lyric/store/lyric'
 import { isPlay, setting } from '@lyric/store/state'
-import { setWindowBounds } from '@lyric/utils/ipc'
+import { invalidateShadow, setWindowBounds } from '@lyric/utils/ipc'
 
 const getOffsetTop = (contentHeight, lineHeight) => {
   switch (setting['desktopLyric.scrollAlign']) {
@@ -45,9 +45,13 @@ export default (isComputeHeight) => {
         offset = prevActiveLine < lyric.line ? ((dom_lines[prevActiveLine]?.clientHeight ?? 0) - prevLineHeight) : 0
         // console.log(prevActiveLine, dom_lines[prevActiveLine]?.clientHeight ?? 0, prevLineHeight, offset)
       }
-      cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - offset - getOffsetTop(dom_lyric.value.clientHeight, dom_p.clientHeight)) : 0, duration)
+      cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - offset - getOffsetTop(dom_lyric.value.clientHeight, dom_p.clientHeight)) : 0, duration, () => {
+        invalidateShadow()
+      })
     } else {
-      cancelScrollFn = scrollTo(dom_lyric.value, 0, duration)
+      cancelScrollFn = scrollTo(dom_lyric.value, 0, duration, () => {
+        invalidateShadow()
+      })
     }
   }
   const clearLyricScrollTimeout = () => {
@@ -158,6 +162,7 @@ export default (isComputeHeight) => {
         setLyric(lines)
       } else {
         cancelScrollFn = scrollTo(dom_lyric.value, 0, 300, () => {
+          invalidateShadow()
           if (lyric.lines !== lines) return
           setLyric(lines)
         }, 50)

src/renderer-lyric/components/layout/LyricVertical/useLyric.js

@@ -2,7 +2,7 @@ import { ref, onMounted, onBeforeUnmount, watch, nextTick } from '@common/utils/
 import { scrollXRTo } from '@common/utils/renderer'
 import { lyric } from '@lyric/store/lyric'
 import { isPlay, setting } from '@lyric/store/state'
-import { setWindowBounds } from '@lyric/utils/ipc'
+import { invalidateShadow, setWindowBounds } from '@lyric/utils/ipc'
 
 const getOffsetTop = (contentWidth, lineWidth) => {
   switch (setting['desktopLyric.scrollAlign']) {
@@ -45,9 +45,13 @@ export default (isComputeWidth) => {
         offset = prevActiveLine < lyric.line ? ((dom_lines[prevActiveLine]?.clientWidth ?? 0) - prevLineWidth) : 0
         // console.log(prevActiveLine, dom_lines[prevActiveLine]?.clientHeight ?? 0, prevLineWidth, offset)
       }
-      cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft + offset - getOffsetTop(dom_lyric.value.clientWidth, dom_p.clientWidth)) : 0, duration)
+      cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft + offset - getOffsetTop(dom_lyric.value.clientWidth, dom_p.clientWidth)) : 0, duration, () => {
+        invalidateShadow()
+      })
     } else {
-      cancelScrollFn = scrollXRTo(dom_lyric.value, 0, duration)
+      cancelScrollFn = scrollXRTo(dom_lyric.value, 0, duration, () => {
+        invalidateShadow()
+      })
     }
   }
   const clearLyricScrollTimeout = () => {
@@ -158,6 +162,7 @@ export default (isComputeWidth) => {
         setLyric(lines)
       } else {
         cancelScrollFn = scrollXRTo(dom_lyric.value, 0, 300, () => {
+          invalidateShadow()
           if (lyric.lines !== lines) return
           setLyric(lines)
         }, 50)

src/renderer-lyric/utils/ipc.ts

@@ -1,5 +1,6 @@
 import { rendererSend, rendererInvoke, rendererOn, rendererOff } from '@common/rendererIpc'
 import { CMMON_EVENT_NAME, WIN_LYRIC_RENDERER_EVENT_NAME } from '@common/ipcNames'
+import { isMac } from '@common/utils'
 
 type RemoveListener = () => void
 
@@ -18,6 +19,10 @@ export const onSettingChanged = (listener: LX.IpcRendererEventListenerParams<Par
 export const setWindowBounds = (bounds: LX.DesktopLyric.NewBounds) => {
   rendererSend<LX.DesktopLyric.NewBounds>(WIN_LYRIC_RENDERER_EVENT_NAME.set_win_bounds, bounds)
 }
+export const invalidateShadow = () => {
+  if (!isMac) return
+  rendererSend(WIN_LYRIC_RENDERER_EVENT_NAME.invalidate_shadow)
+}
 
 export const sendConnectMainWindowEvent = () => {
   rendererSend(WIN_LYRIC_RENDERER_EVENT_NAME.request_main_window_channel)