fix(keyMappingConfig): type error

src/components/keyboard/KeyBoard.vue

@@ -12,6 +12,7 @@ import {
   KeyObservation as KeyMappingObservation,
   KeyTap,
   KeyMacro,
+  KeyMapping,
 } from "../../keyMappingConfig";
 import { useGlobalStore } from "../../store/global";
 import { DropdownOption, NDropdown, useDialog, useMessage } from "naive-ui";
@@ -91,9 +92,10 @@ function onAddButtonSelect(
       loop: null,
       up: null,
     };
+    delete (keyMapping as any).pointerId;
   } else return;
   keyboardStore.edited = true;
-  store.editKeyMappingList.push(keyMapping);
+  store.editKeyMappingList.push(keyMapping as KeyMapping);
 }
 
 function isKeyUnique(curKey: string): boolean {

src/components/keyboard/KeyCommon.vue

@@ -14,7 +14,7 @@ import {
   NInputNumber,
 } from "naive-ui";
 import { CloseCircle, Settings } from "@vicons/ionicons5";
-import { KeyMacro, KeyMacroList, KeyTap } from "../../keyMappingConfig";
+import { KeyCommon, KeyMacro, KeyMacroList } from "../../keyMappingConfig";
 import { useKeyboardStore } from "../../store/keyboard";
 
 const props = defineProps<{
@@ -30,7 +30,9 @@ const elementRef = ref<HTMLElement | null>(null);
 const isActive = computed(
   () => props.index === keyboardStore.activeButtonIndex
 );
-const keyMapping = computed(() => store.editKeyMappingList[props.index]);
+const keyMapping = computed(
+  () => store.editKeyMappingList[props.index] as KeyCommon
+);
 
 const showMacroModal = ref(false);
 const editedMacroRaw = ref({
@@ -216,7 +218,7 @@ function showSetting() {
     </NFormItem>
     <NFormItem v-if="keyMapping.type === 'Tap'" label="触摸时长">
       <NInputNumber
-        v-model:value="(keyMapping as KeyTap).time"
+        v-model:value="keyMapping.time"
         :min="0"
         placeholder="请输入触摸时长(ms)"
         @update:value="keyboardStore.edited = true"

src/components/keyboard/KeySkill.vue

@@ -14,7 +14,7 @@ import {
 } from "naive-ui";
 import {
   KeyDirectionalSkill,
-  KeyTriggerWhenDoublePressedSkill,
+  KeySkill,
   KeyTriggerWhenPressedSkill,
 } from "../../keyMappingConfig";
 import { useKeyboardStore } from "../../store/keyboard";
@@ -31,7 +31,9 @@ const elementRef = ref<HTMLElement | null>(null);
 const isActive = computed(
   () => props.index === keyboardStore.activeButtonIndex
 );
-const keyMapping = computed(() => store.editKeyMappingList[props.index]);
+const keyMapping = computed(
+  () => store.editKeyMappingList[props.index] as KeySkill
+);
 
 function dragHandler(downEvent: MouseEvent) {
   keyboardStore.activeButtonIndex = props.index;
@@ -97,12 +99,14 @@ function changeSkillType(flag: string) {
     keyboardStore.edited = true;
     if (t === "DirectionalSkill") {
       // to DirectionlessSkill
-      delete (keyMapping.value as any).range;
+      const k = keyMapping.value as any;
-      keyMapping.value.type = "DirectionlessSkill";
+      delete k.range;
+      k.type = "DirectionlessSkill";
     } else if (t === "DirectionlessSkill") {
       // to DirectionalSkill
-      (keyMapping.value as any).range = 0;
+      const k = keyMapping.value as any;
-      keyMapping.value.type = "DirectionalSkill";
+      k.range = 0;
+      k.type = "DirectionalSkill";
     } else if (t === "TriggerWhenPressedSkill") {
       // change directional flag
       const k = keyMapping.value as KeyTriggerWhenPressedSkill;
@@ -110,8 +114,9 @@ function changeSkillType(flag: string) {
       k.rangeOrTime = k.directional ? 0 : 80;
     } else if (t === "TriggerWhenDoublePressedSkill") {
       // to DirectionlessSkill
-      delete (keyMapping.value as any).range;
+      const k = keyMapping.value as any;
-      keyMapping.value.type = "DirectionlessSkill";
+      delete k.range;
+      k.type = "DirectionlessSkill";
     }
   } else if (flag === "trigger") {
     keyboardStore.edited = true;
@@ -278,7 +283,7 @@ function updateRangeIndicator(element?: HTMLElement) {
     <NFormItem v-if="!isDirectionless" label="范围">
       <NInputNumber
         v-if="keyMapping.type === 'DirectionalSkill'"
-        v-model:value="(keyMapping as KeyDirectionalSkill).range"
+        v-model:value="keyMapping.range"
         placeholder="range"
         :min="0"
         :max="100"
@@ -289,7 +294,7 @@ function updateRangeIndicator(element?: HTMLElement) {
       />
       <NInputNumber
         v-else-if="keyMapping.type === 'TriggerWhenPressedSkill'"
-        v-model:value="(keyMapping as KeyTriggerWhenPressedSkill).rangeOrTime"
+        v-model:value="keyMapping.rangeOrTime"
         placeholder="rangeOrTime"
         :min="0"
         :max="100"
@@ -300,7 +305,7 @@ function updateRangeIndicator(element?: HTMLElement) {
       />
       <NInputNumber
         v-else-if="keyMapping.type === 'TriggerWhenDoublePressedSkill'"
-        v-model:value="(keyMapping as KeyTriggerWhenDoublePressedSkill).range"
+        v-model:value="keyMapping.range"
         placeholder="range"
         :min="0"
         :max="100"
@@ -315,7 +320,7 @@ function updateRangeIndicator(element?: HTMLElement) {
       label="触摸时长"
     >
       <NInputNumber
-        v-model:value="(keyMapping as KeyTriggerWhenPressedSkill).rangeOrTime"
+        v-model:value="keyMapping.rangeOrTime"
         :min="0"
         placeholder="请输入触摸时长(ms)"
         @update:value="keyboardStore.edited = true"

src/components/keyboard/KeySteeringWheel.vue

@@ -28,11 +28,8 @@ const offset = computed(() => {
     const clientWidth = keyboardElement.clientWidth;
     const screenSizeW =
       store.screenSizeW === 0 ? clientWidth : store.screenSizeW;
-    return (
+    return (keyMapping.value.offset * clientWidth) / screenSizeW;
-      ((keyMapping.value as KeySteeringWheel).offset * clientWidth) /
+  } else return keyMapping.value.offset;
-      screenSizeW
-    );
-  } else return (keyMapping.value as KeySteeringWheel).offset;
 });
 
 function dragHandler(downEvent: MouseEvent) {

src/keyMappingConfig.ts

@@ -1,21 +1,12 @@
-interface Key {
+interface KeyBase {
-  type:
-    | "SteeringWheel"
-    | "DirectionalSkill"
-    | "DirectionlessSkill"
-    | "CancelSkill"
-    | "Tap"
-    | "TriggerWhenPressedSkill"
-    | "TriggerWhenDoublePressedSkill"
-    | "Observation"
-    | "Macro";
   note: string;
   posX: number;
   posY: number;
-  pointerId: number;
 }
 
-interface KeySteeringWheel extends Key {
+export interface KeySteeringWheel extends KeyBase {
+  type: "SteeringWheel";
+  pointerId: number;
   key: {
     left: string;
     right: string;
@@ -25,54 +16,62 @@ interface KeySteeringWheel extends Key {
   offset: number;
 }
 
-interface KeyDirectionalSkill extends Key {
+export interface KeyDirectionalSkill extends KeyBase {
+  type: "DirectionalSkill";
+  pointerId: number;
   key: string;
   range: number;
 }
 
-interface KeyDirectionlessSkill extends Key {
+export interface KeyDirectionlessSkill extends KeyBase {
+  type: "DirectionlessSkill";
+  pointerId: number;
   key: string;
 }
 
-interface KeyCancelSkill extends Key {
+export interface KeyCancelSkill extends KeyBase {
+  type: "CancelSkill";
+  pointerId: number;
   key: string;
 }
 
-interface KeyTriggerWhenPressedSkill extends Key {
+export interface KeyTriggerWhenPressedSkill extends KeyBase {
+  type: "TriggerWhenPressedSkill";
+  pointerId: number;
   key: string;
   directional: boolean;
   rangeOrTime: number;
 }
 
-interface KeyTriggerWhenDoublePressedSkill extends Key {
+export interface KeyTriggerWhenDoublePressedSkill extends KeyBase {
+  type: "TriggerWhenDoublePressedSkill";
+  pointerId: number;
   key: string;
   range: number;
 }
 
-interface KeyObservation extends Key {
+export interface KeyObservation extends KeyBase {
+  type: "Observation";
+  pointerId: number;
   key: string;
   scale: number;
 }
 
-interface KeyTap extends Key {
+export interface KeyTap extends KeyBase {
+  type: "Tap";
+  pointerId: number;
   key: string;
   time: number;
 }
 
-type KeyMacroType = "touch" | "sleep" | "swipe" | "input-text";
+export type KeyMacroList = Array<{
-type KeyMacroArgs = any[];
+  type: "touch" | "sleep" | "swipe" | "input-text";
-
+  args: any[];
-type KeyMacroList = Array<{
-  type: KeyMacroType;
-  args: KeyMacroArgs;
 }> | null;
 
-interface KeyMacro {
+export interface KeyMacro extends KeyBase {
   type: "Macro";
   key: string;
-  note: string;
-  posX: number;
-  posY: number;
   macro: {
     down: KeyMacroList;
     loop: KeyMacroList;
@@ -80,7 +79,7 @@ interface KeyMacro {
   };
 }
 
-type KeyMapping =
+export type KeyMapping =
   | KeySteeringWheel
   | KeyDirectionalSkill
   | KeyDirectionlessSkill
@@ -91,23 +90,16 @@ type KeyMapping =
   | KeyCancelSkill
   | KeyTap;
 
-interface KeyMappingConfig {
+export type KeyCommon = KeyMacro | KeyCancelSkill | KeyTap;
+
+export type KeySkill =
+  | KeyDirectionalSkill
+  | KeyDirectionlessSkill
+  | KeyTriggerWhenPressedSkill
+  | KeyTriggerWhenDoublePressedSkill;
+
+export interface KeyMappingConfig {
   relativeSize: { w: number; h: number };
   title: string;
   list: KeyMapping[];
 }
-
-export type {
-  KeyMacroList,
-  KeySteeringWheel,
-  KeyDirectionalSkill,
-  KeyDirectionlessSkill,
-  KeyCancelSkill,
-  KeyTap,
-  KeyTriggerWhenPressedSkill,
-  KeyTriggerWhenDoublePressedSkill,
-  KeyObservation,
-  KeyMacro,
-  KeyMapping,
-  KeyMappingConfig,
-};