From 9b3c6e4aa2312353def7dc3d5e6ff3ab64483bc6 Mon Sep 17 00:00:00 2001
From: AkiChase <1003019131@qq.com>
Date: Tue, 30 Apr 2024 15:01:29 +0800
Subject: [PATCH] feat(KeyBoard): use store

---
 src/components/keyboard/KeyBoard.vue         | 104 +++++++------------
 src/components/keyboard/KeyCommon.vue        |  34 +++---
 src/components/keyboard/KeyInfo.vue          |  41 +++++---
 src/components/keyboard/KeyObservation.vue   |  32 +++---
 src/components/keyboard/KeySetting.vue       |  25 +++--
 src/components/keyboard/KeySkill.vue         |  42 ++++----
 src/components/keyboard/KeySteeringWheel.vue |  57 +++++-----
 src/store/global.ts                          |   2 +-
 src/store/keyboard.ts                        |  20 ++++
 9 files changed, 174 insertions(+), 183 deletions(-)
 create mode 100644 src/store/keyboard.ts

diff --git a/src/components/keyboard/KeyBoard.vue b/src/components/keyboard/KeyBoard.vue
index e6265ec..aab41a1 100644
--- a/src/components/keyboard/KeyBoard.vue
+++ b/src/components/keyboard/KeyBoard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onActivated, ref } from "vue";
+import { onActivated } from "vue";
 import KeyInfo from "./KeyInfo.vue";
 import KeySetting from "./KeySetting.vue";
 import KeyCommon from "./KeyCommon.vue";
@@ -10,6 +10,7 @@ import { useGlobalStore } from "../../store/global";
 import { useDialog, useMessage } from "naive-ui";
 import { onBeforeRouteLeave } from "vue-router";
 import KeyObservation from "./KeyObservation.vue";
+import { useKeyboardStore } from "../../store/keyboard";
 
 // TODO 打开设置时要关闭active，建议将各种数据打包到一个对象中共享，省的麻烦
 // TODO 切换按键方案时提示未保存，然后修改edit
@@ -19,17 +20,11 @@ import KeyObservation from "./KeyObservation.vue";
 // TODO 添加开发者工具打开按钮
 // TODO 添加息屏按键
 
-const showKeyInfoFlag = ref(false);
-const showSettingFlag = ref(false);
-const showButtonSettingFlag = ref(false);
 const store = useGlobalStore();
+const keyboardStore = useKeyboardStore();
 const dialog = useDialog();
 const message = useMessage();
 
