perf: 降低鼠标移动处理的 CPU 消耗 (#458)

Author: YiMo1

src/composables/useDevice.ts

@@ -19,7 +19,7 @@ interface MouseButtonEvent {
   value: string
 }
 
-interface MouseMoveValue {
+export interface MouseMoveValue {
   x: number
   y: number
 }

src/composables/useModel.ts

@@ -1,9 +1,13 @@
+import type { MouseMoveValue } from './useDevice.ts'
+import type { Monitor } from '@tauri-apps/api/window'
+
 import { LogicalSize, PhysicalSize } from '@tauri-apps/api/dpi'
 import { resolveResource } from '@tauri-apps/api/path'
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
+import { availableMonitors as getAvailableMonitors } from '@tauri-apps/api/window'
 import { message } from 'ant-design-vue'
 import { isNil, round } from 'es-toolkit'
-import { ref, watch } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 
 import live2d from '../utils/live2d'
 import { getCursorMonitor } from '../utils/monitor'
@@ -22,6 +26,13 @@ export function useModel() {
   const modelStore = useModelStore()
   const catStore = useCatStore()
   const modelSize = ref<ModelSize>()
+  const availableMonitors = ref<Monitor[]>([])
+
+  const isOnlySingleMonitor = computed(() => availableMonitors.value.length === 1)
+
+  onBeforeMount(async () => {
+    availableMonitors.value = await getAvailableMonitors()
+  })
 
   watch(() => modelStore.currentModel, handleLoad, { deep: true, immediate: true })
 
@@ -91,8 +102,14 @@ export function useModel() {
     live2d.setParameterValue(id, pressed ? max : min)
   }
 
-  async function handleMouseMove() {
-    const monitor = await getCursorMonitor()
+  async function _getCursorMonitor(mousePosition: MouseMoveValue) {
+    return isOnlySingleMonitor.value
+      ? { ...availableMonitors.value[0], cursorPosition: mousePosition }
+      : await getCursorMonitor()
+  }
+
+  async function handleMouseMove(mousePosition: MouseMoveValue) {
+    const monitor = await _getCursorMonitor(mousePosition)
 
     if (!monitor) return
 

src/pages/main/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import type { MouseMoveValue } from '@/composables/useDevice'
+
 import { convertFileSrc, invoke } from '@tauri-apps/api/core'
 import { Menu } from '@tauri-apps/api/menu'
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { exists } from '@tauri-apps/plugin-fs'
-import { useDebounceFn, useEventListener } from '@vueuse/core'
+import { useDebounceFn, useEventListener, useRafFn } from '@vueuse/core'
+import { isEqual } from 'es-toolkit'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { useDevice } from '@/composables/useDevice'
@@ -44,7 +47,14 @@ useEventListener('resize', () => {
 
 watch(pressedMouses, handleMouseDown)
 
-watch(mousePosition, handleMouseMove)
+useRafFn((() => {
+  const cached: MouseMoveValue = { x: 0, y: 0 }
+  return () => {
+    if (isEqual(cached, mousePosition)) return
+    Object.assign(cached, mousePosition)
+    handleMouseMove(mousePosition)
+  }
+})())
 
 watch(pressedLeftKeys, (keys) => {
   handleKeyDown('left', keys.length > 0)