🐛 Fix: config page scroll bug

ISSUES CLOSED: #1237

.vscode/settings.json

@@ -20,7 +20,8 @@
   "stylusSupremacy.sortProperties": "grouped",
   "stylusSupremacy.quoteChar": "\"",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": false
+    "source.organizeImports": "never"
-  }
+  },
+  "prettier.enable": false
 }

public/i18n/en.yml

@@ -1,4 +1,4 @@
-LANG_DISPLAY_LABEL: 'English'
+LANG_DISPLAY_LABEL: "English"
 ABOUT: About
 OPEN_MAIN_WINDOW: Open Main Window
 CHOOSE_DEFAULT_PICBED: Choose Default Picbed
@@ -28,7 +28,7 @@ OPEN_TOOLBOX: Open Toolbox
 
 # ---renderer i18n begin---
 
-CHOOSE_YOUR_DEFAULT_PICBED: 'Choose ${d} as your default picbed:'
+CHOOSE_YOUR_DEFAULT_PICBED: "Choose ${d} as your default picbed:"
 UPLOAD_AREA: Upload Area
 GALLERY: Gallery
 PICBEDS_SETTINGS: Picbeds Settings
@@ -85,7 +85,7 @@ SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD: Auto Copy URL After Upload
 SETTINGS_TIPS_PLACEHOLDER_URL: Use $url to represent url position
 SETTINGS_TIPS_PLACEHOLDER_FILENAME: Use $fileName to represent file name position
 SETTINGS_TIPS_PLACEHOLDER_EXTNAME: Use $extName to represent file's ext position
-SETTINGS_TIPS_SUCH_AS: 'Such as: $url/$fileName'
+SETTINGS_TIPS_SUCH_AS: "Such as: $url/$fileName"
 SETTINGS_UPLOAD_PROXY: Upload Proxy
 SETTINGS_PLUGIN_INSTALL_PROXY: Proxy for Plugin Install
 SETTINGS_PLUGIN_INSTALL_MIRROR: Mirror for Plugin Install
@@ -121,6 +121,10 @@ UPLOADER_CONFIG_PLACEHOLDER: Please Enter Configuration Name
 SELECTED_SETTING_HINT: Selected
 SETTINGS_ENCODE_OUTPUT_URL: Encode Output(or Copyed) URL
 SETTINGS_SHOW_DOCK_ICON: Show Dock icon
+SETTINGS_STARTUP_MODE: Startup Mode
+SETTINGS_STARTUP_MODE_MAIN_WINDOW: Open Main Window
+SETTINGS_STARTUP_MODE_MINI_WINDOW: Open Mini Window
+SETTINGS_STARTUP_MODE_HIDE: Silent Startup
 
 # shortcut-page
 
@@ -236,7 +240,7 @@ TIPS_PLUGIN_OVERWRITE_GALLERY: Plugin is trying to overwrite the album gallery,
 TIPS_UPLOAD_NOT_PICTURES: The latest clipboard item is not a picture
 TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_DEFAULT: PicGo config file broken, has been restored to default
 TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_BACKUP: PicGo config file broken, has been restored to backup
-TIPS_PICGO_BACKUP_FILE_VERSION: 'Backup file version: ${v}'
+TIPS_PICGO_BACKUP_FILE_VERSION: "Backup file version: ${v}"
 TIPS_CUSTOM_CONFIG_FILE_PATH_ERROR: Custom config file parse error, please check the path content
 TIPS_SHORTCUT_MODIFIED_SUCCEED: Shortcut modified successfully
 TIPS_SHORTCUT_MODIFIED_CONFLICT: Shortcut conflict, please reset

public/i18n/zh-CN.yml

@@ -121,6 +121,10 @@ UPLOADER_CONFIG_PLACEHOLDER: 请输入配置名称
 SELECTED_SETTING_HINT: 已选中
 SETTINGS_ENCODE_OUTPUT_URL: 输出（复制） URL 时进行转义
 SETTINGS_SHOW_DOCK_ICON: 显示 Dock 栏图标
