refactor: refactoring window visibility control logic (#445)

src-tauri/src/lib.rs

@@ -2,7 +2,7 @@ mod core;
 mod utils;
 
 use core::{device, prevent_default, setup};
-use tauri::{Manager, generate_handler};
+use tauri::{Manager, WindowEvent, generate_handler};
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_custom_window::{
     MAIN_WINDOW_LABEL, PREFERENCE_WINDOW_LABEL, show_preference_window,
@@ -48,6 +48,14 @@ pub fn run() {
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
+        .on_window_event(|window, event| match event {
+            WindowEvent::CloseRequested { api, .. } => {
+                let _ = window.hide();
+
+                api.prevent_close();
+            }
+            _ => {}
+        })
         .build(tauri::generate_context!())
         .expect("error while running tauri application");
 

src/App.vue

@@ -38,6 +38,7 @@ onMounted(async () => {
   await catStore.$tauri.start()
   await generalStore.$tauri.start()
   await shortcutStore.$tauri.start()
+  catStore.visible = true
 
   restoreState()
 })

src/composables/useSharedMenu.ts

@@ -1,12 +1,11 @@
 import { CheckMenuItem, MenuItem, PredefinedMenuItem, Submenu } from '@tauri-apps/api/menu'
 import { range } from 'es-toolkit'
 
-import { useAppStore } from '@/stores/app'
+import { showWindow } from '@/plugins/window'
 import { useCatStore } from '@/stores/cat'
 import { isMac } from '@/utils/platform'
 
 export function useSharedMenu() {
-  const appStore = useAppStore()
   const catStore = useCatStore()
 
   const getScaleMenuItems = async () => {
@@ -62,14 +61,12 @@ export function useSharedMenu() {
       MenuItem.new({
         text: '偏好设置...',
         accelerator: isMac ? 'Cmd+,' : '',
-        action: () => {
-          appStore.visiblePreference = true
-        },
+        action: () => showWindow('preference'),
       }),
       MenuItem.new({
-        text: appStore.visibleCat ? '隐藏猫咪' : '显示猫咪',
+        text: catStore.visible ? '隐藏猫咪' : '显示猫咪',
         action: () => {
-          appStore.visibleCat = !appStore.visibleCat
+          catStore.visible = !catStore.visible
         },
       }),
       PredefinedMenuItem.new({ item: 'Separator' }),

src/pages/main/index.vue

@@ -9,7 +9,6 @@ import { useDevice } from '@/composables/useDevice'
 import { useModel } from '@/composables/useModel'
 import { useSharedMenu } from '@/composables/useSharedMenu'
 import { hideWindow, setAlwaysOnTop, showWindow } from '@/plugins/window'
-import { useAppStore } from '@/stores/app'
 import { useCatStore } from '@/stores/cat'
 import { useModelStore } from '@/stores/model'
 import { join } from '@/utils/path'
@@ -20,7 +19,6 @@ const { backgroundImage, handleDestroy, handleResize, handleMouseDown, handleMou
 const catStore = useCatStore()
 const { getSharedMenu } = useSharedMenu()
 const modelStore = useModelStore()
-const appStore = useAppStore()
 const resizing = ref(false)
 
 onUnmounted(handleDestroy)
@@ -49,7 +47,7 @@ watch(pressedRightKeys, (keys) => {
   handleKeyDown('right', keys.length > 0)
 })
 
-watch(() => appStore.visibleCat, async (value) => {
+watch(() => catStore.visible, async (value) => {
   value ? showWindow() : hideWindow()
 })
 

src/pages/preference/components/shortcut/index.vue

@@ -4,21 +4,20 @@ import { storeToRefs } from 'pinia'
 import ProList from '@/components/pro-list/index.vue'
 import ProShortcut from '@/components/pro-shortcut/index.vue'
 import { useTauriKeyPress } from '@/composables/useTauriKeyPress'
-import { useAppStore } from '@/stores/app'
+import { toggleWindowVisible } from '@/plugins/window'
 import { useCatStore } from '@/stores/cat'
 import { useShortcutStore } from '@/stores/shortcut.ts'
 
 const shortcutStore = useShortcutStore()
 const { visibleCat, visiblePreference, mirrorMode, penetrable, alwaysOnTop } = storeToRefs(shortcutStore)
-const appStore = useAppStore()
 const catStore = useCatStore()
 
 useTauriKeyPress(visibleCat, () => {
-  appStore.visibleCat = !appStore.visibleCat
+  catStore.visible = !catStore.visible
 })
 
 useTauriKeyPress(visiblePreference, () => {
-  appStore.visiblePreference = !appStore.visiblePreference
+  toggleWindowVisible('preference')
 })
 
 useTauriKeyPress(mirrorMode, () => {

src/pages/preference/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { Flex } from 'ant-design-vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import About from './components/about/index.vue'
 import Cat from './components/cat/index.vue'
@@ -11,27 +10,15 @@ import Shortcut from './components/shortcut/index.vue'
 
 import UpdateApp from '@/components/update-app/index.vue'
 import { useTray } from '@/composables/useTray'
-import { hideWindow, showWindow } from '@/plugins/window'
 import { useAppStore } from '@/stores/app'
 import { isMac } from '@/utils/platform'
 
 const { createTray } = useTray()
-const appWindow = getCurrentWebviewWindow()
 const appStore = useAppStore()
 const current = ref(0)
 
 onMounted(async () => {
   createTray()
-
-  appWindow.onCloseRequested((event) => {
-    event.preventDefault()
-
-    appStore.visiblePreference = false
-  })
-})
-
-watch(() => appStore.visiblePreference, (value) => {
-  value ? showWindow() : hideWindow()
 })
 
 const menus = [

src/plugins/window.ts

@@ -1,5 +1,6 @@
 import { invoke } from '@tauri-apps/api/core'
 import { emit } from '@tauri-apps/api/event'
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
 
 import { LISTEN_KEY } from '../constants'
 
@@ -30,3 +31,17 @@ export function hideWindow(label?: WindowLabel) {
 export function setAlwaysOnTop(alwaysOnTop: boolean) {
   invoke(COMMAND.SET_ALWAYS_ON_TOP, { alwaysOnTop })
 }
+
+export async function toggleWindowVisible(label?: WindowLabel) {
+  const appWindow = getCurrentWebviewWindow()
+
+  if (appWindow.label !== label) return
+
+  const visible = await appWindow.isVisible()
+
+  if (visible) {
+    return hideWindow(label)
+  }
+
+  return showWindow(label)
+}

src/stores/app.ts

@@ -8,21 +8,15 @@ export const useAppStore = defineStore('app', () => {
   const name = ref('')
   const version = ref('')
   const windowState = reactive<WindowState>({})
-  const visibleCat = ref(true)
-  const visiblePreference = ref(false)
 
   onMounted(async () => {
     name.value = await getName()
     version.value = await getVersion()
-    visibleCat.value = true
-    visiblePreference.value = false
   })
 
   return {
     name,
     version,
     windowState,
-    visibleCat,
-    visiblePreference,
   }
 })

src/stores/cat.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 export const useCatStore = defineStore('cat', () => {
+  const visible = ref(false)
   const mirrorMode = ref(false)
   const singleMode = ref(false)
   const mouseMirror = ref(false)
@@ -11,6 +12,7 @@ export const useCatStore = defineStore('cat', () => {
   const opacity = ref(100)
 
   return {
+    visible,
     mirrorMode,
     singleMode,
     mouseMirror,