移除桌面歌词窗口透明边距

lyswhut · Jun 5, 2023 · fd2dca0 · fd2dca0
1 parent 5097102
commit fd2dca0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 42 deletions.
diff --git a/publish/changeLog.md b/publish/changeLog.md
@@ -6,6 +6,7 @@
 ### 优化
 
 - Windows、MacOS平台下的字体列表改用原生方式获取，现在Windows平台下能显示当前已安装的更多类型字体了（注：MacOS平台未测，可用性未知）
+- 移除桌面歌词窗口透明边距，在Linux下的桌面歌词可以完全拖到贴合屏幕边缘了
 
 ### 修复
 

diff --git a/src/main/modules/winLyric/utils.ts b/src/main/modules/winLyric/utils.ts
@@ -1,5 +1,4 @@
 // 设置窗口位置、大小
-export const padding = 8
 export let minWidth = 80
 export let minHeight = 50
 
@@ -21,25 +20,23 @@ export const getLyricWindowBounds = (bounds: Electron.Rectangle, { x = 0, y = 0,
 
   if (global.lx.appSetting['desktopLyric.isLockScreen']) {
     if (!global.envParams.workAreaSize) return bounds
-    const maxWinW = global.envParams.workAreaSize.width + padding * 2
-    const maxWinH = global.envParams.workAreaSize.height + padding * 2
+    const maxWinW = global.envParams.workAreaSize.width
+    const maxWinH = global.envParams.workAreaSize.height
 
     if (w > maxWinW) w = maxWinW
     if (h > maxWinH) h = maxWinH
 
-    const maxX = global.envParams.workAreaSize.width + padding - w
-    const minX = -padding
-    const maxY = global.envParams.workAreaSize.height + padding - h
-    const minY = -padding
+    const maxX = global.envParams.workAreaSize.width - w
+    const maxY = global.envParams.workAreaSize.height - h
 
     x += bounds.x
     y += bounds.y
 
     if (x > maxX) x = maxX
-    else if (x < minX) x = minX
+    else if (x < 0) x = 0
 
     if (y > maxY) y = maxY
-    else if (y < minY) y = minY
+    else if (y < 0) y = 0
   } else {
     y += bounds.y
     x += bounds.x
@@ -101,10 +98,10 @@ export const initWindowSize = (x: LX.AppSetting['desktopLyric.x'], y: LX.AppSett
     if (width < minWidth) width = minWidth
     if (height < minHeight) height = minHeight
     if (global.envParams.workAreaSize) {
-      x = global.envParams.workAreaSize.width + padding - width
-      y = global.envParams.workAreaSize.height + padding - height
+      x = global.envParams.workAreaSize.width - width
+      y = global.envParams.workAreaSize.height - height
     } else {
-      x = y = -padding
+      x = y = 0
     }
   } else {
     let bounds = getLyricWindowBounds({ x, y, width, height }, { x: 0, y: 0, w: width, h: height })

diff --git a/src/renderer-lyric/App.vue b/src/renderer-lyric/App.vue
@@ -12,14 +12,14 @@
         <common-audio-visualizer v-if="setting['desktopLyric.audioVisualization']" />
       </transition>
     </div>
-    <div class="resize-left" @mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)" />
-    <div class="resize-top" @mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)" />
-    <div class="resize-right" @mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)" />
-    <div class="resize-bottom" @mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)" />
-    <div class="resize-top-left" @mousedown.self="handleMouseDown('top-left', $event)" @touchstart.self="handleTouchDown('top-left', $event)" />
-    <div class="resize-top-right" @mousedown.self="handleMouseDown('top-right', $event)" @touchstart.self="handleTouchDown('top-right', $event)" />
-    <div class="resize-bottom-left" @mousedown.self="handleMouseDown('bottom-left', $event)" @touchstart.self="handleTouchDown('bottom-left', $event)" />
-    <div class="resize-bottom-right" @mousedown.self="handleMouseDown('bottom-right', $event)" @touchstart.self="handleTouchDown('bottom-right', $event)" />
+    <div class="resize resize-left" @mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)" />
+    <div class="resize resize-top" @mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)" />
+    <div class="resize resize-right" @mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)" />
+    <div class="resize resize-bottom" @mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)" />
+    <div class="resize resize-top-left" @mousedown.self="handleMouseDown('top-left', $event)" @touchstart.self="handleTouchDown('top-left', $event)" />
+    <div class="resize resize-top-right" @mousedown.self="handleMouseDown('top-right', $event)" @touchstart.self="handleTouchDown('top-right', $event)" />
+    <div class="resize resize-bottom-left" @mousedown.self="handleMouseDown('bottom-left', $event)" @touchstart.self="handleTouchDown('bottom-left', $event)" />
+    <div class="resize resize-bottom-right" @mousedown.self="handleMouseDown('bottom-right', $event)" @touchstart.self="handleTouchDown('bottom-right', $event)" />
     <layout-icons />
   </div>
 </template>
@@ -70,7 +70,6 @@ body {
 }
 
 #container {
-  padding: 8px;
   box-sizing: border-box;
   height: 100%;
   transition: opacity .3s ease;
@@ -85,12 +84,16 @@ body {
   }
 }
 
+@resize-width: 6px;
+.resize {
+  z-index: 2;
+}
 .resize-left {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
-  width: 10px;
+  width: @resize-width;
   cursor: ew-resize;
   // background-color: rgba(0, 0, 0, 1);
 }
@@ -99,67 +102,58 @@ body {
   right: 0;
   top: 0;
   height: 100%;
-  width: 10px;
+  width: @resize-width;
   cursor: ew-resize;
 }
 .resize-top {
   position: absolute;
   left: 0;
   top: 0;
-  height: 10px;
+  height: 4px;
   width: 100%;
   cursor: ns-resize;
 }
 .resize-bottom {
   position: absolute;
   left: 0;
   bottom: 0;
-  height: 10px;
+  height: @resize-width;
   width: 100%;
   cursor: ns-resize;
 }
 .resize-top-left {
   position: absolute;
   left: 0;
   top: 0;
-  width: 14px;
-  height: 14px;
+  width: @resize-width;
+  height: @resize-width;
   cursor: nwse-resize;
   // background-color: rgba(0, 0, 0, 1);
 }
 .resize-top-right {
   position: absolute;
   right: 0;
   top: 0;
-  width: 14px;
-  height: 14px;
+  width: @resize-width;
+  height: @resize-width;
   cursor: nesw-resize;
   // background-color: rgba(0, 0, 0, 1);
 }
-.resize-top-left {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 14px;
-  height: 14px;
-  cursor: nwse-resize;
-  // background-color: rgba(0, 0, 0, 1);
-}
 .resize-bottom-left {
   position: absolute;
   left: 0;
   bottom: 0;
-  width: 14px;
-  height: 14px;
+  width: @resize-width;
+  height: @resize-width;
   cursor: nesw-resize;
   // background-color: rgba(0, 0, 0, 1);
 }
 .resize-bottom-right {
   position: absolute;
   right: 0;
   bottom: 0;
-  width: 14px;
-  height: 14px;
+  width: @resize-width;
+  height: @resize-width;
   cursor: nwse-resize;
   // background-color: rgba(0, 0, 0, 1);
 }