-const activeButtonIndex = ref(-1);
-const activeSteeringWheelButtonKeyIndex = ref(-1);
-let edited = ref(false);
-
 function isKeyUnique(curKey: string): boolean {
   const set = new Set<string>();
   for (const keyMapping of store.editKeyMappingList) {
@@ -60,7 +55,7 @@ function setCurButtonKey(curKey: string) {
     return;
   }
 
-  const keyMapping = store.editKeyMappingList[activeButtonIndex.value];
+  const keyMapping = store.editKeyMappingList[keyboardStore.activeButtonIndex];
   if (keyMapping.type === "SteeringWheel") {
     const keyObject = keyMapping.key as {
       left: string;
@@ -74,45 +69,47 @@ function setCurButtonKey(curKey: string) {
       "left",
       "right",
     ];
+    const activeSteeringWheelButtonKeyIndex =
+      keyboardStore.activeSteeringWheelButtonKeyIndex;
     if (
-      activeSteeringWheelButtonKeyIndex.value >= 0 &&
-      activeSteeringWheelButtonKeyIndex.value <= 3
+      activeSteeringWheelButtonKeyIndex >= 0 &&
+      activeSteeringWheelButtonKeyIndex <= 3
     ) {
-      const curName = nameList[activeSteeringWheelButtonKeyIndex.value];
+      const curName = nameList[activeSteeringWheelButtonKeyIndex];
       keyObject[curName] = curKey;
     }
   } else {
     keyMapping.key = curKey;
   }
-  edited.value = true;
+  keyboardStore.edited = true;
 }
 
 function handleClick(event: MouseEvent) {
   if (event.button === 0) {
     // left click
     if (event.target === document.getElementById("keyboardElement")) {
-      if (showSettingFlag.value) {
-        showSettingFlag.value = false;
+      if (keyboardStore.showSettingFlag) {
+        keyboardStore.showSettingFlag = false;
       } else {
-        activeButtonIndex.value = -1;
-        activeSteeringWheelButtonKeyIndex.value = -1;
-        showButtonSettingFlag.value = false;
+        keyboardStore.activeButtonIndex = -1;
+        keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
+        keyboardStore.showButtonSettingFlag = false;
       }
     }
   } else if (event.button === 2) {
     // right click
     if (event.target === document.getElementById("keyboardElement")) {
       // add button
-      if (showSettingFlag.value) showSettingFlag.value = false;
-      activeButtonIndex.value = -1;
-      activeSteeringWheelButtonKeyIndex.value = -1;
+      if (keyboardStore.showSettingFlag) keyboardStore.showSettingFlag = false;
+      keyboardStore.activeButtonIndex = -1;
+      keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
 
       console.log("弹出新增");
     } else if (
       // modify key
-      activeButtonIndex.value !== -1 &&
-      activeButtonIndex.value < store.editKeyMappingList.length &&
-      !showButtonSettingFlag.value
+      keyboardStore.activeButtonIndex !== -1 &&
+      keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
+      !keyboardStore.showButtonSettingFlag
     ) {
       const curKey = `M${event.button}`;
       setCurButtonKey(curKey);
@@ -121,9 +118,9 @@ function handleClick(event: MouseEvent) {
     // other click
     event.preventDefault();
     if (
-      activeButtonIndex.value !== -1 &&
-      activeButtonIndex.value < store.editKeyMappingList.length &&
-      !showButtonSettingFlag.value
+      keyboardStore.activeButtonIndex !== -1 &&
+      keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
+      !keyboardStore.showButtonSettingFlag
     ) {
       const curKey = `M${event.button}`;
       setCurButtonKey(curKey);
@@ -133,9 +130,9 @@ function handleClick(event: MouseEvent) {
 
 function handleKeyUp(event: KeyboardEvent) {
   if (
-    activeButtonIndex.value !== -1 &&
-    activeButtonIndex.value < store.editKeyMappingList.length &&
-    !showButtonSettingFlag.value
+    keyboardStore.activeButtonIndex !== -1 &&
+    keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
+    !keyboardStore.showButtonSettingFlag
   ) {
     const curKey = event.code;
     setCurButtonKey(curKey);
@@ -144,9 +141,9 @@ function handleKeyUp(event: KeyboardEvent) {
 
 function handleMouseWheel(event: WheelEvent) {
   if (
-    activeButtonIndex.value !== -1 &&
-    activeButtonIndex.value < store.editKeyMappingList.length &&
-    !showButtonSettingFlag.value
+    keyboardStore.activeButtonIndex !== -1 &&
+    keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
+    !keyboardStore.showButtonSettingFlag
   ) {
     if (event.deltaY > 0) {
       // WheelDown
@@ -159,11 +156,11 @@ function handleMouseWheel(event: WheelEvent) {
 }
 
 function resetEditKeyMappingList() {
-  showSettingFlag.value = false;
-  activeButtonIndex.value = -1;
-  activeSteeringWheelButtonKeyIndex.value = -1;
+  keyboardStore.showSettingFlag = false;
+  keyboardStore.activeButtonIndex = -1;
+  keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
   store.resetEditKeyMappingList();
-  edited.value = false;
+  keyboardStore.edited = false;
 }
 
 onActivated(() => {
@@ -174,7 +171,7 @@ onActivated(() => {
 onBeforeRouteLeave(() => {
   document.removeEventListener("keyup", handleKeyUp);
   document.removeEventListener("wheel", handleMouseWheel);
-  if (edited.value) {
+  if (keyboardStore.edited) {
     dialog.warning({
       title: "Warning",
       content: "当前方案尚未保存，是否保存？",
@@ -182,7 +179,7 @@ onBeforeRouteLeave(() => {
       negativeText: "取消",
       onPositiveClick: () => {
         if (store.applyEditKeyMappingList()) {
-          edited.value = false;
+          keyboardStore.edited = false;
         } else {
           message.error("存在重复按键，无法保存");
         }
@@ -203,23 +200,12 @@ onBeforeRouteLeave(() => {
     @mousedown="handleClick"
     @contextmenu.prevent
   >
-    <KeySetting
-      v-model:show-key-info-flag="showKeyInfoFlag"
-      v-model:show-setting-flag="showSettingFlag"
-      v-model:edited="edited"
-      @reset-edit-key-mapping-list="resetEditKeyMappingList"
-    />
-    <KeyInfo v-model:showKeyInfoFlag="showKeyInfoFlag" />
+    <KeySetting @reset-edit-key-mapping-list="resetEditKeyMappingList" />
+    <KeyInfo />
     <template v-for="(_, index) in store.editKeyMappingList">
       <KeySteeringWheel
         v-if="store.editKeyMappingList[index].type === 'SteeringWheel'"
-        @edit="edited = true"
         :index="index"
-        v-model:active-index="activeButtonIndex"
-        v-model:active-steering-wheel-button-key-index="
-          activeSteeringWheelButtonKeyIndex
-        "
-        v-model:show-button-setting-flag="showButtonSettingFlag"
       />
       <KeySkill
         v-else-if="
@@ -227,25 +213,13 @@ onBeforeRouteLeave(() => {
           store.editKeyMappingList[index].type === 'DirectionlessSkill' ||
           store.editKeyMappingList[index].type === 'TriggerWhenPressedSkill'
         "
-        @edit="edited = true"
         :index="index"
-        v-model:active-index="activeButtonIndex"
-        v-model:show-button-setting-flag="showButtonSettingFlag"
       />
       <KeyObservation
         v-else-if="store.editKeyMappingList[index].type === 'Observation'"
-        @edit="edited = true"
         :index="index"
-        v-model:active-index="activeButtonIndex"
-        v-model:show-button-setting-flag="showButtonSettingFlag"
-      />
-      <KeyCommon
-        v-else
-        @edit="edited = true"
-        :index="index"
-        v-model:active-index="activeButtonIndex"
-        v-model:show-button-setting-flag="showButtonSettingFlag"
       />
+      <KeyCommon v-else :index="index" />
     </template>
   </div>
 </template>
diff --git a/src/components/keyboard/KeyCommon.vue b/src/components/keyboard/KeyCommon.vue
index 1dea78d..93cc639 100644
--- a/src/components/keyboard/KeyCommon.vue
+++ b/src/components/keyboard/KeyCommon.vue
@@ -15,25 +15,21 @@ import {
 } from "naive-ui";
 import { CloseCircle, Settings } from "@vicons/ionicons5";
 import { KeyMacro, KeyMacroList, KeyTap } from "../../keyMappingConfig";
-
-const emit = defineEmits<{
-  edit: [];
-}>();
+import { useKeyboardStore } from "../../store/keyboard";
 
 const props = defineProps<{
   index: number;
 }>();
 
-const activeIndex = defineModel("activeIndex", { required: true });
-const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
-  required: true,
-});
+const keyboardStore = useKeyboardStore();
 
 const store = useGlobalStore();
 const message = useMessage();
 const elementRef = ref<HTMLElement | null>(null);
 
-const isActive = computed(() => props.index === activeIndex.value);
+const isActive = computed(
+  () => props.index === keyboardStore.activeButtonIndex
+);
 const keyMapping = computed(() => store.editKeyMappingList[props.index]);
 
 const showMacroModal = ref(false);
@@ -44,8 +40,8 @@ const editedMacroRaw = ref({
 });
 
 function dragHandler(downEvent: MouseEvent) {
-  activeIndex.value = props.index;
-  showButtonSettingFlag.value = false;
+  keyboardStore.activeButtonIndex = props.index;
+  keyboardStore.showButtonSettingFlag = false;
   const oldX = keyMapping.value.posX;
   const oldY = keyMapping.value.posY;
   const element = elementRef.value;
@@ -71,7 +67,7 @@ function dragHandler(downEvent: MouseEvent) {
       window.removeEventListener("mousemove", moveHandler);
       window.removeEventListener("mouseup", upHandler);
       if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
-        emit("edit");
+        keyboardStore.edited = true;
       }
     };
     window.addEventListener("mouseup", upHandler);
@@ -79,8 +75,8 @@ function dragHandler(downEvent: MouseEvent) {
 }
 
 function delCurKeyMapping() {
-  emit("edit");
-  activeIndex.value = -1;
+  keyboardStore.edited = true;
+  keyboardStore.activeButtonIndex = -1;
   store.editKeyMappingList.splice(props.index, 1);
 }
 
@@ -137,7 +133,7 @@ function saveMacro() {
 
     (keyMapping.value as KeyMacro).macro = macro;
     showMacroModal.value = false;
-    emit("edit");
+    keyboardStore.edited = true;
     message.success("宏代码解析成功，但不保证代码正确性，请自行测试");
   } catch (e) {
     console.error(e);
@@ -156,7 +152,7 @@ function showSetting() {
 
   settingPosX.value = Math.min(keyMapping.value.posX + 25, maxWidth);
   settingPosY.value = Math.min(keyMapping.value.posY - 25, maxHeight);
-  showButtonSettingFlag.value = true;
+  keyboardStore.showButtonSettingFlag = true;
 }
 </script>
 
@@ -199,7 +195,7 @@ function showSetting() {
   </div>
   <div
     class="key-setting"
-    v-if="isActive && showButtonSettingFlag"
+    v-if="isActive && keyboardStore.showButtonSettingFlag"
     :style="{
       left: `${settingPosX}px`,
       top: `${settingPosY}px`,
@@ -220,14 +216,14 @@ function showSetting() {
         v-model:value="(keyMapping as KeyTap).time"
         :min="0"
         placeholder="请输入触摸时长(ms)"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
     <NFormItem label="备注">
       <NInput
         v-model:value="keyMapping.note"
         placeholder="请输入备注"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
     <NModal
diff --git a/src/components/keyboard/KeyInfo.vue b/src/components/keyboard/KeyInfo.vue
index 4d73074..fde7200 100644
--- a/src/components/keyboard/KeyInfo.vue
+++ b/src/components/keyboard/KeyInfo.vue
@@ -2,8 +2,9 @@
 import { NIcon } from "naive-ui";
 import { CloseCircle } from "@vicons/ionicons5";
 import { Ref, ref, watch } from "vue";
+import { useKeyboardStore } from "../../store/keyboard";
 
-const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
+const keyboardStore = useKeyboardStore();
 
 const mouseX = ref(0);
 const mouseY = ref(0);
@@ -41,21 +42,24 @@ function mousedownHandler(event: MouseEvent) {
   } else keyboardCodeList.value.push(key);
 }
 
-watch(showKeyInfoFlag, (value) => {
-  const keyboardElement = document.getElementById(
-    "keyboardElement"
-  ) as HTMLElement;
-  if (value) {
-    keyboardElement.addEventListener("mousemove", mousemoveHandler);
-    keyboardElement.addEventListener("mousedown", mousedownHandler);
-    document.addEventListener("keyup", keyupHandler);
-  } else {
-    keyboardElement.removeEventListener("mousemove", mousemoveHandler);
-    keyboardElement.removeEventListener("mousedown", mousedownHandler);
-    document.removeEventListener("keyup", keyupHandler);
-    keyboardCodeList.value.splice(0, keyboardCodeList.value.length);
+watch(
+  () => keyboardStore.showKeyInfoFlag,
+  (value) => {
+    const keyboardElement = document.getElementById(
+      "keyboardElement"
+    ) as HTMLElement;
+    if (value) {
+      keyboardElement.addEventListener("mousemove", mousemoveHandler);
+      keyboardElement.addEventListener("mousedown", mousedownHandler);
+      document.addEventListener("keyup", keyupHandler);
+    } else {
+      keyboardElement.removeEventListener("mousemove", mousemoveHandler);
+      keyboardElement.removeEventListener("mousedown", mousedownHandler);
+      document.removeEventListener("keyup", keyupHandler);
+      keyboardCodeList.value.splice(0, keyboardCodeList.value.length);
+    }
   }
-});
+);
 
 let lastPosX = 0;
 let lastPosY = 0;
@@ -103,10 +107,13 @@ function dragHandler(downEvent: MouseEvent) {
 </script>
 
 <template>
-  <div v-show="showKeyInfoFlag" class="key-info" @contextmenu.prevent>
+  <div v-show="keyboardStore.showKeyInfoFlag" class="key-info" @contextmenu.prevent>
     <div class="key-info-header" @mousedown="dragHandler">
       Key Info
-      <div class="key-info-close" @click="showKeyInfoFlag = false">
+      <div
+        class="key-info-close"
+        @click="keyboardStore.showKeyInfoFlag = false"
+      >
         <NIcon><CloseCircle></CloseCircle></NIcon>
       </div>
     </div>
diff --git a/src/components/keyboard/KeyObservation.vue b/src/components/keyboard/KeyObservation.vue
index 54a3e61..27b2f9e 100644
--- a/src/components/keyboard/KeyObservation.vue
+++ b/src/components/keyboard/KeyObservation.vue
@@ -4,31 +4,27 @@ import { useGlobalStore } from "../../store/global";
 import { NIcon, NButton, NFormItem, NInput, NH4, NInputNumber } from "naive-ui";
 import { Eye, CloseCircle, Settings } from "@vicons/ionicons5";
 import { KeyObservation } from "../../keyMappingConfig";
-
-const emit = defineEmits<{
-  edit: [];
-}>();
+import { useKeyboardStore } from "../../store/keyboard";
 
 const props = defineProps<{
   index: number;
 }>();
 
-const activeIndex = defineModel("activeIndex", { required: true });
-const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
-  required: true,
-});
+const keyboardStore = useKeyboardStore();
 
 const store = useGlobalStore();
 const elementRef = ref<HTMLElement | null>(null);
 
-const isActive = computed(() => props.index === activeIndex.value);
+const isActive = computed(
+  () => props.index === keyboardStore.activeButtonIndex
+);
 const keyMapping = computed(
   () => store.editKeyMappingList[props.index] as KeyObservation
 );
 
 function dragHandler(downEvent: MouseEvent) {
-  activeIndex.value = props.index;
-  showButtonSettingFlag.value = false;
+  keyboardStore.activeButtonIndex = props.index;
+  keyboardStore.showButtonSettingFlag = false;
   const oldX = keyMapping.value.posX;
   const oldY = keyMapping.value.posY;
   const element = elementRef.value;
@@ -54,7 +50,7 @@ function dragHandler(downEvent: MouseEvent) {
       window.removeEventListener("mousemove", moveHandler);
       window.removeEventListener("mouseup", upHandler);
       if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
-        emit("edit");
+        keyboardStore.edited = true;
       }
     };
     window.addEventListener("mouseup", upHandler);
@@ -62,8 +58,8 @@ function dragHandler(downEvent: MouseEvent) {
 }
 
 function delCurKeyMapping() {
-  emit("edit");
-  activeIndex.value = -1;
+  keyboardStore.edited = true;
+  keyboardStore.activeButtonIndex = -1;
   store.editKeyMappingList.splice(props.index, 1);
 }
 
@@ -78,7 +74,7 @@ function showSetting() {
 
   settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
   settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
-  showButtonSettingFlag.value = true;
+  keyboardStore.showButtonSettingFlag = true;
 }
 </script>
 
@@ -122,7 +118,7 @@ function showSetting() {
   </div>
   <div
     class="key-setting"
-    v-if="isActive && showButtonSettingFlag"
+    v-if="isActive && keyboardStore.showButtonSettingFlag"
     :style="{
       left: `${settingPosX}px`,
       top: `${settingPosY}px`,
@@ -134,14 +130,14 @@ function showSetting() {
         v-model:value="keyMapping.scale"
         placeholder="请输入灵敏度"
         :step="0.1"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
     <NFormItem label="备注">
       <NInput
         v-model:value="keyMapping.note"
         placeholder="请输入备注"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
   </div>
diff --git a/src/components/keyboard/KeySetting.vue b/src/components/keyboard/KeySetting.vue
index 5831a3d..0600c61 100644
--- a/src/components/keyboard/KeySetting.vue
+++ b/src/components/keyboard/KeySetting.vue
@@ -18,19 +18,17 @@ import { Store } from "@tauri-apps/plugin-store";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { loadDefaultKeyconfig } from "../../invoke";
 import { KeyMappingConfig } from "../../keyMappingConfig";
+import { useKeyboardStore } from "../../store/keyboard";
 
 const emit = defineEmits<{
   resetEditKeyMappingList: [];
 }>();
 
 const store = useGlobalStore();
+const keyboardStore = useKeyboardStore();
 const localStore = new Store("store.bin");
 const message = useMessage();
 
-const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
-const showSettingFlag = defineModel("showSettingFlag", { required: true });
-const edited = defineModel("edited", { required: true });
-
 const showImportModal = ref(false);
 const showRenameModal = ref(false);
 const importModalInputValue = ref("");
@@ -126,7 +124,7 @@ function dragHandler(downEvent: MouseEvent) {
       localStore.set("keySettingPos", keySettingPos.value);
     } else {
       // click up
-      showSettingFlag.value = !showSettingFlag.value;
+      keyboardStore.showSettingFlag = !keyboardStore.showSettingFlag;
     }
   };
   window.addEventListener("mouseup", upHandler);
@@ -240,7 +238,7 @@ function exportKeyMappingConfig() {
 
 function saveKeyMappingConfig() {
   if (store.applyEditKeyMappingList()) {
-    edited.value = false;
+    keyboardStore.edited = false;
   } else {
     message.error("存在重复按键，无法保存");
   }
@@ -322,8 +320,12 @@ function migrateKeyMappingConfig() {
       <NIcon><Settings /></NIcon>
     </template>
   </NButton>
-  <div class="key-setting" v-show="showSettingFlag">
-    <NButton text class="key-setting-close" @click="showSettingFlag = false">
+  <div class="key-setting" v-show="keyboardStore.showSettingFlag">
+    <NButton
+      text
+      class="key-setting-close"
+      @click="keyboardStore.showSettingFlag = false"
+    >
       <NIcon><CloseCircle></CloseCircle></NIcon>
     </NButton>
     <NH4 prefix="bar">按键方案</NH4>
@@ -334,7 +336,7 @@ function migrateKeyMappingConfig() {
     />
     <NP> Relative Size:{{ curRelativeSize.w }}x{{ curRelativeSize.h }} </NP>
     <NFlex style="margin-top: 20px">
-      <template v-if="edited">
+      <template v-if="keyboardStore.edited">
         <NButton type="success" @click="saveKeyMappingConfig">保存方案</NButton>
         <NButton type="error" @click="emit('resetEditKeyMappingList')"
           >还原方案</NButton
@@ -364,7 +366,10 @@ function migrateKeyMappingConfig() {
       >
       <NButton @click="exportKeyMappingConfig">导出方案</NButton>
       <NButton @click="importDefaultKeyMappingConfig">导入默认</NButton>
-      <NButton @click="showKeyInfoFlag = !showKeyInfoFlag">按键信息</NButton>
+      <NButton
+        @click="keyboardStore.showKeyInfoFlag = !keyboardStore.showKeyInfoFlag"
+        >按键信息</NButton
+      >
     </NFlex>
   </div>
   <NModal v-model:show="showImportModal">
diff --git a/src/components/keyboard/KeySkill.vue b/src/components/keyboard/KeySkill.vue
index 27238fe..cc0ba17 100644
--- a/src/components/keyboard/KeySkill.vue
+++ b/src/components/keyboard/KeySkill.vue
@@ -16,28 +16,25 @@ import {
   KeyDirectionalSkill,
   KeyTriggerWhenPressedSkill,
 } from "../../keyMappingConfig";
-const emit = defineEmits<{
-  edit: [];
-}>();
+import { useKeyboardStore } from "../../store/keyboard";
 
 const props = defineProps<{
   index: number;
 }>();
 
-const activeIndex = defineModel("activeIndex", { required: true });
-const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
-  required: true,
-});
+const keyboardStore = useKeyboardStore();
 
 const store = useGlobalStore();
 const elementRef = ref<HTMLElement | null>(null);
 
-const isActive = computed(() => props.index === activeIndex.value);
+const isActive = computed(
+  () => props.index === keyboardStore.activeButtonIndex
+);
 const keyMapping = computed(() => store.editKeyMappingList[props.index]);
 
 function dragHandler(downEvent: MouseEvent) {
-  activeIndex.value = props.index;
-  showButtonSettingFlag.value = false;
+  keyboardStore.activeButtonIndex = props.index;
+  keyboardStore.showButtonSettingFlag = false;
   const oldX = keyMapping.value.posX;
   const oldY = keyMapping.value.posY;
   const element = elementRef.value;
@@ -63,7 +60,7 @@ function dragHandler(downEvent: MouseEvent) {
       window.removeEventListener("mousemove", moveHandler);
       window.removeEventListener("mouseup", upHandler);
       if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
-        emit("edit");
+        keyboardStore.edited = true;
       }
     };
     window.addEventListener("mouseup", upHandler);
@@ -71,8 +68,9 @@ function dragHandler(downEvent: MouseEvent) {
 }
 
 function delCurKeyMapping() {
-  emit("edit");
-  activeIndex.value = -1;
+  keyboardStore.edited = true;
+
+  keyboardStore.activeButtonIndex = -1;
   store.editKeyMappingList.splice(props.index, 1);
 }
 
@@ -91,7 +89,7 @@ function changeSkillType(flag: string) {
   // the design of skill keymapping type is not good
   const t = keyMapping.value.type;
   if (flag === "direction") {
-    emit("edit");
+    keyboardStore.edited = true;
     if (t === "DirectionalSkill") {
       delete (keyMapping.value as any).range;
       keyMapping.value.type = "DirectionlessSkill";
@@ -104,7 +102,7 @@ function changeSkillType(flag: string) {
       k.rangeOrTime = k.directional ? 0 : 80;
     }
   } else if (flag === "trigger") {
-    emit("edit");
+    keyboardStore.edited = true;
     if (t === "DirectionalSkill") {
       const k = keyMapping.value as any;
       k.directional = true;
@@ -144,7 +142,7 @@ function showSetting() {
   settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
   settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
   updateRangeIndicator(keyboardElement);
-  showButtonSettingFlag.value = true;
+  keyboardStore.showButtonSettingFlag = true;
 }
 
 const rangeIndicatorTop = ref(0);
@@ -209,7 +207,7 @@ function updateRangeIndicator(element?: HTMLElement) {
   </div>
   <div
     class="key-setting"
-    v-if="isActive && showButtonSettingFlag"
+    v-if="isActive && keyboardStore.showButtonSettingFlag"
     :style="{
       left: `${settingPosX}px`,
       top: `${settingPosY}px`,
@@ -238,7 +236,7 @@ function updateRangeIndicator(element?: HTMLElement) {
         :min="0"
         :max="100"
         @update:value="
-          emit('edit');
+          keyboardStore.edited = true;
           updateRangeIndicator();
         "
       />
@@ -249,7 +247,7 @@ function updateRangeIndicator(element?: HTMLElement) {
         :min="0"
         :max="100"
         @update:value="
-          emit('edit');
+          keyboardStore.edited = true;
           updateRangeIndicator();
         "
       />
@@ -262,19 +260,19 @@ function updateRangeIndicator(element?: HTMLElement) {
         v-model:value="(keyMapping as KeyTriggerWhenPressedSkill).rangeOrTime"
         :min="0"
         placeholder="请输入触摸时长(ms)"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
     <NFormItem label="备注">
       <NInput
         v-model:value="keyMapping.note"
         placeholder="请输入备注"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
   </div>
   <div
-    v-if="isActive && showButtonSettingFlag"
+    v-if="isActive && keyboardStore.showButtonSettingFlag"
     class="range-indicator"
     :style="{
       top: `${rangeIndicatorTop}px`,
diff --git a/src/components/keyboard/KeySteeringWheel.vue b/src/components/keyboard/KeySteeringWheel.vue
index b937161..5762aed 100644
--- a/src/components/keyboard/KeySteeringWheel.vue
+++ b/src/components/keyboard/KeySteeringWheel.vue
@@ -4,29 +4,20 @@ import { useGlobalStore } from "../../store/global";
 import { KeySteeringWheel } from "../../keyMappingConfig";
 import { NButton, NFormItem, NH4, NIcon, NInput, NInputNumber } from "naive-ui";
 import { CloseCircle, Move, Settings } from "@vicons/ionicons5";
-
-const emit = defineEmits<{
-  edit: [];
-}>();
+import { useKeyboardStore } from "../../store/keyboard";
 
 const props = defineProps<{
   index: number;
 }>();
 
-const activeSteeringWheelButtonKeyIndex = defineModel(
-  "activeSteeringWheelButtonKeyIndex",
-  { required: true }
-);
-
-const activeIndex = defineModel("activeIndex", { required: true });
-const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
-  required: true,
-});
+const keyboardStore = useKeyboardStore();
 
 const store = useGlobalStore();
 const elementRef = ref<HTMLElement | null>(null);
 
-const isActive = computed(() => props.index === activeIndex.value);
+const isActive = computed(
+  () => props.index === keyboardStore.activeButtonIndex
+);
 const keyMapping = computed(
   () => store.editKeyMappingList[props.index] as KeySteeringWheel
 );
@@ -45,8 +36,8 @@ const offset = computed(() => {
 });
 
 function dragHandler(downEvent: MouseEvent) {
-  activeIndex.value = props.index;
-  showButtonSettingFlag.value = false;
+  keyboardStore.activeButtonIndex = props.index;
+  keyboardStore.showButtonSettingFlag = false;
   const oldX = keyMapping.value.posX;
   const oldY = keyMapping.value.posY;
   const element = elementRef.value;
@@ -72,7 +63,7 @@ function dragHandler(downEvent: MouseEvent) {
       window.removeEventListener("mousemove", moveHandler);
       window.removeEventListener("mouseup", upHandler);
       if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
-        emit("edit");
+        keyboardStore.edited = true;
       }
     };
     window.addEventListener("mouseup", upHandler);
@@ -80,8 +71,8 @@ function dragHandler(downEvent: MouseEvent) {
 }
 
 function delCurKeyMapping() {
-  emit("edit");
-  activeIndex.value = -1;
+  keyboardStore.edited = true;
+  keyboardStore.activeButtonIndex = -1;
   store.editKeyMappingList.splice(props.index, 1);
 }
 
@@ -99,7 +90,7 @@ function showSetting() {
     maxWidth
   );
   settingPosY.value = Math.min(keyMapping.value.posY - offset.value, maxHeight);
-  showButtonSettingFlag.value = true;
+  keyboardStore.showButtonSettingFlag = true;
 }
 </script>
 
@@ -118,17 +109,19 @@ function showSetting() {
   >
     <i />
     <span
-      @mousedown="activeSteeringWheelButtonKeyIndex = 0"
+      @mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 0"
       :class="{
-        'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 0,
+        'active-wheel':
+          isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 0,
       }"
       >{{ keyMapping.key.up }}</span
     >
     <i />
     <span
-      @mousedown="activeSteeringWheelButtonKeyIndex = 2"
+      @mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 2"
       :class="{
-        'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 2,
+        'active-wheel':
+          isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 2,
       }"
       >{{ keyMapping.key.left }}</span
     >
@@ -136,17 +129,19 @@ function showSetting() {
       <Move />
     </NIcon>
     <span
-      @mousedown="activeSteeringWheelButtonKeyIndex = 3"
+      @mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 3"
       :class="{
-        'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 3,
+        'active-wheel':
+          isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 3,
       }"
       >{{ keyMapping.key.right }}</span
     >
     <i />
     <span
-      @mousedown="activeSteeringWheelButtonKeyIndex = 1"
+      @mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 1"
       :class="{
-        'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 1,
+        'active-wheel':
+          isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 1,
       }"
       >{{ keyMapping.key.down }}</span
     >
@@ -186,7 +181,7 @@ function showSetting() {
   </div>
   <div
     class="key-setting"
-    v-if="isActive && showButtonSettingFlag"
+    v-if="isActive && keyboardStore.showButtonSettingFlag"
     :style="{
       left: `${settingPosX}px`,
       top: `${settingPosY}px`,
@@ -197,14 +192,14 @@ function showSetting() {
       <NInputNumber
         v-model:value="keyMapping.offset"
         :min="1"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
     <NFormItem label="备注">
       <NInput
         v-model:value="keyMapping.note"
         placeholder="请输入备注"
-        @update:value="emit('edit')"
+        @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
   </div>
diff --git a/src/store/global.ts b/src/store/global.ts
index 6d63c7e..2f1c4ab 100644
--- a/src/store/global.ts
+++ b/src/store/global.ts
@@ -10,7 +10,7 @@ import { Store } from "@tauri-apps/plugin-store";
 
 const localStore = new Store("store.bin");
 
-export const useGlobalStore = defineStore("counter", () => {
+export const useGlobalStore = defineStore("global", () => {
   const showLoadingRef = ref(false);
   function showLoading() {
     showLoadingRef.value = true;
diff --git a/src/store/keyboard.ts b/src/store/keyboard.ts
new file mode 100644
index 0000000..36e76c8
--- /dev/null
+++ b/src/store/keyboard.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useKeyboardStore = defineStore("keyboard", () => {
+  const showKeyInfoFlag = ref(false);
+  const showSettingFlag = ref(false);
+  const showButtonSettingFlag = ref(false);
+  const activeButtonIndex = ref(-1);
+  const activeSteeringWheelButtonKeyIndex = ref(-1);
+  const edited = ref(false);
+
+  return {
+    showKeyInfoFlag,
+    showSettingFlag,
+    showButtonSettingFlag,
+    activeButtonIndex,
+    activeSteeringWheelButtonKeyIndex,
+    edited,
+  };
+});