feat(KeyBoad): click to hide setting

src/components/keyboard/KeyBoard.vue

@@ -7,19 +7,32 @@ import { useGlobalStore } from "../../store/global";
 import { useDialog } from "naive-ui";
 import { onBeforeRouteLeave } from "vue-router";
 
-// TODO 左键空白区域，关闭设置或active设为-1
 // TODO 右键空白区域添加按键
 // TODO 左键可拖动按钮（并显示到顶部），右键按钮进行修改、删除
 // TODO 设置界面添加本地数据编辑器（类似utools）
 // TODO 添加开发者工具打开按钮
 
-const keyInfoShowFlag = ref(false);
+const showKeyInfoFlag = ref(false);
+const showSettingFlag = ref(false);
 const store = useGlobalStore();
 const dialog = useDialog();
 
 const activeButtonIndex = ref(-1);
 let edited = ref(false);
 
+function handleClick(event: MouseEvent) {
+  if (
+    event.button === 0 &&
+    event.target === document.getElementById("keyboardElement")
+  ) {
+    if (showSettingFlag.value) {
+      showSettingFlag.value = false;
+      return;
+    }
+    activeButtonIndex.value = -1;
+  }
+}
+
 onBeforeRouteLeave(() => {
   if (edited.value) {
     dialog.warning({
@@ -41,9 +54,13 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
-  <div id="keyboardElement" class="keyboard">
-    <KeySetting v-model="keyInfoShowFlag" />
-    <KeyInfo v-model="keyInfoShowFlag" />
+  <div id="keyboardElement" class="keyboard" @click="handleClick">
+    <KeySetting
+      v-model:showKeyInfoFlag="showKeyInfoFlag"
+      v-model:showSettingFlag="showSettingFlag"
+      v-model:edited="edited"
+    />
+    <KeyInfo v-model:showKeyInfoFlag="showKeyInfoFlag" />
     <template v-for="(_, index) in store.editKeyMappingList">
       <KeyCommon
         @edit="edited = true"

src/components/keyboard/KeyInfo.vue

@@ -4,7 +4,7 @@ import { CloseCircle } from "@vicons/ionicons5";
 import { Ref, onActivated, ref } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 
-const showFlag = defineModel({ required: true });
+const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
 
 const mouseX = ref(0);
 const mouseY = ref(0);
@@ -94,10 +94,10 @@ function dragHandler(downEvent: MouseEvent) {
 </script>
 
 <template>
-  <div v-show="showFlag" class="key-info" @contextmenu.prevent>
+  <div v-show="showKeyInfoFlag" class="key-info" @contextmenu.prevent>
     <div class="key-info-header" @mousedown="dragHandler">
       Key Info
-      <div class="key-info-close" @click="showFlag = false">
+      <div class="key-info-close" @click="showKeyInfoFlag = false">
         <NIcon><CloseCircle></CloseCircle></NIcon>
       </div>
     </div>

src/components/keyboard/KeySetting.vue

@@ -23,9 +23,10 @@ const store = useGlobalStore();
 const localStore = new Store("store.bin");
 const message = useMessage();
 
-const showKeyInfoFlag = defineModel({ required: true });
+const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
+const showSettingFlag = defineModel("showSettingFlag", { required: true });
+const edited = defineModel("edited", { required: true });
 
-const showSetting = ref(false);
 const showImportModal = ref(false);
 const showRenameModal = ref(false);
 const importModalInputValue = ref("");
@@ -121,7 +122,7 @@ function dragHandler(downEvent: MouseEvent) {
       localStore.set("keySettingPos", keySettingPos.value);
     } else {
       // click up
-      showSetting.value = !showSetting.value;
+      showSettingFlag.value = !showSettingFlag.value;
     }
   };
   window.addEventListener("mouseup", upHandler);
@@ -233,6 +234,16 @@ function exportKeyMappingConfig() {
     });
 }
 
+function saveKeyMappingConfig() {
+  store.applyEditKeyMappingList();
+  edited.value = false;
+}
+
+function resetKeyMappingConfig() {
+  store.resetEditKeyMappingList();
+  edited.value = false;
+}
+
 function checkConfigSize() {
   const keyboardElement = document.getElementById(
     "keyboardElement"
@@ -309,8 +320,8 @@ function migrateKeyMappingConfig() {
       <NIcon><Settings /></NIcon>
     </template>
   </NButton>
-  <div class="key-setting" v-show="showSetting">
-    <NButton text class="key-setting-close" @click="showSetting = false">
+  <div class="key-setting" v-show="showSettingFlag">
+    <NButton text class="key-setting-close" @click="showSettingFlag = false">
       <NIcon><CloseCircle></CloseCircle></NIcon>
     </NButton>
     <NH4 prefix="bar">按键方案</NH4>
@@ -321,6 +332,10 @@ function migrateKeyMappingConfig() {
     />
     <NP> Relative Size:{{ curRelativeSize.w }}x{{ curRelativeSize.h }} </NP>
     <NFlex style="margin-top: 20px">
+      <template v-if="edited">
+        <NButton type="success" @click="saveKeyMappingConfig">保存方案</NButton>
+        <NButton type="error" @click="resetKeyMappingConfig">还原方案</NButton>
+      </template>
       <NButton @click="createKeyMappingConfig">新建方案</NButton>
       <NButton @click="copyCurKeyMappingConfig">复制方案</NButton>
       <NButton @click="migrateKeyMappingConfig">迁移方案</NButton>