✨ Feature(custom): add tray tooltip

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

@@ -21,7 +21,7 @@ import windowManager from 'apis/app/window/windowManager'
 import { IPasteStyle, IWindowList } from '#/types/enum'
 import pasteTemplate from '~/main/utils/pasteTemplate'
 import pkg from 'root/package.json'
-import { ensureFilePath, handleCopyUrl } from '~/main/utils/common'
+import { ensureFilePath, handleCopyUrl, setTray, tray } from '~/main/utils/common'
 import { T } from '~/main/i18n'
 import { isMacOSVersionGreaterThanOrEqualTo } from '~/main/utils/getMacOSVersion'
 import { buildPicBedListMenu } from '~/main/events/remotes/menu'
@@ -31,7 +31,6 @@ import { uploadClipboardFiles } from '../uploader/apis'
 import { configPaths } from '~/universal/utils/configPaths'
 
 let contextMenu: Menu | null
-let tray: Tray | null
 
 export function setDockMenu () {
   const isListeningClipboard = db.get(configPaths.settings.isListeningClipboard) || false
@@ -336,9 +335,10 @@ const getTrayIcon = () => {
   }
 }
 
-export function createTray () {
+export function createTray (tooltip: string) {
   const menubarPic = getTrayIcon()
-  tray = new Tray(menubarPic)
+  setTray(new Tray(menubarPic))
+  tray.setToolTip(tooltip)
   // click事件在Mac和Windows上可以触发（在Ubuntu上无法触发，Unity不支持）
   if (process.platform === 'darwin' || process.platform === 'win32') {
     tray.on('right-click', () => {
@@ -348,7 +348,7 @@ export function createTray () {
       createContextMenu()
       tray!.popUpContextMenu(contextMenu!)
     })
-    tray.on('click', (event, bounds) => {
+    tray.on('click', (_, bounds) => {
       if (process.platform === 'darwin') {
         toggleWindow(bounds)
         setTimeout(async () => {
@@ -412,7 +412,7 @@ export function createTray () {
 
     // drop-files only be supported in macOS
     // so the tray window must be available
-    tray.on('drop-files', async (event: Event, files: string[]) => {
+    tray.on('drop-files', async (_: Event, files: string[]) => {
       const pasteStyle = db.get(configPaths.settings.pasteStyle) || IPasteStyle.MARKDOWN
       const rawInput = cloneDeep(files)
       const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!

src/main/events/ipcList.ts

@@ -68,7 +68,7 @@ import {
 import picgoCoreIPC from './picgoCoreIPC'
 
 // 处理复制的 URL 和生成短链接的函数
-import { handleCopyUrl, generateShortUrl } from '~/main/utils/common'
+import { handleCopyUrl, generateShortUrl, setTrayToolTip } from '~/main/utils/common'
 
 // 构建主页面、迷你页面、插件页面、图片床列表的菜单函数
 import { buildMainPageMenu, buildMiniPageMenu, buildPluginPageMenu, buildPicBedListMenu } from './remotes/menu'
@@ -136,6 +136,10 @@ export default {
       return uploadChoosedFiles(evt.sender, files)
     })
 
+    ipcMain.on('setTrayToolTip', (_: IpcMainEvent, title: string) => {
+      setTrayToolTip(title)
+    })
+
     // ShortKey Related IPC
     ipcMain.on('updateShortKey', (evt: IpcMainEvent, item: IShortKeyConfig, oldKey: string, from: string) => {
       const result = shortKeyHandler.updateShortKey(item, oldKey, from)

src/main/events/remotes/menu.ts

@@ -31,6 +31,7 @@ import {
 import { PicGo as PicGoCore } from 'piclist'
 import { T } from '~/main/i18n'
 import { configPaths } from '~/universal/utils/configPaths'
+import { setTrayToolTip } from '~/main/utils/common'
 
 interface GuiMenuItem {
   label: string
@@ -185,6 +186,7 @@ const buildPicBedListMenu = () => {
               if (windowManager.has(IWindowList.SETTING_WINDOW)) {
                 windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
               }
+              setTrayToolTip(`${item.type} ${config._configName || 'Default'}`)
             }
           }
         })
@@ -198,6 +200,7 @@ const buildPicBedListMenu = () => {
           if (windowManager.has(IWindowList.SETTING_WINDOW)) {
             windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
           }
+          setTrayToolTip(item.type)
         }
         : undefined
     }

src/main/lifeCycle/index.ts

@@ -167,11 +167,15 @@ class LifeCycle {
       }
       const isHideDock = db.get(configPaths.settings.isHideDock) || false
       const startMode = db.get(configPaths.settings.startMode) || ISartMode.QUIET
+      const currentPicBed = db.get(configPaths.picBed.uploader) || db.get(configPaths.picBed.current) || 'smms'
+      // @ts-ignore
+      const currentPicBedConfig = db.get(`picBed.${currentPicBed}`)?._configName || 'Default'
+      const tooltip = `${currentPicBed} ${currentPicBedConfig}`
       if (process.platform === 'darwin') {
         isHideDock ? app.dock.hide() : setDockMenu()
-        startMode !== ISartMode.NO_TRAY && createTray()
+        startMode !== ISartMode.NO_TRAY && createTray(tooltip)
       } else {
-        createTray()
+        createTray(tooltip)
       }
       db.set(configPaths.needReload, false)
       updateChecker()

src/main/utils/common.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra'
 import db from '~/main/apis/core/datastore'
-import { clipboard, Notification, dialog } from 'electron'
+import { clipboard, Notification, dialog, Tray } from 'electron'
 import { handleUrlEncode } from '~/universal/utils/common'
 import axios from 'axios'
 import FormData from 'form-data'
@@ -8,6 +8,18 @@ import logger from '../apis/core/picgo/logger'
 import { configPaths } from '~/universal/utils/configPaths'
 import { IShortUrlServer } from '~/universal/types/enum'
 
+export let tray: Tray
+
+export const setTray = (t: Tray) => { tray = t }
+
+export const getTray = () => tray
+
+export function setTrayToolTip (title: string): void {
+  if (tray) {
+    tray.setToolTip(title)
+  }
+}
+
 export const handleCopyUrl = (str: string): void => {
   if (db.get(configPaths.settings.autoCopy) !== false) {
     clipboard.writeText(str)

src/main/utils/handleUploaderConfig.ts

@@ -2,6 +2,7 @@ import { v4 as uuid } from 'uuid'
 import { trimValues } from '#/utils/common'
 import picgo from '@core/picgo'
 import { configPaths } from '~/universal/utils/configPaths'
+import { setTrayToolTip } from './common'
 
 export const handleConfigWithFunction = (config: IPicGoPluginOriginConfig[]): IPicGoPluginConfig[] => {
   for (const i in config) {
@@ -65,6 +66,7 @@ export const changeCurrentUploader = (type: string, config?: IStringKeyMap, id?:
     [configPaths.picBed.current]: type,
     [configPaths.picBed.uploader]: type
   })
+  setTrayToolTip(`${type} ${config?._configName || ''}`)
 }
 
 export const selectUploaderConfig = (type: string, id: string) => {

src/renderer/pages/Plugin.vue

@@ -228,28 +228,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-// Element Plus 图标
 import { Close, Download, Refresh, Goods, Remove, Tools } from '@element-plus/icons-vue'
-
-// 国际化函数
 import { T as $T } from '@/i18n/index'
-
-// 组件
 import ConfigForm from '@/components/ConfigFormForPlugin.vue'
-
-// Lodash 函数节流
 import { debounce, DebouncedFunc } from 'lodash'
-
-// Electron 相关
 import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
-
-// 工具函数
 import { handleStreamlinePluginName } from '~/universal/utils/common'
-
-// 事件常量
 import {
   OPEN_URL,
   PICGO_CONFIG_PLUGIN,
@@ -259,20 +246,10 @@ import {
   GET_PICBEDS,
   PICGO_HANDLE_PLUGIN_DONE
 } from '#/events/constants'
-
-// Vue 相关
 import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted, reactive, toRaw } from 'vue'
-
-// 数据发送工具函数
 import { getConfig, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
-
-// Element Plus 消息框组件
 import { ElMessageBox } from 'element-plus'
-
-// Axios
 import axios from 'axios'
-
-// 枚举类型声明
 import { IRPCActionType } from '~/universal/types/enum'
 import { configPaths } from '~/universal/utils/configPaths'
 
@@ -461,26 +438,6 @@ function installPlugin (item: IPicGoPlugin) {
   }
 }
 
-// function uninstallPlugin (val: string) {
-//   pluginList.value.forEach(item => {
-//     if (item.name === val) {
-//       item.ing = true
-//     }
-//   })
-//   loading.value = true
-//   sendToMain('uninstallPlugin', val)
-// }
-
-// function updatePlugin (val: string) {
-//   pluginList.value.forEach(item => {
-//     if (item.fullName === val) {
-//       item.ing = true
-//     }
-//   })
-//   loading.value = true
-//   sendToMain('updatePlugin', val)
-// }
-
 function reloadApp () {
   sendRPC(IRPCActionType.RELOAD_APP)
 }

src/renderer/pages/RenamePage.vue

@@ -51,29 +51,15 @@
     </el-row>
   </div>
 </template>
+
 <script lang="ts" setup>
-// Element Plus 图标
 import { Close } from '@element-plus/icons-vue'
-
-// 事件常量
 import { GET_RENAME_FILE_NAME, RENAME_FILE_NAME } from '#/events/constants'
-
-// 数据发送工具函数
 import { sendToMain } from '@/utils/dataSender'
-
-// 国际化函数
 import { T as $T } from '@/i18n/index'
-
-// Electron 相关
 import { ipcRenderer, IpcRendererEvent } from 'electron'
-
-// Vue 生命周期钩子
 import { onBeforeUnmount, onBeforeMount, ref, reactive } from 'vue'
-
-// 自定义钩子
 import { useIPCOn } from '@/hooks/useIPC'
-
-// Element Plus 表单实例类型
 import { FormInstance } from 'element-plus'
 
 const id = ref<string | null>(null)
@@ -84,7 +70,7 @@ const form = reactive({
   originName: ''
 })
 
-const handleFileName = (event: IpcRendererEvent, newName: string, _originName: string, _id: string) => {
+const handleFileName = (_: IpcRendererEvent, newName: string, _originName: string, _id: string) => {
   form.fileName = newName
   form.originName = _originName
   id.value = _id

src/renderer/pages/ShortKey.vue

@@ -117,22 +117,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-// 按键绑定工具函数
 import keyBinding from '@/utils/key-binding'
-
-// Electron 相关
 import { ipcRenderer, IpcRendererEvent } from 'electron'
-
-// 事件常量
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
-
-// Vue 生命周期钩子
 import { onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
-
-// 数据发送工具函数
 import { getConfig, sendToMain } from '@/utils/dataSender'
-
-// 国际化函数
 import { T as $T } from '@/i18n'
 import { configPaths } from '~/universal/utils/configPaths'
 

src/renderer/pages/TrayPage.vue

@@ -62,31 +62,14 @@
 </template>
 
 <script lang="ts" setup>
-// Vue 相关
 import { reactive, ref, onBeforeUnmount, onBeforeMount } from 'vue'
-
-// Electron 相关
 import { clipboard, ipcRenderer } from 'electron'
-
-// 数据库操作
 import $$db from '@/utils/db'
-
-// 国际化函数
 import { T as $T } from '@/i18n/index'
-
-// Picgo Store 相关类型
 import { IResult } from '@picgo/store/dist/types'
-
-// 事件常量
 import { OPEN_WINDOW } from '#/events/constants'
-
-// 枚举类型声明
 import { IPasteStyle, IWindowList } from '#/types/enum'
-
-// 数据发送工具函数
 import { getConfig, sendToMain } from '@/utils/dataSender'
-
-// 工具函数
 import { handleUrlEncode } from '#/utils/common'
 import { configPaths } from '~/universal/utils/configPaths'
 
@@ -99,8 +82,6 @@ const notification = reactive({
 const clipboardFiles = ref<ImgInfo[]>([])
 const uploadFlag = ref(false)
 
-// const reverseList = computed(() => files.value.slice().reverse())
-
 function openSettingWindow () {
   sendToMain(OPEN_WINDOW, IWindowList.SETTING_WINDOW)
 }
@@ -166,10 +147,6 @@ async function pasteTemplate (style: IPasteStyle, item: ImgInfo, customLink: str
   return tpl[style]
 }
 
-// function calcHeight (width: number, height: number): number {
-//   return height * 160 / width
-// }
-
 function disableDragFile () {
   window.addEventListener('dragover', (e) => {
     e = e || event

src/renderer/pages/UploaderConfigPage.vue

@@ -119,6 +119,7 @@ import { PICBEDS_PAGE, UPLOADER_CONFIG_PAGE } from '@/router/config'
 // 状态管理
 import { useStore } from '@/hooks/useStore'
 import { configPaths } from '~/universal/utils/configPaths'
+import { ipcRenderer } from 'electron'
 
 const $router = useRouter()
 const $route = useRoute()
@@ -130,10 +131,11 @@ const store = useStore()
 
 async function selectItem (id: string) {
   await triggerRPC<void>(IRPCActionType.SELECT_UPLOADER, type.value, id)
+  ipcRenderer.send('setTrayToolTip', `${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`)
   defaultConfigId.value = id
 }
 
-onBeforeRouteUpdate((to, from, next) => {
+onBeforeRouteUpdate((to, _, next) => {
   if (to.params.type && (to.name === UPLOADER_CONFIG_PAGE)) {
     type.value = to.params.type as string
     getCurrentConfigList()
@@ -193,6 +195,8 @@ function setDefaultPicBed (type: string) {
   })
 
   store?.setDefaultPicBed(type)
+  const currentConfigName = curConfigList.value.find(item => item._id === defaultConfigId.value)?._configName
+  ipcRenderer.send('setTrayToolTip', `${type} ${currentConfigName || ''}`)
   const successNotification = new Notification($T('SETTINGS_DEFAULT_PICBED'), {
     body: $T('TIPS_SET_SUCCEED')
   })