✨ Feature(custom): optimize mini page

src/main/apis/app/window/windowList.ts

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url'
 import bus from '@core/bus'
 import { CREATE_APP_MENU } from '@core/bus/constants'
 import db from '@core/datastore'
-import { app } from 'electron'
+import { app, BrowserWindow, Rectangle } from 'electron'
 
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 import { IWindowListItem } from '#/types/electron'
@@ -28,6 +28,21 @@ const getDefaultWindowSizes = (): { width: number; height: number } => {
   }
 }
 
+function setMiniWindowShape (win: BrowserWindow) {
+  const radius = 32
+  const shape: Rectangle[] = []
+
+  for (let y = -radius; y <= radius; y++) {
+    for (let x = -radius; x <= radius; x++) {
+      if (x * x + y * y <= radius * radius) {
+        shape.push({ x: radius + x, y: radius + y, width: 1, height: 1 })
+      }
+    }
+  }
+
+  win.setShape(shape)
+}
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const preloadPath = fileURLToPath(new URL('../preload/index.mjs', import.meta.url))
 
@@ -211,6 +226,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
         hash: 'mini-page'
       })
     }
+    setMiniWindowShape(window)
   }
 })
 

src/main/lifeCycle/index.ts

@@ -227,7 +227,15 @@ class LifeCycle {
         const { width, height } = screen.getPrimaryDisplay().workAreaSize
         const lastPosition = db.get(configPaths.settings.miniWindowPosition)
         if (lastPosition) {
-          miniWindow.setPosition(lastPosition[0], lastPosition[1])
+          if (lastPosition[0] < 0 || lastPosition[0] > width || lastPosition[1] < 0 || lastPosition[1] > height) {
+            miniWindow.setPosition(width - 100, height - 100)
+            db.set(configPaths.settings.miniWindowPosition, [width - 100, height - 100])
+          } else if (lastPosition[0] + miniWindow.getSize()[0] > width || lastPosition[1] + miniWindow.getSize()[1] > height) {
+            miniWindow.setPosition(width - miniWindow.getSize()[0], height - miniWindow.getSize()[1])
+            db.set(configPaths.settings.miniWindowPosition, [width - miniWindow.getSize()[0], height - miniWindow.getSize()[1]])
+          } else {
+            miniWindow.setPosition(lastPosition[0], lastPosition[1])
+          }
         } else {
           miniWindow.setPosition(width - 100, height - 100)
         }

src/main/utils/windowHelper.ts

@@ -13,15 +13,24 @@ export function openMiniWindow (hideSettingWindow: boolean = true) {
   }
   const { width, height } = screen.getPrimaryDisplay().workAreaSize
   const lastPosition = db.get(configPaths.settings.miniWindowPosition)
-  if (lastPosition) {
-    miniWindow.setPosition(lastPosition[0], lastPosition[1])
-  } else {
-    miniWindow.setPosition(width - 100, height - 100)
-  }
   const setPositionFunc = () => {
     const position = miniWindow.getPosition()
     db.set(configPaths.settings.miniWindowPosition, position)
   }
+  if (lastPosition) {
+    if (lastPosition[0] < 0 || lastPosition[0] > width || lastPosition[1] < 0 || lastPosition[1] > height) {
+      miniWindow.setPosition(width - 100, height - 100)
+      db.set(configPaths.settings.miniWindowPosition, [width - 100, height - 100])
+    } else if (lastPosition[0] + miniWindow.getSize()[0] > width || lastPosition[1] + miniWindow.getSize()[1] > height) {
+      miniWindow.setPosition(width - miniWindow.getSize()[0], height - miniWindow.getSize()[1])
+      db.set(configPaths.settings.miniWindowPosition, [width - miniWindow.getSize()[0], height - miniWindow.getSize()[1]])
+    } else {
+      miniWindow.setPosition(lastPosition[0], lastPosition[1])
+    }
+  } else {
+    miniWindow.setPosition(width - 100, height - 100)
+  }
+
   miniWindow.on('close', setPositionFunc)
   miniWindow.on('move', setPositionFunc)
   miniWindow.show()

src/renderer/pages/MiniPage.vue

@@ -16,6 +16,8 @@
         v-if="!dragover && !isShowingProgress"
         :src="logoPath ? logoPath : '/squareLogo.png'"
         style="width: 100%; height: 100%; border-radius: 50%"
+        draggable="false"
+        @dragstart.prevent
       >
       <div
         id="upload-dragger"
@@ -214,7 +216,6 @@ export default {
 </script>
 <style lang="stylus">
 #mini-page
-  background #409EFF
   color #FFF
   height 100vh
   width 100vw
@@ -226,7 +227,6 @@ export default {
   background-position center center
   background-repeat no-repeat
   position relative
-  border 4px solid #fff
   box-sizing border-box
   cursor pointer
   &.linux
@@ -236,7 +236,6 @@ export default {
     height 100%
     width 100%
     border-radius 50%
-    transition all .2s ease-in-out
     &.linux
       border-radius 0
     &.uploading