🔨 Refactor(background): convergence of BrowserWindow creation to windowManager

src/background.ts

@@ -44,18 +44,18 @@ import {
   GET_WINDOW_ID,
   GET_WINDOW_ID_REPONSE,
   GET_SETTING_WINDOW_ID,
-  GET_SETTING_WINDOW_ID_RESPONSE
+  GET_SETTING_WINDOW_ID_RESPONSE,
+  CREATE_APP_MENU
 } from '~/main/utils/busApi/constants'
 import server from '~/main/server/index'
+import { IWindowList } from '~/main/apis/window/constants'
+import windowManager from '~/main/apis/window/windowManager'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 protocol.registerSchemesAsPrivileged([{ scheme: 'picgo', privileges: { secure: true, standard: true } }])
 
 beforeOpen()
 
-let window: BrowserWindow | null
-let settingWindow: BrowserWindow | null
-let miniWindow: BrowserWindow | null
 let tray: Tray | null
 let menu: Menu | null
 let contextMenu: Menu | null
@@ -83,8 +83,8 @@ function createContextMenu () {
         picgo.saveConfig({
           'picBed.current': item.type
         })
-        if (settingWindow) {
+        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-          settingWindow.webContents.send('syncPicBed')
+          windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
         }
       }
     }
@@ -103,15 +103,11 @@ function createContextMenu () {
     {
       label: '打开详细窗口',
       click () {
-        if (settingWindow === null) {
+        const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
-          createSettingWindow()
         settingWindow!.show()
-        } else {
+        settingWindow!.focus()
-          settingWindow.show()
+        if (windowManager.has(IWindowList.MINI_WINDOW)) {
-          settingWindow.focus()
+          windowManager.get(IWindowList.MINI_WINDOW)!.hide()
-        }
-        if (miniWindow) {
-          miniWindow.hide()
         }
       }
     },
@@ -150,8 +146,8 @@ function createTray () {
   const menubarPic = process.platform === 'darwin' ? `${__static}/menubar.png` : `${__static}/menubar-nodarwin.png`
   tray = new Tray(menubarPic)
   tray.on('right-click', () => {
-    if (window) {
+    if (windowManager.has(IWindowList.TRAY_WINDOW)) {
-      window.hide()
+      windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
     }
     createContextMenu()
     tray!.popUpContextMenu(contextMenu!)
@@ -172,21 +168,17 @@ function createTray () {
             imgUrl
           })
         }
-        window!.webContents.send('clipboardFiles', obj)
+        windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('clipboardFiles', obj)
       }, 0)
     } else {
-      if (window) {
+      if (windowManager.has(IWindowList.TRAY_WINDOW)) {
-        window.hide()
+        windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
       }
-      if (settingWindow === null) {
+      const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
-        createSettingWindow()
       settingWindow!.show()
-      } else {
+      settingWindow!.focus()
-        settingWindow.show()
+      if (windowManager.has(IWindowList.MINI_WINDOW)) {
-        settingWindow.focus()
+        windowManager.get(IWindowList.MINI_WINDOW)!.hide()
-      }
-      if (miniWindow) {
-        miniWindow.hide()
       }
     }
   })
@@ -205,7 +197,10 @@ function createTray () {
 
   tray.on('drop-files', async (event: Event, files: string[]) => {
     const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
-    const imgs = await uploader.setWebContents(window!.webContents).upload(files)
+    const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
+    const imgs = await uploader
+      .setWebContents(trayWindow.webContents)
+      .upload(files)
     if (imgs !== false) {
       for (let i = 0; i < imgs.length; i++) {
         clipboard.writeText(pasteTemplate(pasteStyle, imgs[i]))
@@ -219,124 +214,12 @@ function createTray () {
         }, i * 100)
         db.insert('uploaded', imgs[i])
       }
-      window!.webContents.send('dragFiles', imgs)
+      trayWindow.webContents.send('dragFiles', imgs)
     }
   })
   // toggleWindow()
 }
 
