feat: 支持「猫咪设置 > 窗口设置 > 鼠标移入隐藏」延迟设置 (#935)

Author: ayangweb

src/components/pro-list-item/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Flex } from 'ant-design-vue'
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 
 const { title, description, vertical } = defineProps<{
   title: string
   description?: string
   vertical?: boolean
 }>()
 
-const slots = useSlots()
+const slots = defineSlots()
 
 const hasDescription = computed(() => {
   return description || slots.description

src/composables/useDevice.ts

@@ -114,26 +114,51 @@ export function useDevice() {
     return nextKey
   }
 
-  const handleCursorMove = async (cursorPoint: CursorPoint) => {
-    const x = cursorPoint.x * scaleFactor.value
-    const y = cursorPoint.y * scaleFactor.value
-
-    handleMouseMove(new PhysicalPosition(x, y))
+  const onHideOnHover = (() => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let wasInWindow = false
 
-    if (catStore.window.hideOnHover) {
+    return (x: number, y: number) => {
       const { x: winX, y: winY, width, height } = appStore.windowState[WINDOW_LABEL.MAIN] ?? {}
 
       if (isNil(winX) || isNil(winY) || isNil(width) || isNil(height)) return
 
       const isInWindow = inBetween(x, winX, winX + width)
         && inBetween(y, winY, winY + height)
 
-      document.body.style.setProperty('opacity', isInWindow ? '0' : 'unset')
+      if (isInWindow === wasInWindow) return
+
+      if (timer) {
+        clearTimeout(timer)
+
+        timer = void 0
+      }
+
+      if (isInWindow) {
+        timer = setTimeout(() => {
+          document.body.style.setProperty('opacity', '0')
+
+          appWindow.setIgnoreCursorEvents(true)
+        }, catStore.window.hideOnHoverDelay * 1000)
+      } else {
+        document.body.style.setProperty('opacity', 'unset')
 
-      if (!catStore.window.passThrough) {
-        appWindow.setIgnoreCursorEvents(isInWindow)
+        appWindow.setIgnoreCursorEvents(catStore.window.passThrough)
       }
+
+      wasInWindow = isInWindow
     }
+  })()
+
+  const handleCursorMove = async (cursorPoint: CursorPoint) => {
+    const x = cursorPoint.x * scaleFactor.value
+    const y = cursorPoint.y * scaleFactor.value
+
+    handleMouseMove(new PhysicalPosition(x, y))
+
+    if (!catStore.window.hideOnHover) return
+
+    onHideOnHover(x, y)
   }
 
   const handleAutoRelease = (key: string, delay = 100) => {

src/locales/en-US.json

@@ -37,7 +37,7 @@
           "keepInScreen": "When enabled, the window automatically stays within the screen boundaries.",
           "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 automatically on mouse hover. You can set a delay; 0 means hide immediately.",
           "maxFPS": "Limit the maximum frame rate for model rendering. Lowering the frame rate can reduce CPU/GPU usage."
         }
       },

src/locales/pt-BR.json

@@ -37,7 +37,7 @@
           "keepInScreen": "Quando ativado, a janela permanece automaticamente dentro dos limites da tela.",
           "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 se oculta automaticamente ao passar o mouse. Você pode definir um atraso; 0 significa ocultar imediatamente.",
           "maxFPS": "Limitar a taxa máxima de quadros para renderização do modelo. Reduzir a taxa de quadros pode diminuir o uso de CPU/GPU."
         }
       },

src/locales/vi-VN.json

@@ -37,7 +37,7 @@
           "keepInScreen": "Khi bật, cửa sổ sẽ tự động giữ trong ranh giới màn hình.",
           "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ổ tự động ẩn khi chuột di vào. Có thể đặt thời gian trễ, 0 nghĩa là ẩn ngay.",
           "maxFPS": "Giới hạn tốc độ khung hình tối đa cho việc render mô hình. Giảm tốc độ khung hình có thể giảm mức sử dụng CPU/GPU."
         }
       },

src/locales/zh-CN.json

@@ -37,7 +37,7 @@
           "keepInScreen": "启用后，窗口会自动调整位置，防止超出屏幕边界。",
           "windowSize": "将鼠标移至窗口边缘，或按住 Shift 并右键拖动，也可以调整窗口大小。",
           "autoReleaseDelay": "由于 Windows 下部分系统级按键无法捕获释放事件，超时后将自动视为已释放。",
-          "hideOnHover": "启用后，鼠标悬停在窗口上时，窗口会隐藏。",
+          "hideOnHover": "启用后，鼠标悬停窗口时自动隐藏。可设置延迟时间，0 表示立即隐藏。",
           "maxFPS": "限制模型渲染的最大帧率，降低帧率可以减少 CPU/GPU 占用。"
         }
       },

src/locales/zh-TW.json

@@ -37,7 +37,7 @@
           "keepInScreen": "啟用後，視窗會自動調整位置，防止超出螢幕邊界。",
           "windowSize": "將滑鼠游標移至視窗邊緣，或按住 Shift 並右鍵拖曳，也可以調整視窗大小。",
           "autoReleaseDelay": "由於 Windows 下部份系統級按鍵無法擷取釋放事件，超時後將自動視為已釋放。",
-          "hideOnHover": "啟用後，滑鼠游標懸停在視窗上時，視窗會隱藏。",
+          "hideOnHover": "啟用後，滑鼠游標懸停視窗時自動隱藏。可設定延遲時間，0 表示立即隱藏。",
           "maxFPS": "限制模型渲染的最大幀率，降低幀率可以減少 CPU/GPU 佔用。"
         }
       },

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { InputNumber, Slider, Switch } from 'ant-design-vue'
+import { Divider, Flex, InputNumber, Slider, Switch } from 'ant-design-vue'
 
 import ProListItem from '@/components/pro-list-item/index.vue'
 import ProList from '@/components/pro-list/index.vue'
@@ -82,7 +82,24 @@ const catStore = useCatStore()
       :description="$t('pages.preference.cat.hints.hideOnHover')"
       :title="$t('pages.preference.cat.labels.hideOnHover')"
     >
-      <Switch v-model:checked="catStore.window.hideOnHover" />
+      <Flex align="center">
+        <Switch v-model:checked="catStore.window.hideOnHover" />
+
+        <Flex
+          align="center"
+          class="overflow-hidden transition-all"
+          :class="[catStore.window.hideOnHover ? 'w-28 opacity-100' : 'w-0 opacity-0']"
+        >
+          <Divider type="vertical" />
+
+          <InputNumber
+            v-model:value="catStore.window.hideOnHoverDelay"
+            addon-after="s"
+            class="w-24"
+            :min="0"
+          />
+        </Flex>
+      </Flex>
     </ProListItem>
 
     <ProListItem

src/stores/cat.ts

@@ -18,6 +18,7 @@ export interface CatStore {
     opacity: number
     radius: number
     hideOnHover: boolean
+    hideOnHoverDelay: number
     keepInScreen: boolean
   }
 }
@@ -63,6 +64,7 @@ export const useCatStore = defineStore('cat', () => {
     opacity: 100,
     radius: 0,
     hideOnHover: false,
+    hideOnHoverDelay: 0,
     keepInScreen: true,
   })