From 4f0af93b7286b2a8950a6b99259bfeab762f31fe Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Fri, 28 Feb 2025 18:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=8B=96=E5=8A=A8=E6=A1=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=AD=8C=E8=AF=8D=E6=8E=A7=E5=88=B6=E6=A0=8F=E7=A9=BA?=
 =?UTF-8?q?=E7=99=BD=E5=A4=84=E7=A7=BB=E5=8A=A8=E6=AD=8C=E8=AF=8D=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=88#2280=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |  1 +
 .../components/layout/ControlBar.vue          |  6 +-
 .../components/layout/useDrag.js              | 87 +++++++++++++++++++
 3 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer-lyric/components/layout/useDrag.js

diff --git a/publish/changeLog.md b/publish/changeLog.md
index ca7957b6..d3078769 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -8,6 +8,7 @@
 ### 优化
 
 - 允许更小的桌面歌词窗口宽度
+- 允许拖动桌面歌词控制栏空白处移动歌词窗口（#2280）
 - 优化「自定义源管理」对话框在小窗口下的布局（#2247, @3gf8jv4dv）
 - 优化软件文案编排（#2259, #2266, #2269, @3gf8jv4dv）
 
diff --git a/src/renderer-lyric/components/layout/ControlBar.vue b/src/renderer-lyric/components/layout/ControlBar.vue
index ea85f6dd..ce1c056b 100644
--- a/src/renderer-lyric/components/layout/ControlBar.vue
+++ b/src/renderer-lyric/components/layout/ControlBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.container">
     <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated fadeOut">
-      <div v-show="!isShowThemeList" :class="$style.btns">
+      <div v-show="!isShowThemeList" :class="$style.btns" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart">
         <button :class="$style.btn" :title="$t('desktop_lyric__close')" @click="handleClose">
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="20px" viewBox="0 0 24 24" space="preserve">
             <use xlink:href="#icon-close" />
@@ -60,10 +60,12 @@
 import { ref } from '@common/utils/vueTools'
 import { setting } from '@lyric/store/state'
 import { updateSetting } from '@lyric/store/action'
+import useDrag from './useDrag'
 
 export default {
   setup() {
     const isShowThemeList = ref(false)
+    const { handleLyricMouseDown, handleLyricTouchStart } = useDrag()
 
     const handleClose = () => {
       updateSetting({ 'desktopLyric.enable': false })
@@ -113,6 +115,8 @@ export default {
       handleZoomLrc,
       handleFontChange,
       handleOpactiyChange,
+      handleLyricMouseDown,
+      handleLyricTouchStart,
     }
   },
 }
diff --git a/src/renderer-lyric/components/layout/useDrag.js b/src/renderer-lyric/components/layout/useDrag.js
new file mode 100644
index 00000000..85ef8ec3
--- /dev/null
+++ b/src/renderer-lyric/components/layout/useDrag.js
@@ -0,0 +1,87 @@
+import { onMounted, onBeforeUnmount } from '@common/utils/vueTools'
+import { setWindowBounds, setWindowResizeable } from '@lyric/utils/ipc'
+import { isWin } from '@common/utils'
+
+export default () => {
+  const winEvent = {
+    isMsDown: false,
+    msDownX: 0,
+    msDownY: 0,
+    windowW: 0,
+    windowH: 0,
+  }
+
+  const handleLyricDown = (target, x, y) => {
+    winEvent.isMsDown = true
+    winEvent.msDownX = x
+    winEvent.msDownY = y
+    winEvent.windowW = window.innerWidth
+    winEvent.windowH = window.innerHeight
+    // https://github.com/lyswhut/lx-music-desktop/issues/2244
+    if (isWin) setWindowResizeable(false)
+  }
+  const handleLyricMouseDown = event => {
+    console.log(event.target, event.currentTarget)
+    if (event.target !== event.currentTarget) return
+    handleLyricDown(event.target, event.clientX, event.clientY)
+  }
+  const handleLyricTouchStart = event => {
+    if (event.changedTouches.length) {
+      const touch = event.changedTouches[0]
+      if (touch.target !== touch.currentTarget) return
+      handleLyricDown(event.target, touch.clientX, touch.clientY)
+    }
+  }
+  const handleMouseMsUp = () => {
+    winEvent.isMsDown = false
+    if (isWin) setWindowResizeable(true)
+  }
+
+  const handleMove = (x, y) => {
+    if (!winEvent.isMsDown) return
+    // https://github.com/lyswhut/lx-music-desktop/issues/2244
+    if (isWin) {
+      setWindowBounds({
+        x: x - winEvent.msDownX,
+        y: y - winEvent.msDownY,
+        w: winEvent.windowW,
+        h: winEvent.windowH,
+      })
+    } else {
+      setWindowBounds({
+        x: x - winEvent.msDownX,
+        y: y - winEvent.msDownY,
+        w: window.innerWidth,
+        h: window.innerHeight,
+      })
+    }
+  }
+  const handleMouseMsMove = event => {
+    handleMove(event.clientX, event.clientY)
+  }
+  const handleTouchMove = (e) => {
+    if (e.changedTouches.length) {
+      const touch = e.changedTouches[0]
+      handleMove(touch.clientX, touch.clientY)
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('mousemove', handleMouseMsMove)
+    document.addEventListener('mouseup', handleMouseMsUp)
+    document.addEventListener('touchmove', handleTouchMove)
+    document.addEventListener('touchend', handleMouseMsUp)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousemove', handleMouseMsMove)
+    document.removeEventListener('mouseup', handleMouseMsUp)
+    document.removeEventListener('touchmove', handleTouchMove)
+    document.removeEventListener('touchend', handleMouseMsUp)
+  })
+
+  return {
+    handleLyricMouseDown,
+    handleLyricTouchStart,
+  }
+}