feat: 新增「猫咪设置 > 模型设置 > 单键模式」配置项

* feat: 新增「猫咪设置 > 模型设置 > 单键模式」配置项

* refactor: 重构单键模式代码

---------

Co-authored-by: userName <userEmail>
Co-authored-by: ayang <473033518@qq.com>

Author: UandUfindU

src/components/pro-list/index.vue

@@ -8,7 +8,7 @@ const { title } = defineProps<{
 
 <template>
   <Flex
-    class="mb-4"
+    class="not-last:mb-4"
     gap="small"
     vertical
   >

src/composables/useDevice.ts

@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 
 import { useDebounceFn } from '@vueuse/core'
+import { uniq } from 'es-toolkit'
 import { reactive, ref, watch } from 'vue'
 
 import { LISTEN_KEY } from '../constants'
@@ -9,11 +10,9 @@ import { useTauriListen } from './useTauriListen'
 
 import { useCatStore } from '@/stores/cat'
 
-type MouseButtonValue = 'Left' | 'Right' | 'Middle'
-
 interface MouseButtonEvent {
   kind: 'MousePress' | 'MouseRelease'
-  value: MouseButtonValue
+  value: string
 }
 
 interface MouseMoveValue {
@@ -44,7 +43,7 @@ function getSupportKeys() {
 const supportKeys = getSupportKeys()
 
 export function useDevice() {
-  const pressedMouses = ref<MouseButtonValue[]>([])
+  const pressedMouses = ref<string[]>([])
   const mousePosition = reactive<MouseMoveValue>({ x: 0, y: 0 })
   const pressedKeys = ref<string[]>([])
   const catStore = useCatStore()
@@ -57,13 +56,19 @@ export function useDevice() {
     handleRelease(pressedKeys, 'CapsLock')
   }, 100)
 
-  const handlePress = <T>(array: Ref<T[]>, value?: T) => {
+  const handlePress = (array: Ref<string[]>, value?: string) => {
     if (!value) return
 
-    array.value = [...new Set([...array.value, value])]
+    if (catStore.singleMode) {
+      array.value = array.value.filter((item) => {
+        return item.endsWith('Arrow') !== value.endsWith('Arrow')
+      })
+    }
+
+    array.value = uniq(array.value.concat(value))
   }
 
-  const handleRelease = <T>(array: Ref<T[]>, value?: T) => {
+  const handleRelease = (array: Ref<string[]>, value?: string) => {
     if (!value) return
 
     array.value = array.value.filter(item => item !== value)

src/composables/useSharedMenu.ts

@@ -116,13 +116,6 @@ export function useSharedMenu() {
         text: '不透明度',
         items: await getOpacityMenuItems(),
       }),
-      CheckMenuItem.new({
-        text: '镜像模式',
-        checked: catStore.mirrorMode,
-        action: () => {
-          catStore.mirrorMode = !catStore.mirrorMode
-        },
-      }),
     ])
   }
 

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

@@ -30,14 +30,24 @@ function opacityFormatter(value?: number) {
 </script>
 
 <template>
-  <ProList title="模式设置">
+  <ProList title="模型设置">
     <ProListItem title="选择模式">
       <Select
         v-model:value="catStore.mode"
         :options="modeList"
-        title="选择模式"
       />
     </ProListItem>
+
+    <ProListItem title="镜像模式">
+      <Switch v-model:checked="catStore.mirrorMode" />
+    </ProListItem>
+
+    <ProListItem
+      description="启用后，每只手只显示最后按下的一个按键"
+      title="单键模式"
+    >
+      <Switch v-model:checked="catStore.singleMode" />
+    </ProListItem>
   </ProList>
 
   <ProList title="窗口设置">
@@ -72,9 +82,5 @@ function opacityFormatter(value?: number) {
         :tip-formatter="opacityFormatter"
       />
     </ProListItem>
-
-    <ProListItem title="镜像模式">
-      <Switch v-model:checked="catStore.mirrorMode" />
-    </ProListItem>
   </ProList>
 </template>

src/pages/preference/index.vue

@@ -84,7 +84,7 @@ const menus = [
       v-for="(item, index) in menus"
       v-show="current === index"
       :key="item.label"
-      class="flex-1 bg-color-8 p-4"
+      class="flex-1 overflow-auto bg-color-8 p-4"
       data-tauri-drag-region
     >
       <component :is="item.component" />

src/stores/cat.ts

@@ -4,19 +4,21 @@ import { ref } from 'vue'
 export type CatMode = 'standard' | 'keyboard'
 
 export const useCatStore = defineStore('cat', () => {
-  const mode = ref<CatMode>('standard')
   const visible = ref(true)
+  const mode = ref<CatMode>('standard')
+  const mirrorMode = ref(false)
+  const singleMode = ref(false)
   const penetrable = ref(false)
   const scale = ref(100)
   const opacity = ref(100)
-  const mirrorMode = ref(false)
 
   return {
-    mode,
     visible,
+    mode,
+    mirrorMode,
+    singleMode,
     penetrable,
     scale,
     opacity,
-    mirrorMode,
   }
 })