+SETTINGS_STARTUP_MODE: 启动模式
+SETTINGS_STARTUP_MODE_MAIN_WINDOW: 打开主窗口
+SETTINGS_STARTUP_MODE_MINI_WINDOW: 打开 Mini 窗口
+SETTINGS_STARTUP_MODE_HIDE: 静默启动
 
 # shortcut-page
 
@@ -236,7 +240,7 @@ TIPS_PLUGIN_OVERWRITE_GALLERY: 有插件正在试图覆盖相册列表，是否
 TIPS_UPLOAD_NOT_PICTURES: 剪贴板最新的一条记录不是图片
 TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_DEFAULT: PicGo 配置文件损坏，已经恢复为默认配置
 TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_BACKUP: PicGo 配置文件损坏，已经恢复为备份配置
-TIPS_PICGO_BACKUP_FILE_VERSION: '备份文件版本: ${v}'
+TIPS_PICGO_BACKUP_FILE_VERSION: "备份文件版本: ${v}"
 TIPS_CUSTOM_CONFIG_FILE_PATH_ERROR: 自定义文件解析出错，请检查路径内容是否正确
 TIPS_SHORTCUT_MODIFIED_SUCCEED: 快捷键已经修改成功
 TIPS_SHORTCUT_MODIFIED_CONFLICT: 快捷键冲突，请重新设置

public/i18n/zh-TW.yml

@@ -121,6 +121,10 @@ UPLOADER_CONFIG_PLACEHOLDER: 請輸入配置名稱
 SELECTED_SETTING_HINT: 已選中
 SETTINGS_ENCODE_OUTPUT_URL: 輸出（複製） URL 時進行轉義
 SETTINGS_SHOW_DOCK_ICON: 顯示 Dock 欄圖示
+SETTINGS_STARTUP_MODE: 啟動模式
+SETTINGS_STARTUP_MODE_MAIN_WINDOW: 打開主視窗
+SETTINGS_STARTUP_MODE_MINI_WINDOW: 打開 Mini 視窗
+SETTINGS_STARTUP_MODE_HIDE: 靜默啟動
 
 # shortcut-page
 
@@ -236,7 +240,7 @@ TIPS_PLUGIN_OVERWRITE_GALLERY: 有插件正在試圖覆蓋相簿列表，是否
 TIPS_UPLOAD_NOT_PICTURES: 剪貼簿最新的一條記錄不是圖片
 TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_DEFAULT: PicGo 設定檔案已損壞，已經恢復為預設設定
 TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_BACKUP: PicGo 設定檔案已損壞，已經恢復為備份設定
-TIPS_PICGO_BACKUP_FILE_VERSION: '備份檔案版本: ${v}'
+TIPS_PICGO_BACKUP_FILE_VERSION: "備份檔案版本: ${v}"
 TIPS_CUSTOM_CONFIG_FILE_PATH_ERROR: 自訂設定檔案解析出錯，請檢查路徑內容是否正確
 TIPS_SHORTCUT_MODIFIED_SUCCEED: 快捷鍵已經修改成功
 TIPS_SHORTCUT_MODIFIED_CONFLICT: 快捷鍵衝突，請重新設定

src/main/apis/app/system/index.ts

@@ -19,6 +19,7 @@ import { privacyManager } from '~/main/utils/privacyManager'
 import { T } from '~/main/i18n'
 import { isMacOSVersionGreaterThanOrEqualTo } from '~/main/utils/getMacOSVersion'
 import { buildPicBedListMenu } from '~/main/events/remotes/menu'
+import { isLinux, isMacOS } from '~/universal/utils/common'
 let contextMenu: Menu | null
 let menu: Menu | null
 let tray: Tray | null
