feat: 新增「猫咪设置 > 窗口设置 > 窗口位置」配置项 (#764)

Author: ayangweb

src-tauri/src/core/setup/macos.rs

@@ -57,7 +57,7 @@ pub fn platform(
             "window_did_resize" => {
                 window_move_event();
 
-                if let Ok(size) = main_window.inner_size() {
+                if let Ok(size) = main_window.outer_size() {
                     let _ = main_window.emit_to(target, WINDOW_RESIZED_EVENT, size);
                 }
             }

src/composables/useWindowPosition.ts

@@ -0,0 +1,47 @@
+import { PhysicalPosition } from '@tauri-apps/api/dpi'
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
+import { onMounted, ref, watch } from 'vue'
+
+import { useCatStore } from '@/stores/cat'
+import { getCursorMonitor } from '@/utils/monitor'
+
+const appWindow = getCurrentWebviewWindow()
+
+export function useWindowPosition() {
+  const catStore = useCatStore()
+  const isMounted = ref(false)
+
+  const setWindowPosition = async () => {
+    const monitor = await getCursorMonitor()
+
+    if (!monitor) return
+
+    const windowSize = await appWindow.outerSize()
+
+    switch (catStore.window.position) {
+      case 'topLeft':
+        return appWindow.setPosition(new PhysicalPosition(0, 0))
+      case 'topRight':
+        return appWindow.setPosition(new PhysicalPosition(monitor.size.width - windowSize.width, 0))
+      case 'bottomLeft':
+        return appWindow.setPosition(new PhysicalPosition(0, monitor.size.height - windowSize.height))
+      default:
+        return appWindow.setPosition(new PhysicalPosition(monitor.size.width - windowSize.width, monitor.size.height - windowSize.height))
+    }
+  }
+
+  onMounted(async () => {
+    await setWindowPosition()
+
+    isMounted.value = true
+
+    appWindow.onScaleChanged(setWindowPosition)
+  })
+
+  watch(() => catStore.window.position, setWindowPosition)
+
+  return {
+    isMounted,
+    setWindowPosition,
+  }
+}

src/locales/en-US.json

@@ -21,7 +21,8 @@
           "windowRadius": "Window Radius",
           "opacity": "Opacity",
           "autoReleaseDelay": "Auto Release Delay",
-          "hideOnHover": "Hide on Hover"
+          "hideOnHover": "Hide on Hover",
+          "position": "Window Position"
         },
         "hints": {
           "mirrorMode": "When enabled, the model will be mirrored horizontally.",
@@ -31,7 +32,14 @@
           "alwaysOnTop": "When enabled, the window stays above all other windows.",
           "windowSize": "Move mouse to window edge, or hold Shift and right-drag to resize.",
           "autoReleaseDelay": "On Windows, some system keys cannot capture release events and will auto-release after timeout.",
-          "hideOnHover": "When enabled, the window hides when mouse hovers over it."
+          "hideOnHover": "When enabled, the window hides when mouse hovers over it.",
+          "position": "Takes effect after the app starts, or when this parameter, window size, model, or screen resolution changes."
+        },
+        "options": {
+          "topLeft": "Top Left",
+          "topRight": "Top Right",
+          "bottomLeft": "Bottom Left",
+          "bottomRight": "Bottom Right"
         }
       },
       "general": {

src/locales/pt-BR.json

@@ -21,7 +21,8 @@
           "windowRadius": "Raio da Janela",
           "opacity": "Opacidade",
           "autoReleaseDelay": "Atraso de Liberação Automática",
-          "hideOnHover": "Ocultar ao Passar o Mouse"
+          "hideOnHover": "Ocultar ao Passar o Mouse",
+          "position": "Posição da Janela"
         },
         "hints": {
           "mirrorMode": "Quando ativado, o modelo será invertido horizontalmente.",
@@ -31,7 +32,14 @@
           "alwaysOnTop": "Quando ativado, a janela sempre ficará acima de outros aplicativos.",
           "windowSize": "Mova o mouse para a borda da janela ou segure Shift e arraste com o botão direito para redimensionar.",
           "autoReleaseDelay": "Devido ao Windows não capturar eventos de liberação de certas teclas de nível do sistema, elas serão automaticamente tratadas como liberadas após um tempo limite.",
-          "hideOnHover": "Quando ativado, a janela será ocultada quando o mouse passar sobre ela."
+          "hideOnHover": "Quando ativado, a janela será ocultada quando o mouse passar sobre ela.",
+          "position": "Entra em vigor após inicializar o aplicativo ou quando este parâmetro, o tamanho da janela, o modelo ou a resolução de tela é alterado."
+        },
+        "options": {
+          "topLeft": "Canto Superior Esquerdo",
+          "topRight": "Canto Superior Direito",
+          "bottomLeft": "Canto Inferior Esquerdo",
+          "bottomRight": "Canto Inferior Direito"
         }
       },
       "general": {

src/locales/vi-VN.json

@@ -21,7 +21,8 @@
           "windowRadius": "Độ bo tròn cửa sổ",
           "opacity": "Độ mờ",
           "autoReleaseDelay": "Độ trễ tự động nhả phím",
-          "hideOnHover": "Ẩn khi di chuột"
+          "hideOnHover": "Ẩn khi di chuột",
+          "position": "Vị trí cửa sổ"
         },
         "hints": {
           "mirrorMode": "Bật để lật ngang mô hình.",
@@ -31,7 +32,14 @@
           "alwaysOnTop": "Bật để cửa sổ luôn nằm trên ứng dụng khác.",
           "windowSize": "Di chuyển chuột đến mép cửa sổ hoặc giữ Shift và kéo chuột phải để thay đổi kích thước.",
           "autoReleaseDelay": "Do Windows không bắt được sự kiện nhả của một số phím hệ thống, các phím đó sẽ được tự động xem như đã nhả sau khi hết thời gian chờ.",
-          "hideOnHover": "Khi bật, cửa sổ sẽ ẩn khi chuột di chuyển vào."
+          "hideOnHover": "Khi bật, cửa sổ sẽ ẩn khi chuột di chuyển vào.",
+          "position": "Có hiệu lực sau khi khởi động ứng dụng hoặc khi tham số này, kích thước cửa sổ, mô hình hoặc độ phân giải màn hình thay đổi."
+        },
+        "options": {
+          "topLeft": "Góc trên cùng bên trái",
+          "topRight": "Góc trên cùng bên phải",
+          "bottomLeft": "Góc dưới cùng bên trái",
+          "bottomRight": "Góc dưới cùng bên phải"
         }
       },
       "general": {

src/locales/zh-CN.json

@@ -21,7 +21,8 @@
           "windowRadius": "窗口圆角",
           "opacity": "不透明度",
           "autoReleaseDelay": "按键自动释放延迟",
-          "hideOnHover": "鼠标移入隐藏"
+          "hideOnHover": "鼠标移入隐藏",
+          "position": "窗口位置"
         },
         "hints": {
           "mirrorMode": "启用后，模型将水平镜像翻转。",
@@ -31,7 +32,14 @@
           "alwaysOnTop": "启用后，窗口始终显示在其他应用程序上方。",
           "windowSize": "将鼠标移至窗口边缘，或按住 Shift 并右键拖动，也可以调整窗口大小。",
           "autoReleaseDelay": "由于 Windows 下部分系统级按键无法捕获释放事件，超时后将自动视为已释放。",
-          "hideOnHover": "启用后，鼠标悬停在窗口上时，窗口会隐藏。"
+          "hideOnHover": "启用后，鼠标悬停在窗口上时，窗口会隐藏。",
+          "position": "应用启动后，或当此参数、窗口尺寸、模型、电脑分辨率发生变化时生效。"
+        },
+        "options": {
+          "topLeft": "左上角",
+          "topRight": "右上角",
+          "bottomLeft": "左下角",
+          "bottomRight": "右下角"
         }
       },
       "general": {

src/pages/main/index.vue

@@ -14,6 +14,7 @@ import { useDevice } from '@/composables/useDevice'
 import { useGamepad } from '@/composables/useGamepad'
 import { useModel } from '@/composables/useModel'
 import { useSharedMenu } from '@/composables/useSharedMenu'
+import { useWindowPosition } from '@/composables/useWindowPosition'
 import { hideWindow, setAlwaysOnTop, setTaskbarVisibility, showWindow } from '@/plugins/window'
 import { useCatStore } from '@/stores/cat'
 import { useGeneralStore } from '@/stores/general.ts'
@@ -32,6 +33,7 @@ const generalStore = useGeneralStore()
 const resizing = ref(false)
 const backgroundImagePath = ref<string>()
 const { stickActive } = useGamepad()
+const { isMounted, setWindowPosition } = useWindowPosition()
 
 onMounted(startListening)
 
@@ -40,6 +42,8 @@ onUnmounted(handleDestroy)
 const debouncedResize = useDebounceFn(async () => {
   await handleResize()
 
+  await setWindowPosition()
+
   resizing.value = false
 }, 100)
 
@@ -52,7 +56,7 @@ useEventListener('resize', () => {
 watch(() => modelStore.currentModel, async (model) => {
   if (!model) return
 
-  handleLoad()
+  await handleLoad()
 
   const path = join(model.path, 'resources', 'background.png')
 
@@ -76,6 +80,8 @@ watch(() => modelStore.currentModel, async (model) => {
       modelStore.supportKeys[fileName] = join(groupDir, file.name)
     }
   }
+
+  setWindowPosition()
 }, { deep: true, immediate: true })
 
 watch([() => catStore.window.scale, modelSize], async ([scale, modelSize]) => {
@@ -145,6 +151,7 @@ function handleMouseMove(event: MouseEvent) {
 
 <template>
   <div
+    v-show="isMounted"
     class="relative size-screen overflow-hidden children:(absolute size-full)"
     :class="{ '-scale-x-100': catStore.model.mirror }"
     :style="{
@@ -174,7 +181,7 @@ function handleMouseMove(event: MouseEvent) {
       v-show="resizing"
       class="flex items-center justify-center bg-black"
     >
-      <span class="text-center text-10vw text-white">
+      <span class="text-center text-[10vw] text-white">
         {{ $t('pages.main.hints.redrawing') }}
       </span>
     </div>

src/pages/preference/components/cat/components/position/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Select, SelectOption } from 'ant-design-vue'
+
+import ProListItem from '@/components/pro-list-item/index.vue'
+import { useCatStore } from '@/stores/cat'
+
+const catStore = useCatStore()
+</script>
+
+<template>
+  <ProListItem
+    :description="$t('pages.preference.cat.hints.position')"
+    :title="$t('pages.preference.cat.labels.position')"
+  >
+    <Select v-model:value="catStore.window.position">
+      <SelectOption value="bottomRight">
+        {{ $t('pages.preference.cat.options.bottomRight') }}
+      </SelectOption>
+      <SelectOption value="bottomLeft">
+        {{ $t('pages.preference.cat.options.bottomLeft') }}
+      </SelectOption>
+      <SelectOption value="topLeft">
+        {{ $t('pages.preference.cat.options.topLeft') }}
+      </SelectOption>
+      <SelectOption value="topRight">
+        {{ $t('pages.preference.cat.options.topRight') }}
+      </SelectOption>
+    </Select>
+  </ProListItem>
+</template>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { InputNumber, Slider, Switch } from 'ant-design-vue'
 
+import Position from './components/position/index.vue'
+
 import ProList from '@/components/pro-list/index.vue'
 import ProListItem from '@/components/pro-list-item/index.vue'
 import { useCatStore } from '@/stores/cat'
@@ -46,6 +48,8 @@ const catStore = useCatStore()
   </ProList>
 
   <ProList :title="$t('pages.preference.cat.labels.windowSettings')">
+    <Position />
+
     <ProListItem
       :description="$t('pages.preference.cat.hints.passThrough')"
       :title="$t('pages.preference.cat.labels.passThrough')"

src/stores/cat.ts

@@ -16,6 +16,7 @@ export interface CatStore {
     opacity: number
     radius: number
     hideOnHover: boolean
+    position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
   }
 }
 
@@ -61,6 +62,7 @@ export const useCatStore = defineStore('cat', () => {
     opacity: 100,
     radius: 0,
     hideOnHover: false,
+    position: 'bottomRight',
   })
 
   const init = () => {