-const createWindow = () => {
-  if (process.platform !== 'darwin' && process.platform !== 'win32') {
-    return
-  }
-  window = new BrowserWindow({
-    height: 350,
-    width: 196, // 196
-    show: false,
-    frame: false,
-    fullscreenable: false,
-    resizable: false,
-    transparent: true,
-    vibrancy: 'ultra-dark',
-    webPreferences: {
-      nodeIntegration: true,
-      nodeIntegrationInWorker: true,
-      backgroundThrottling: false
-    }
-  })
-
-  window.loadURL(winURL)
-
-  window.on('closed', () => {
-    window = null
-  })
-
-  window.on('blur', () => {
-    window!.hide()
-  })
-  return window
-}
-
-const createMiniWindow = () => {
-  if (miniWindow || process.platform === 'darwin') {
-    return false
-  }
-  let obj: IBrowserWindowOptions = {
-    height: 64,
-    width: 64,
-    show: process.platform === 'linux',
-    frame: false,
-    fullscreenable: false,
-    skipTaskbar: true,
-    resizable: false,
-    transparent: process.platform !== 'linux',
-    icon: `${__static}/logo.png`,
-    webPreferences: {
-      backgroundThrottling: false,
-      nodeIntegration: true,
-      nodeIntegrationInWorker: true
-    }
-  }
-
-  if (db.get('settings.miniWindowOntop')) {
-    obj.alwaysOnTop = true
-  }
-
-  miniWindow = new BrowserWindow(obj)
-
-  miniWindow.loadURL(miniWinURL)
-
-  miniWindow.on('closed', () => {
-    miniWindow = null
-  })
-  return miniWindow
-}
-
-const createSettingWindow = () => {
-  const options: IBrowserWindowOptions = {
-    height: 450,
-    width: 800,
-    show: false,
-    frame: true,
-    center: true,
-    fullscreenable: false,
-    resizable: false,
-    title: 'PicGo',
-    vibrancy: 'ultra-dark',
-    transparent: true,
-    titleBarStyle: 'hidden',
-    webPreferences: {
-      backgroundThrottling: false,
-      nodeIntegration: true,
-      nodeIntegrationInWorker: true,
-      webSecurity: false
-    }
-  }
-  if (process.platform !== 'darwin') {
-    options.show = false
-    options.frame = false
-    options.backgroundColor = '#3f3c37'
-    options.transparent = false
-    options.icon = `${__static}/logo.png`
-  }
-  settingWindow = new BrowserWindow(options)
-
-  settingWindow!.loadURL(settingWinURL)
-
-  settingWindow!.on('closed', () => {
-    bus.emit('toggleShortKeyModifiedMode', false)
-    settingWindow = null
-    if (process.platform === 'linux') {
-      process.nextTick(() => {
-        app.quit()
-      })
-    }
-  })
-  createMenu()
-  createMiniWindow()
-  return settingWindow
-}
-
 const createMenu = () => {
   if (process.env.NODE_ENV !== 'development') {
     const template = [{
@@ -365,25 +248,23 @@ const createMenu = () => {
 }
 
 const toggleWindow = (bounds: IBounds) => {
-  if (window!.isVisible()) {
+  const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
-    window!.hide()
+  if (trayWindow.isVisible()) {
+    trayWindow.hide()
   } else {
-    showWindow(bounds)
+    trayWindow.setPosition(bounds.x - 98 + 11, bounds.y, false)
+    trayWindow.webContents.send('updateFiles')
+    trayWindow.show()
+    trayWindow.focus()
   }
 }
 
-const showWindow = (bounds: IBounds) => {
-  window!.setPosition(bounds.x - 98 + 11, bounds.y, false)
-  window!.webContents.send('updateFiles')
-  window!.show()
-  window!.focus()
-}
-
 const uploadClipboardFiles = async (): Promise<string> => {
-  const win = getAvailableWindow()
+  const win = windowManager.getAvailableWindow()
   let img = await uploader.setWebContents(win!.webContents).upload()
   if (img !== false) {
     if (img.length > 0) {
+      const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
       const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
       clipboard.writeText(pasteTemplate(pasteStyle, img[0]))
       const notification = new Notification({
@@ -393,10 +274,10 @@ const uploadClipboardFiles = async (): Promise<string> => {
       })
       notification.show()
       db.insert('uploaded', img[0])
-      window!.webContents.send('clipboardFiles', [])
+      trayWindow.webContents.send('clipboardFiles', [])
-      window!.webContents.send('uploadFiles', img)
+      trayWindow.webContents.send('uploadFiles', img)
-      if (settingWindow) {
+      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-        settingWindow.webContents.send('updateGallery')
+        windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
       }
       return img[0].imgUrl as string
     } else {
@@ -433,9 +314,9 @@ const uploadChoosedFiles = async (webContents: WebContents, files: IFileWithPath
       result.push(imgs[i].imgUrl!)
     }
     clipboard.writeText(pasteText)
-    window!.webContents.send('uploadFiles', imgs)
+    windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('uploadFiles', imgs)
-    if (settingWindow) {
+    if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-      settingWindow.webContents.send('updateGallery')
+      windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
     }
     return result
   } else {
@@ -447,7 +328,8 @@ picgoCoreIPC()
 
 // from macOS tray
 ipcMain.on('uploadClipboardFiles', async () => {
-  const img = await uploader.setWebContents(window!.webContents).upload()
+  const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
+  const img = await uploader.setWebContents(trayWindow.webContents).upload()
   if (img !== false) {
     const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
     clipboard.writeText(pasteTemplate(pasteStyle, img[0]))
@@ -459,12 +341,12 @@ ipcMain.on('uploadClipboardFiles', async () => {
     })
     notification.show()
     db.insert('uploaded', img[0])
-    window!.webContents.send('clipboardFiles', [])
+    trayWindow.webContents.send('clipboardFiles', [])
-    if (settingWindow) {
+    if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-      settingWindow.webContents.send('updateGallery')
+      windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
     }
   }
-  window!.webContents.send('uploadFiles')
+  trayWindow.webContents.send('uploadFiles')
 })
 
 ipcMain.on('uploadClipboardFilesFromUploadPage', () => {
@@ -525,29 +407,24 @@ ipcMain.on('autoStart', (evt: IpcMainEvent, val: boolean) => {
 })
 
 ipcMain.on('openSettingWindow', () => {
-  if (!settingWindow) {
+  windowManager.get(IWindowList.SETTING_WINDOW)!.show()
-    createSettingWindow()
+  if (windowManager.has(IWindowList.MINI_WINDOW)) {
-  } else {
+    windowManager.get(IWindowList.MINI_WINDOW)!.hide()
-    settingWindow.show()
-  }
-  if (miniWindow) {
-    miniWindow.hide()
   }
 })
 
 ipcMain.on('openMiniWindow', () => {
-  if (!miniWindow) {
+  const miniWindow = windowManager.get(IWindowList.MINI_WINDOW)!
-    createMiniWindow()
+  const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
-  }
+  miniWindow.show()
-  miniWindow!.show()
+  miniWindow.focus()
-  miniWindow!.focus()
+  settingWindow.hide()
-  settingWindow!.hide()
 })
 
 //  from mini window
 ipcMain.on('syncPicBed', () => {
-  if (settingWindow) {
+  if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-    settingWindow.webContents.send('syncPicBed')
+    windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
   }
 })
 
@@ -576,11 +453,12 @@ if (!gotTheLock) {
       if (files === null) {
         uploadClipboardFiles()
       } else {
-        const win = getAvailableWindow()
+        const win = windowManager.getAvailableWindow()
         uploadChoosedFiles(win.webContents, files)
       }
     } else {
-      if (settingWindow) {
+      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+        const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
         if (settingWindow.isMinimized()) {
           settingWindow.restore()
         }
@@ -608,8 +486,8 @@ app.on('ready', async () => {
       console.error('Vue Devtools failed to install:', e.toString())
     }
   }
-  createWindow()
+  windowManager.create(IWindowList.TRAY_WINDOW)
-  createSettingWindow()
+  windowManager.create(IWindowList.SETTING_WINDOW)
   if (process.platform === 'darwin' || process.platform === 'win32') {
     createTray()
   }
@@ -628,7 +506,7 @@ app.on('ready', async () => {
       if (files === null) {
         uploadClipboardFiles()
       } else {
-        const win = getAvailableWindow()
+        const win = windowManager.getAvailableWindow()
         uploadChoosedFiles(win.webContents, files)
       }
     }
@@ -643,11 +521,11 @@ app.on('window-all-closed', () => {
 
 app.on('activate', () => {
   createProtocol('picgo')
-  if (window === null) {
+  if (!windowManager.has(IWindowList.TRAY_WINDOW)) {
-    createWindow()
+    windowManager.create(IWindowList.TRAY_WINDOW)
   }
-  if (settingWindow === null) {
+  if (!windowManager.has(IWindowList.SETTING_WINDOW)) {
-    createSettingWindow()
+    windowManager.create(IWindowList.SETTING_WINDOW)
   }
 })
 
@@ -667,42 +545,33 @@ function initEventCenter () {
     [UPLOAD_WITH_CLIPBOARD_FILES]: busCallUploadClipboardFiles,
     [UPLOAD_WITH_FILES]: busCallUploadFiles,
     [GET_WINDOW_ID]: busCallGetWindowId,
-    [GET_SETTING_WINDOW_ID]: busCallGetSettingWindowId
+    [GET_SETTING_WINDOW_ID]: busCallGetSettingWindowId,
+    [CREATE_APP_MENU]: createMenu
   }
   for (let i in eventList) {
     bus.on(i, eventList[i])
   }
 }
 
-function getAvailableWindow () {
-  let win
-  if (miniWindow && miniWindow.isVisible()) {
-    win = miniWindow
-  } else {
-    win = settingWindow || window || createSettingWindow()
-  }
-  return win
-}
-
 async function busCallUploadClipboardFiles () {
   const imgUrl = await uploadClipboardFiles()
   bus.emit(UPLOAD_WITH_CLIPBOARD_FILES_RESPONSE, imgUrl)
 }
 
 async function busCallUploadFiles (pathList: IFileWithPath[]) {
-  const win = getAvailableWindow()
+  const win = windowManager.getAvailableWindow()
   const urls = await uploadChoosedFiles(win.webContents, pathList)
   bus.emit(UPLOAD_WITH_FILES_RESPONSE, urls)
 }
 
 function busCallGetWindowId () {
-  const win = getAvailableWindow()
+  const win = windowManager.getAvailableWindow()
   bus.emit(GET_WINDOW_ID_REPONSE, win.id)
 }
 
 function busCallGetSettingWindowId () {
-  if (!settingWindow) createSettingWindow()
+  const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
-  bus.emit(GET_SETTING_WINDOW_ID_RESPONSE, settingWindow!.id)
+  bus.emit(GET_SETTING_WINDOW_ID_RESPONSE, settingWindow.id)
 }
 
 // Exit cleanly on request from parent process in development mode.

src/main/apis/window/constants.ts

@@ -0,0 +1,27 @@
+export enum IWindowList {
+  SETTING_WINDOW = 'SETTING_WINDOW',
+  TRAY_WINDOW = 'TRAY_WINDOW',
+  MINI_WINDOW = 'MINI_WINDOW',
+  RENAME_WINDOW = 'RENAME_WINDOW'
+}
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+export const TRAY_WINDOW_URL = isDevelopment
+  ? (process.env.WEBPACK_DEV_SERVER_URL as string)
+  : `picgo://./index.html`
+
+export const SETTING_WINDOW_URL = isDevelopment
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#setting/upload`
+  : `picgo://./index.html#setting/upload`
+
+export const MINI_WINDOW_URL = isDevelopment
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#mini-page`
+  : `picgo://./index.html#mini-page`
+
+export const RENAME_WINDOW_URL = process.env.NODE_ENV === 'development'
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#rename-page`
+  : `picgo://./index.html#rename-page`
+
+export const DELETE_WINDOW_EVENT = 'DELETE_WINDOW_EVENT'
+export const CREATE_WINDOW_EVENT = 'CREATE_WINDOW_EVENT'

src/main/apis/window/windowList.ts

@@ -0,0 +1,181 @@
+import {
+  IWindowList,
+  DELETE_WINDOW_EVENT,
+  CREATE_WINDOW_EVENT,
+  SETTING_WINDOW_URL,
+  TRAY_WINDOW_URL,
+  MINI_WINDOW_URL,
+  RENAME_WINDOW_URL
+} from './constants'
+import { IWindowListItem } from '#/types/electron'
+import bus from '~/main/utils/eventBus'
+import db from '#/datastore'
+import { getWindowId } from '~/main/utils/busApi'
+import { BrowserWindow, app } from 'electron'
+import { CREATE_APP_MENU } from '~/main/utils/busApi/constants'
+
+const windowList = new Map<IWindowList, IWindowListItem>()
+
+windowList.set(IWindowList.TRAY_WINDOW, {
+  isValid: process.platform !== 'linux',
+  multiple: false,
+  options () {
+    return {
+      height: 350,
+      width: 196, // 196
+      show: false,
+      frame: false,
+      fullscreenable: false,
+      resizable: false,
+      transparent: true,
+      vibrancy: 'ultra-dark',
+      webPreferences: {
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true,
+        backgroundThrottling: false
+      }
+    }
+  },
+  callback (window) {
+    const id = window!.id
+    window!.loadURL(TRAY_WINDOW_URL)
+    window!.on('closed', () => {
+      bus.emit(DELETE_WINDOW_EVENT, id)
+    })
+
+    window!.on('blur', () => {
+      window!.hide()
+    })
+  }
+})
+
+windowList.set(IWindowList.SETTING_WINDOW, {
+  isValid: true,
+  multiple: false,
+  options () {
+    const options: IBrowserWindowOptions = {
+      height: 450,
+      width: 800,
+      show: false,
+      frame: true,
+      center: true,
+      fullscreenable: false,
+      resizable: false,
+      title: 'PicGo',
+      vibrancy: 'ultra-dark',
+      transparent: true,
+      titleBarStyle: 'hidden',
+      webPreferences: {
+        backgroundThrottling: false,
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true,
+        webSecurity: false
+      }
+    }
+    if (process.platform !== 'darwin') {
+      options.show = false
+      options.frame = false
+      options.backgroundColor = '#3f3c37'
+      options.transparent = false
+      options.icon = `${__static}/logo.png`
+    }
+    return options
+  },
+  callback (window) {
+    const id = window!.id
+    window!.loadURL(SETTING_WINDOW_URL)
+    window!.on('closed', () => {
+      bus.emit('toggleShortKeyModifiedMode', false)
+      bus.emit(DELETE_WINDOW_EVENT, id)
+      if (process.platform === 'linux') {
+        process.nextTick(() => {
+          app.quit()
+        })
+      }
+    })
+    bus.emit(CREATE_APP_MENU)
+    bus.emit(CREATE_WINDOW_EVENT, IWindowList.MINI_WINDOW)
+  }
+})
+
+windowList.set(IWindowList.MINI_WINDOW, {
+  isValid: process.platform !== 'darwin',
+  multiple: false,
+  options () {
+    let obj: IBrowserWindowOptions = {
+      height: 64,
+      width: 64,
+      show: process.platform === 'linux',
+      frame: false,
+      fullscreenable: false,
+      skipTaskbar: true,
+      resizable: false,
+      transparent: process.platform !== 'linux',
+      icon: `${__static}/logo.png`,
+      webPreferences: {
+        backgroundThrottling: false,
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true
+      }
+    }
+
+    if (db.get('settings.miniWindowOntop')) {
+      obj.alwaysOnTop = true
+    }
+    return obj
+  },
+  callback (window) {
+    const id = window!.id
+    window!.loadURL(MINI_WINDOW_URL)
+    window!.on('closed', () => {
+      bus.emit(DELETE_WINDOW_EVENT, id)
+    })
+  }
+})
+
+windowList.set(IWindowList.RENAME_WINDOW, {
+  isValid: true,
+  multiple: true,
+  options () {
+    let options: IBrowserWindowOptions = {
+      height: 175,
+      width: 300,
+      show: true,
+      fullscreenable: false,
+      resizable: false,
+      vibrancy: 'ultra-dark',
+      webPreferences: {
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true,
+        backgroundThrottling: false
+      }
+    }
+    if (process.platform !== 'darwin') {
+      options.show = true
+      options.backgroundColor = '#3f3c37'
+      options.autoHideMenuBar = true
+      options.transparent = false
+    }
+    return options
+  },
+  async callback (window) {
+    window!.loadURL(RENAME_WINDOW_URL)
+    const currentWindowId = await getWindowId()
+    const currentWindow = BrowserWindow.fromId(currentWindowId)
+    if (currentWindow && currentWindow.isVisible()) {
+    // bounds: { x: 821, y: 75, width: 800, height: 450 }
+      const bounds = currentWindow.getBounds()
+      const positionX = bounds.x + bounds.width / 2 - 150
+      let positionY
+      // if is the settingWindow
+      if (bounds.height > 400) {
+        positionY = bounds.y + bounds.height / 2 - 88
+      } else { // if is the miniWindow
+        positionY = bounds.y + bounds.height / 2
+      }
+      window!.setPosition(positionX, positionY, false)
+    }
+  }
+})
+
+export default windowList

src/main/apis/window/windowManager.ts

@@ -0,0 +1,77 @@
+import {
+  BrowserWindow
+} from 'electron'
+import { IWindowManager, IWindowListItem } from '#/types/electron'
+import windowList from './windowList'
+import {
+  IWindowList,
+  DELETE_WINDOW_EVENT,
+  CREATE_WINDOW_EVENT
+} from './constants'
+import bus from '~/main/utils/eventBus'
+
+class WindowManager implements IWindowManager {
+  private windowMap: Map<IWindowList | string, BrowserWindow> = new Map()
+  private windowIdMap: Map<number, IWindowList | string> = new Map()
+  constructor () {
+    bus.on(DELETE_WINDOW_EVENT, this.deleteById)
+    bus.on(CREATE_WINDOW_EVENT, this.create)
+  }
+  create = (name: IWindowList) => {
+    const windowConfig: IWindowListItem = windowList.get(name)!
+    if (windowConfig.isValid) {
+      if (!windowConfig.multiple) {
+        if (this.windowMap.has(name)) return this.windowMap.get(name)!
+      }
+      const window = new BrowserWindow(windowConfig.options())
+      if (windowConfig.multiple) {
+        this.windowMap.set(`${name}_${window.id}`, window)
+        this.windowIdMap.set(window.id, `${name}_${window.id}`)
+      } else {
+        this.windowMap.set(name, window)
+        this.windowIdMap.set(window.id, name)
+      }
+      windowConfig.callback(window)
+      return window
+    } else {
+      return null
+    }
+  }
+  get (name: IWindowList) {
+    if (this.windowMap.has(name)) {
+      return this.windowMap.get(name)!
+    } else {
+      const window = this.create(name)
+      return window
+    }
+  }
+  has (name: IWindowList) {
+    return this.windowMap.has(name)
+  }
+  delete = (name: IWindowList) => {
+    const window = this.windowMap.get(name)
+    if (window) {
+      this.windowIdMap.delete(window.id)
+      this.windowMap.delete(name)
+    }
+  }
+  deleteById = (id: number) => {
+    const name = this.windowIdMap.get(id)
+    if (name) {
+      this.windowMap.delete(name)
+      this.windowIdMap.delete(id)
+    }
+  }
+  getAvailableWindow () {
+    const miniWindow = this.windowMap.get(IWindowList.MINI_WINDOW)
+    if (miniWindow && miniWindow.isVisible()) {
+      return miniWindow
+    } else {
+      const settingWindow = this.windowMap.get(IWindowList.SETTING_WINDOW)
+      const trayWindow = this.windowMap.get(IWindowList.TRAY_WINDOW)
+      return settingWindow || trayWindow || this.create(IWindowList.SETTING_WINDOW)!
+    }
+  }
+}
+
+export default new WindowManager()

src/main/utils/busApi/constants.ts

@@ -6,3 +6,4 @@ export const UPLOAD_WITH_FILES = 'UPLOAD_WITH_FILES'
 export const UPLOAD_WITH_FILES_RESPONSE = 'UPLOAD_WITH_FILES_RESPONSE'
 export const UPLOAD_WITH_CLIPBOARD_FILES = 'UPLOAD_WITH_CLIPBOARD_FILES'
 export const UPLOAD_WITH_CLIPBOARD_FILES_RESPONSE = 'UPLOAD_WITH_CLIPBOARD_FILES_RESPONSE'
+export const CREATE_APP_MENU = 'CREATE_APP_MENU'

src/main/utils/uploader.ts

@@ -8,51 +8,8 @@ import {
 import dayjs from 'dayjs'
 import picgo from '~/main/utils/picgo'
 import db from '#/datastore'
-
+import windowManager from '~/main/apis/window/windowManager'
-const renameURL = process.env.NODE_ENV === 'development'
+import { IWindowList } from '~/main/apis/window/constants'
-  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#rename-page`
-  : `picgo://./index.html#rename-page`
-
-const createRenameWindow = (currentWindow: BrowserWindow) => {
-  let options: IBrowserWindowOptions = {
-    height: 175,
-    width: 300,
-    show: true,
-    fullscreenable: false,
-    resizable: false,
-    vibrancy: 'ultra-dark',
-    webPreferences: {
-      nodeIntegration: true,
-      nodeIntegrationInWorker: true,
-      backgroundThrottling: false
-    }
-  }
-
-  if (process.platform !== 'darwin') {
-    options.show = true
-    options.backgroundColor = '#3f3c37'
-    options.autoHideMenuBar = true
-    options.transparent = false
-  }
-
-  const window = new BrowserWindow(options)
-  window.loadURL(renameURL)
-  // check if this window is visible
-  if (currentWindow && currentWindow.isVisible()) {
-    // bounds: { x: 821, y: 75, width: 800, height: 450 }
-    const bounds = currentWindow.getBounds()
-    const positionX = bounds.x + bounds.width / 2 - 150
-    let positionY
-    // if is the settingWindow
-    if (bounds.height > 400) {
-      positionY = bounds.y + bounds.height / 2 - 88
-    } else { // if is the miniWindow
-      positionY = bounds.y + bounds.height / 2
-    }
-    window.setPosition(positionX, positionY, false)
-  }
-  return window
-}
 
 const waitForShow = (webcontent: WebContents) => {
   return new Promise((resolve, reject) => {
@@ -64,6 +21,7 @@ const waitForShow = (webcontent: WebContents) => {
 
 const waitForRename = (window: BrowserWindow, id: number): Promise<string|null> => {
   return new Promise((resolve, reject) => {
+    const windowId = window.id
     ipcMain.once(`rename${id}`, (evt: Event, newName: string) => {
       resolve(newName)
       window.close()
@@ -71,13 +29,13 @@ const waitForRename = (window: BrowserWindow, id: number): Promise<string|null>
     window.on('close', () => {
       resolve(null)
       ipcMain.removeAllListeners(`rename${id}`)
+      windowManager.deleteById(windowId)
     })
   })
 }
 
 class Uploader {
   private webContents: WebContents | null = null
-  private currentWindow: BrowserWindow | null = null
   constructor () {
     this.init()
   }
@@ -113,7 +71,7 @@ class Uploader {
             fileName = item.fileName
           }
           if (rename) {
-            const window = createRenameWindow(this.currentWindow!)
+            const window = windowManager.create(IWindowList.RENAME_WINDOW)!
             await waitForShow(window.webContents)
             window.webContents.send('rename', fileName, window.webContents.id)
             name = await waitForRename(window, window.webContents.id)
@@ -130,8 +88,6 @@ class Uploader {
   }
 
   upload (img?: IUploadOption): Promise<ImgInfo[]|false> {
-    this.currentWindow = BrowserWindow.fromWebContents(this.webContents!)
-
     picgo.upload(img)
 
     return new Promise((resolve) => {

src/universal/types/electron.d.ts

@@ -0,0 +1,20 @@
+import {
+  BrowserWindow
+} from 'electron'
+import {
+  IWindowList
+} from '~/main/apis/window/constants'
+
+declare interface IWindowListItem {
+  isValid: boolean
+  multiple: boolean
+  options: () => IBrowserWindowOptions,
+  callback: (window: BrowserWindow | null) => void
+}
+
+declare interface IWindowManager {
+  create: (name: IWindowList) => BrowserWindow | null
+  get: (name: IWindowList) => BrowserWindow | null
+  delete: (name: IWindowList) => void
+  getAvailableWindow: () => BrowserWindow
+}

src/universal/types/types.d.ts

@@ -7,7 +7,7 @@ interface IObjT<T> {
   [propName: string]: T
 }
 
-interface ErrnoException extends Error {
+declare interface ErrnoException extends Error {
   errno?: number | string;
   code?: string;
   path?: string;
@@ -15,6 +15,10 @@ interface ErrnoException extends Error {
   stack?: string;
 }
 
+declare var __static: string
+
+declare type ILogType = 'success' | 'info' | 'warn' | 'error'
+
 // Server
 type routeHandler = (ctx: IServerCTX) => Promise<void>
 
@@ -114,11 +118,6 @@ interface IBounds {
   y: number
 }
 
-declare type ILogType = 'success' | 'info' | 'warn' | 'error'
-
-// global value
-declare var __static: string
-
 // PicGo Types
 type ICtx = import('picgo')
 interface IPicGoPlugin {