feat: 新增「通用设置 > 应用设置 > 显示托盘图标」配置项 (#910)

Author: ayangweb

src/composables/useSharedMenu.ts src/composables/useAppMenu.tssrc/composables/useSharedMenu.ts renamed to src/composables/useAppMenu.ts

@@ -1,4 +1,5 @@
 import { CheckMenuItem, MenuItem, PredefinedMenuItem, Submenu } from '@tauri-apps/api/menu'
+import { exit, relaunch } from '@tauri-apps/plugin-process'
 import { range } from 'es-toolkit'
 import { useI18n } from 'vue-i18n'
 
@@ -7,7 +8,7 @@ import { showWindow } from '@/plugins/window'
 import { useCatStore } from '@/stores/cat'
 import { isMac } from '@/utils/platform'
 
-export function useSharedMenu() {
+export function useAppMenu() {
   const catStore = useCatStore()
   const { t } = useI18n()
 
@@ -59,39 +60,54 @@ export function useSharedMenu() {
     return Promise.all(items)
   }
 
-  const getSharedMenu = async () => {
+  const getBaseMenu = async () => {
     return await Promise.all([
       MenuItem.new({
-        text: t('composables.useSharedMenu.labels.preference'),
+        text: t('composables.useAppMenu.labels.preference'),
         accelerator: isMac ? 'Cmd+,' : '',
         action: () => showWindow(WINDOW_LABEL.PREFERENCE),
       }),
       MenuItem.new({
-        text: catStore.window.visible ? t('composables.useSharedMenu.labels.hideCat') : t('composables.useSharedMenu.labels.showCat'),
+        text: catStore.window.visible ? t('composables.useAppMenu.labels.hideCat') : t('composables.useAppMenu.labels.showCat'),
         action: () => {
           catStore.window.visible = !catStore.window.visible
         },
       }),
       PredefinedMenuItem.new({ item: 'Separator' }),
       CheckMenuItem.new({
-        text: t('composables.useSharedMenu.labels.passThrough'),
+        text: t('composables.useAppMenu.labels.passThrough'),
         checked: catStore.window.passThrough,
         action: () => {
           catStore.window.passThrough = !catStore.window.passThrough
         },
       }),
       Submenu.new({
-        text: t('composables.useSharedMenu.labels.windowSize'),
+        text: t('composables.useAppMenu.labels.windowSize'),
         items: await getScaleMenuItems(),
       }),
       Submenu.new({
-        text: t('composables.useSharedMenu.labels.opacity'),
+        text: t('composables.useAppMenu.labels.opacity'),
         items: await getOpacityMenuItems(),
       }),
     ])
   }
 
+  const getExitMenu = async () => {
+    return await Promise.all([
+      MenuItem.new({
+        text: t('composables.useAppMenu.labels.restartApp'),
+        action: relaunch,
+      }),
+      MenuItem.new({
+        text: t('composables.useAppMenu.labels.quitApp'),
+        accelerator: isMac ? 'Cmd+Q' : '',
+        action: () => exit(0),
+      }),
+    ])
+  }
+
   return {
-    getSharedMenu,
+    getBaseMenu,
+    getExitMenu,
   }
 }

src/composables/useTray.ts

@@ -6,7 +6,6 @@ import { Menu, MenuItem, PredefinedMenuItem } from '@tauri-apps/api/menu'
 import { resolveResource } from '@tauri-apps/api/path'
 import { TrayIcon } from '@tauri-apps/api/tray'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { exit, relaunch } from '@tauri-apps/plugin-process'
 import { watchDebounced } from '@vueuse/core'
 import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -15,7 +14,7 @@ import { GITHUB_LINK, LISTEN_KEY } from '../constants'
 import { showWindow } from '../plugins/window'
 import { isMac } from '../utils/platform'
 
-import { useSharedMenu } from './useSharedMenu'
+import { useAppMenu } from './useAppMenu'
 
 import { useCatStore } from '@/stores/cat'
 import { useGeneralStore } from '@/stores/general'
@@ -25,7 +24,7 @@ const TRAY_ID = 'BONGO_CAT_TRAY'
 export function useTray() {
   const catStore = useCatStore()
   const generalStore = useGeneralStore()
-  const { getSharedMenu } = useSharedMenu()
+  const { getBaseMenu, getExitMenu } = useAppMenu()
   const { t } = useI18n()
 
   watch([() => catStore.window.visible, () => catStore.window.passThrough, () => generalStore.appearance.language], () => {
@@ -36,6 +35,10 @@ export function useTray() {
     updateTrayMenu()
   }, { debounce: 200 })
 
+  const getTrayById = () => {
+    return TrayIcon.getById(TRAY_ID)
+  }
+
   const createTray = async () => {
     const tray = await getTrayById()
 
@@ -61,15 +64,11 @@ export function useTray() {
     return TrayIcon.new(options)
   }
 
-  const getTrayById = () => {
-    return TrayIcon.getById(TRAY_ID)
-  }
-
   const getTrayMenu = async () => {
     const appVersion = await getVersion()
 
     const items = await Promise.all([
-      ...await getSharedMenu(),
+      ...await getBaseMenu(),
       PredefinedMenuItem.new({ item: 'Separator' }),
       MenuItem.new({
         text: t('composables.useTray.checkUpdate'),
@@ -88,15 +87,7 @@ export function useTray() {
         text: `v${appVersion}`,
         enabled: false,
       }),
-      MenuItem.new({
-        text: t('composables.useTray.restartApp'),
-        action: relaunch,
-      }),
-      MenuItem.new({
-        text: t('composables.useTray.quitApp'),
-        accelerator: isMac ? 'Cmd+Q' : '',
-        action: () => exit(0),
-      }),
+      ...await getExitMenu(),
     ])
 
     return Menu.new({ items })
@@ -112,7 +103,11 @@ export function useTray() {
     tray.setMenu(menu)
   }
 
-  return {
-    createTray,
-  }
+  watch(() => generalStore.app.trayVisible, async (visible) => {
+    const tray = await getTrayById() ?? await createTray()
+
+    if (!tray) return
+
+    tray.setVisible(visible)
+  }, { immediate: true })
 }

src/locales/en-US.json

@@ -44,6 +44,7 @@
           "appSettings": "Application Settings",
           "launchOnStartup": "Launch on Startup",
           "showTaskbarIcon": "Show Taskbar Icon",
+          "showTrayIcon": "Show Tray Icon",
           "appearanceSettings": "Appearance Settings",
           "themeMode": "Theme Mode",
           "language": "Language",
@@ -59,6 +60,7 @@
         },
         "hints": {
           "showTaskbarIcon": "When enabled, the window can be captured via OBS Studio.",
+          "showTrayIcon": "When enabled, the app icon is displayed in the system tray.",
           "inputMonitoringPermission": "Enable input monitoring to receive keyboard and mouse events from the system.",
           "inputMonitoringPermissionGuide": "If the permission is already enabled, select it and click the \"-\" button to remove it, then manually add it again and restart the app."
         },
@@ -161,21 +163,21 @@
     }
   },
   "composables": {
-    "useSharedMenu": {
+    "useAppMenu": {
       "labels": {
         "preference": "Preferences...",
         "hideCat": "Hide Cat",
         "showCat": "Show Cat",
         "passThrough": "Pass Through",
         "windowSize": "Window Size",
-        "opacity": "Opacity"
+        "opacity": "Opacity",
+        "restartApp": "Restart App",
+        "quitApp": "Quit App"
       }
     },
     "useTray": {
       "checkUpdate": "Check for Updates",
-      "openSource": "Open Source",
-      "restartApp": "Restart App",
-      "quitApp": "Quit App"
+      "openSource": "Open Source"
     }
   },
   "utils": {

src/locales/pt-BR.json

@@ -44,6 +44,7 @@
           "appSettings": "Configurações do aplicativo",
           "launchOnStartup": "Iniciar na inicialização",
           "showTaskbarIcon": "Mostrar ícone na barra de tarefas",
+          "showTrayIcon": "Mostrar ícone na bandeja",
           "appearanceSettings": "Configurações de aparência",
           "themeMode": "Tema",
           "language": "Idiomas",
@@ -59,6 +60,7 @@
         },
         "hints": {
           "showTaskbarIcon": "Uma vez ativado, você pode capturar a janela via OBS Studio.",
+          "showTrayIcon": "Quando ativado, o ícone do aplicativo é exibido na bandeja do sistema.",
           "inputMonitoringPermission": "Ative a permissão de monitoramento de entrada para receber eventos de teclado e mouse do sistema para responder às suas ações.",
           "inputMonitoringPermissionGuide": "Se a permissão já estiver ativada, primeiro selecione-a e clique no botão \"-\" para removê-la. Em seguida, adicione-a novamente manualmente e reinicie o aplicativo para garantir que a permissão entre em vigor."
         },
@@ -161,21 +163,21 @@
     }
   },
   "composables": {
-    "useSharedMenu": {
+    "useAppMenu": {
       "labels": {
         "preference": "Preferências...",
         "hideCat": "Ocultar Gato",
         "showCat": "Mostrar Gato",
         "passThrough": "Janela Transparente",
         "windowSize": "Tamanho da Janela",
-        "opacity": "Opacidade"
+        "opacity": "Opacidade",
+        "restartApp": "Reiniciar",
+        "quitApp": "Sair"
       }
     },
     "useTray": {
       "checkUpdate": "Verificar atualizações",
-      "openSource": "Código Fonte",
-      "restartApp": "Reiniciar",
-      "quitApp": "Sair"
+      "openSource": "Código Fonte"
     }
   },
   "utils": {

src/locales/vi-VN.json

@@ -44,6 +44,7 @@
           "appSettings": "Cài đặt ứng dụng",
           "launchOnStartup": "Khởi động cùng hệ thống",
           "showTaskbarIcon": "Hiện biểu tượng trên thanh tác vụ (icon taskbar)",
+          "showTrayIcon": "Hiện biểu tượng trên khay hệ thống (tray)",
           "appearanceSettings": "Cài đặt giao diện",
           "themeMode": "Giao diện",
           "language": "Ngôn ngữ",
@@ -59,6 +60,7 @@
         },
         "hints": {
           "showTaskbarIcon": "Bật để có thể quay cửa sổ qua OBS.",
+          "showTrayIcon": "Bật để hiện biểu tượng ứng dụng trên khay hệ thống.",
           "inputMonitoringPermission": "Bật quyền giám sát để nhận sự kiện bàn phím và chuột từ hệ thống nhằm phản hồi thao tác của bạn.",
           "inputMonitoringPermissionGuide": "Nếu quyền đã được bật, hãy chọn nó và nhấn nút \"-\" để xóa. Sau đó thêm lại thủ công và khởi động lại ứng dụng để đảm bảo quyền được áp dụng."
         },
@@ -161,21 +163,21 @@
     }
   },
   "composables": {
-    "useSharedMenu": {
+    "useAppMenu": {
       "labels": {
         "preference": "Tùy chỉnh...",
         "hideCat": "Ẩn Mèo",
         "showCat": "Hiện Mèo",
         "passThrough": "Click xuyên",
         "windowSize": "Kích thước",
-        "opacity": "Độ mờ"
+        "opacity": "Độ mờ",
+        "restartApp": "Khởi động lại",
+        "quitApp": "Thoát"
       }
     },
     "useTray": {
       "checkUpdate": "Kiểm tra cập nhật",
-      "openSource": "Mã nguồn",
-      "restartApp": "Khởi động lại",
-      "quitApp": "Thoát"
+      "openSource": "Mã nguồn"
     }
   },
   "utils": {

src/locales/zh-CN.json

@@ -44,6 +44,7 @@
           "appSettings": "应用设置",
           "launchOnStartup": "开机自启动",
           "showTaskbarIcon": "显示任务栏图标",
+          "showTrayIcon": "显示托盘图标",
           "appearanceSettings": "外观设置",
           "themeMode": "主题模式",
           "language": "语言",
@@ -59,6 +60,7 @@
         },
         "hints": {
           "showTaskbarIcon": "启用后，即可通过 OBS Studio 捕获窗口。",
+          "showTrayIcon": "启用后，在系统托盘中显示应用图标。",
           "inputMonitoringPermission": "开启输入监控权限，以便接收系统的键盘和鼠标事件来响应你的操作。",
           "inputMonitoringPermissionGuide": "如果权限已开启，请先选中并点击“-”按钮将其删除，然后重新手动添加，最后重启应用以确保权限生效。"
         },
@@ -161,21 +163,21 @@
     }
   },
   "composables": {
-    "useSharedMenu": {
+    "useAppMenu": {
       "labels": {
         "preference": "偏好设置...",
         "hideCat": "隐藏猫咪",
         "showCat": "显示猫咪",
         "passThrough": "窗口穿透",
         "windowSize": "窗口尺寸",
-        "opacity": "不透明度"
+        "opacity": "不透明度",
+        "restartApp": "重启应用",
+        "quitApp": "退出应用"
       }
     },
     "useTray": {
       "checkUpdate": "检查更新",
-      "openSource": "开源地址",
-      "restartApp": "重启应用",
-      "quitApp": "退出应用"
+      "openSource": "开源地址"
     }
   },
   "utils": {

src/locales/zh-TW.json

@@ -44,6 +44,7 @@
           "appSettings": "應用程式設定",
           "launchOnStartup": "開機自動啟動",
           "showTaskbarIcon": "顯示工作列圖示",
+          "showTrayIcon": "顯示托盤圖示",
           "appearanceSettings": "外觀設定",
           "themeMode": "主題模式",
           "language": "語言",
@@ -59,6 +60,7 @@
         },
         "hints": {
           "showTaskbarIcon": "啟用後，即可透過 OBS Studio 擷取視窗。",
+          "showTrayIcon": "啟用後，在系統托盤中顯示應用程式圖示。",
           "inputMonitoringPermission": "開啟輸入監控權限，以便接收系統的鍵盤和滑鼠游標事件來回應您的操作。",
           "inputMonitoringPermissionGuide": "如果權限已開啟，請先選中並點擊「-」按鈕將其刪除，然後重新手動新增，最後重啟應用程式以確保權限生效。"
         },
@@ -161,21 +163,21 @@
     }
   },
   "composables": {
-    "useSharedMenu": {
+    "useAppMenu": {
       "labels": {
         "preference": "偏好設定…",
         "hideCat": "隱藏貓咪",
         "showCat": "顯示貓咪",
         "passThrough": "視窗穿透",
         "windowSize": "視窗尺寸",
-        "opacity": "不透明度"
+        "opacity": "不透明度",
+        "restartApp": "重啟應用程式",
+        "quitApp": "退出應用程式"
       }
     },
     "useTray": {
       "checkUpdate": "檢查更新",
-      "openSource": "開源網址",
-      "restartApp": "重啟應用程式",
-      "quitApp": "退出應用程式"
+      "openSource": "開源網址"
     }
   },
   "utils": {