@@ -137,7 +138,9 @@ export function createContextMenu () {
 const getTrayIcon = () => {
   if (process.platform === 'darwin') {
     const isMacOSGreaterThan11 = isMacOSVersionGreaterThanOrEqualTo('11')
-    return isMacOSGreaterThan11 ? `${__static}/menubar-newdarwinTemplate.png` : `${__static}/menubar.png`
+    return isMacOSGreaterThan11
+      ? `${__static}/menubar-newdarwinTemplate.png`
+      : `${__static}/menubar.png`
   } else {
     return `${__static}/menubar-nodarwin.png`
   }
@@ -153,7 +156,9 @@ export function createTray () {
         windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
       }
       createContextMenu()
+      setTimeout(() => {
         tray!.popUpContextMenu(contextMenu!)
+      }, 0)
     })
     tray.on('click', (event, bounds) => {
       if (process.platform === 'darwin') {
@@ -174,7 +179,10 @@ export function createTray () {
               } else {
                 if (decodePath !== '') {
                   // 带有中文的路径，无法直接被img.src所使用，会被转义
-                  const base64 = await fs.readFile(decodePath.replace('file://', ''), { encoding: 'base64' })
+                  const base64 = await fs.readFile(
+                    decodePath.replace('file://', ''),
+                    { encoding: 'base64' }
+                  )
                   obj.push({
                     imgUrl: `data:image/png;base64,${base64}`
                   })
@@ -190,7 +198,9 @@ export function createTray () {
               })
             }
           }
-          windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('clipboardFiles', obj)
+          windowManager
+            .get(IWindowList.TRAY_WINDOW)!
+            .webContents.send('clipboardFiles', obj)
         }, 0)
       } else {
         if (windowManager.has(IWindowList.TRAY_WINDOW)) {
@@ -229,7 +239,9 @@ export function createTray () {
       if (imgs !== false) {
         const pasteText: string[] = []
         for (let i = 0; i < imgs.length; i++) {
-          pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
+          pasteText.push(
+            pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink'))
+          )
           const notification = new Notification({
             title: T('UPLOAD_SUCCEED'),
             body: imgs[i].imgUrl!
@@ -245,7 +257,7 @@ export function createTray () {
       }
     })
     // toggleWindow()
-  } else if (process.platform === 'linux') {
+  } else if (isLinux) {
     // click事件在Ubuntu上无法触发，Unity不支持（在Mac和Windows上可以触发）
     // 需要使用 setContextMenu 设置菜单
     createContextMenu()
@@ -254,7 +266,7 @@ export function createTray () {
 }
 
 export function handleDockIcon () {
-  if (process.platform === 'darwin') {
+  if (isMacOS) {
     if (db.get('settings.showDockIcon') !== false) {
       app.dock.show()
       app.dock.setMenu(createContextMenu())
@@ -269,16 +281,25 @@ export function createMenu () {
     return menu
   }
   if (process.env.NODE_ENV !== 'development') {
-    const template = [{
+    const template = [
+      {
         label: 'Edit',
         submenu: [
           { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
-        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
+          {
+            label: 'Redo',
+            accelerator: 'Shift+CmdOrCtrl+Z',
+            selector: 'redo:'
+          },
           { type: 'separator' },
           { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
           { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
           { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
-        { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
+          {
+            label: 'Select All',
+            accelerator: 'CmdOrCtrl+A',
+            selector: 'selectAll:'
+          },
           {
             label: 'Quit',
             accelerator: 'CmdOrCtrl+Q',
@@ -287,7 +308,8 @@ export function createMenu () {
             }
           }
         ]
-    }]
+      }
+    ]
     // @ts-ignore
     menu = Menu.buildFromTemplate(template)
     Menu.setApplicationMenu(menu)

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

@@ -5,13 +5,14 @@ import {
   RENAME_WINDOW_URL,
   TOOLBOX_WINDOW_URL
 } from './constants'
-import { IWindowList } from '#/types/enum'
+import { IStartupMode, IWindowList } from '#/types/enum'
 import bus from '@core/bus'
 import { CREATE_APP_MENU } from '@core/bus/constants'
 import db from '~/main/apis/core/datastore'
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 import { app } from 'electron'
 import { T } from '~/main/i18n'
+import { isLinux } from '~/universal/utils/common'
 // import { URLSearchParams } from 'url'
 
 const windowList = new Map<IWindowList, IWindowListItem>()
@@ -25,6 +26,21 @@ const handleWindowParams = (windowURL: string) => {
   return windowURL
 }
 
+export const isWindowShouldShowOnStartup = (currentWindow: IWindowList) => {
+  const startupMode = db.get('settings.startupMode') || (isLinux ? IStartupMode.SHOW_MINI_WINDOW : IStartupMode.HIDE)
+  switch (currentWindow) {
+    case IWindowList.MINI_WINDOW: {
+      return startupMode === IStartupMode.SHOW_MINI_WINDOW
+    }
+    case IWindowList.SETTING_WINDOW: {
+      return startupMode === IStartupMode.SHOW_MAIN_WINDOW
+    }
+    default: {
+      return false
+    }
+  }
+}
+
 windowList.set(IWindowList.TRAY_WINDOW, {
   isValid: process.platform !== 'linux',
   multiple: false,
@@ -113,7 +129,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
     const obj: IBrowserWindowOptions = {
       height: 64,
       width: 64,
-      show: process.platform === 'linux',
+      show: isLinux,
       frame: false,
       fullscreenable: false,
       skipTaskbar: true,

src/main/lifeCycle/index.ts

@@ -37,6 +37,7 @@ import fixPath from './fixPath'
 import { initI18n } from '~/main/utils/handleI18n'
 import { remoteNoticeHandler } from 'apis/app/remoteNotice'
 import { isMacOS } from '../utils/getMacOSVersion'
+import { isWindowShouldShowOnStartup } from '../apis/app/window/windowList'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -79,7 +80,7 @@ class LifeCycle {
         try {
           await installExtension(VUEJS_DEVTOOLS)
         } catch (e: any) {
-          console.error('Vue Devtools failed to install:', e.toString())
+          console.error('Vue Devtools failed to install:', e?.toString())
         }
       }
       windowManager.create(IWindowList.TRAY_WINDOW)
@@ -87,6 +88,17 @@ class LifeCycle {
       settingWindow?.once('show', () => {
         remoteNoticeHandler.triggerHook(IRemoteNoticeTriggerHook.SETTING_WINDOW_OPEN)
       })
+      if (isWindowShouldShowOnStartup(IWindowList.SETTING_WINDOW)) {
+        settingWindow?.show()
+        settingWindow?.focus()
+      }
+      if (!isMacOS) {
+        if (isWindowShouldShowOnStartup(IWindowList.MINI_WINDOW)) {
+          const miniWindow = windowManager.create(IWindowList.MINI_WINDOW)
+          miniWindow?.show()
+          miniWindow?.focus()
+        }
+      }
       createTray()
       handleDockIcon()
       db.set('needReload', false)

src/renderer/pages/PicGoSetting.vue

@@ -48,7 +48,7 @@ import { ElForm } from 'element-plus'
 import { Reading } from '@element-plus/icons-vue'
 import { IConfig } from 'picgo'
 import { T as $T } from '@/i18n/index'
-import { enforceNumber } from '~/universal/utils/common'
+import { enforceNumber, isLinux } from '~/universal/utils/common'
 import { onBeforeMount, reactive, ref } from 'vue'
 import { getConfig } from '@/utils/dataSender'
 import ButtonAreaSettings from './components/settings/buttonArea/ButtonAreaSettings.vue'
@@ -56,6 +56,7 @@ import SwitchAreaSettings from './components/settings/switchArea/SwitchAreaSetti
 import CustomAreaSettings from './components/settings/customArea/CustomAreaSettings.vue'
 import SelectAreaSettings from './components/settings/selectArea/SelectAreaSettings.vue'
 import { openURL } from '@/utils/common'
+import { IStartupMode } from '#/types/enum'
 
 const form = reactive<ISettingForm>({
   showUpdateTip: false,
@@ -80,7 +81,8 @@ const form = reactive<ISettingForm>({
     port: 36677,
     host: '127.0.0.1',
     enable: true
-  }
+  },
+  startupMode: IStartupMode.HIDE
 })
 
 const proxy = ref('')
@@ -113,6 +115,7 @@ async function initData () {
     form.server = settings.server
     form.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
     form.showDockIcon = settings.showDockIcon === undefined ? true : settings.showDockIcon
+    form.startupMode = settings.startupMode || (isLinux ? IStartupMode.SHOW_MINI_WINDOW : IStartupMode.HIDE)
   }
 }
 

src/renderer/pages/UploaderConfigPage.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="config-list-view">
+  <div
+    id="config-list-view"
+    class="h-[425px]"
+  >
     <div class="view-title">
       {{ $T('SETTINGS') }}
     </div>
@@ -239,9 +242,10 @@ export default {
     .selected
       border 1px solid #409EFF
   .set-default-container
-    position absolute
+    position fixed
     bottom 20px
     width 100%
     .set-default-btn
       width 250px
+      transform translateX(-50%)
 </style>

src/renderer/pages/components/settings/selectArea/SelectAreaSettings.vue

@@ -6,6 +6,12 @@
     :placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')"
     @change="handleLanguageChange"
   />
+  <SelectFormItem
+    v-model="form.startupMode"
+    :list="startupModeList"
+    :label="$T('SETTINGS_STARTUP_MODE')"
+    @change="handleChangeStartupMode"
+  />
 </template>
 <script lang="ts" setup>
 import { reactive } from 'vue'
@@ -13,6 +19,8 @@ import { T as $T, i18nManager } from '@/i18n'
 import { saveConfig, sendToMain } from '@/utils/dataSender'
 import { GET_PICBEDS } from '~/universal/events/constants'
 import SelectFormItem from '@/components/settings/SelectFormItem.vue'
+import { IStartupMode } from '~/universal/types/enum'
+import { isMacOS } from '~/universal/utils/common'
 
 interface IProps {
   settings: ISettingForm
@@ -26,6 +34,22 @@ const languageList = i18nManager.languageList.map(item => ({
   value: item.value
 }))
 
+const startupModeList = [
+  {
+    label: $T('SETTINGS_STARTUP_MODE_MAIN_WINDOW'),
+    value: IStartupMode.SHOW_MAIN_WINDOW
+  },
+  {
+    label: $T('SETTINGS_STARTUP_MODE_MINI_WINDOW'),
+    value: IStartupMode.SHOW_MINI_WINDOW,
+    hide: isMacOS
+  },
+  {
+    label: $T('SETTINGS_STARTUP_MODE_HIDE'),
+    value: IStartupMode.HIDE
+  }
+].filter(item => !item.hide)
+
 function handleLanguageChange (val: string) {
   i18nManager.setCurrentLanguage(val)
   saveConfig({
@@ -34,6 +58,12 @@ function handleLanguageChange (val: string) {
   sendToMain(GET_PICBEDS)
 }
 
+function handleChangeStartupMode (val: IStartupMode) {
+  saveConfig({
+    'settings.startupMode': val
+  })
+}
+
 </script>
 <script lang="ts">
 export default {

src/universal/types/enum.ts

@@ -92,3 +92,9 @@ export enum IToolboxItemCheckStatus {
   SUCCESS = 'success',
   ERROR = 'error',
 }
+
+export enum IStartupMode {
+  SHOW_MAIN_WINDOW = 'SHOW_SETTING_WINDOW',
+  SHOW_MINI_WINDOW = 'SHOW_MINI_WINDOW',
+  HIDE = 'HIDE'
+}

src/universal/types/i18n.d.ts

@@ -116,6 +116,10 @@ interface ILocales {
   SELECTED_SETTING_HINT: string
   SETTINGS_ENCODE_OUTPUT_URL: string
   SETTINGS_SHOW_DOCK_ICON: string
+  SETTINGS_STARTUP_MODE: string
+  SETTINGS_STARTUP_MODE_MAIN_WINDOW: string
+  SETTINGS_STARTUP_MODE_MINI_WINDOW: string
+  SETTINGS_STARTUP_MODE_HIDE: string
   SHORTCUT_NAME: string
   SHORTCUT_BIND: string
   SHORTCUT_STATUS: string

src/universal/types/view.d.ts

@@ -22,6 +22,7 @@ interface ISettingForm {
     host: string
     enable: boolean
   }
+  startupMode: import('#/types/enum').IStartupMode
 }
 
 interface IShortKeyMap {

src/universal/utils/common.ts

@@ -51,3 +51,7 @@ export const trimValues = (obj: IStringKeyMap) => {
   })
   return newObj
 }
+
+export const isMacOS = process.platform === 'darwin'
+export const isWindows = process.platform === 'win32'
+export const isLinux = process.platform === 'linux'