feat(KeyBoard): optimize the display of button setting

src/components/keyboard/KeyBoard.vue

@@ -11,7 +11,6 @@ import { useDialog, useMessage } from "naive-ui";
 import { onBeforeRouteLeave } from "vue-router";
 import KeyObservation from "./KeyObservation.vue";
 
-// TODO 设置面板的出现位置，不应该超出范围
 // TODO 为技能添加圆形边框范围，将range属性转换为技能的灵敏度，鼠标移动按比例缩放，100时技能范围最大，最不灵敏，0时就是直接指向对应方向的技能边框的
 // TODO 右键空白区域添加按键
 // TODO 设置界面添加本地数据编辑器（类似utools）

src/components/keyboard/KeyCommon.vue

@@ -14,11 +14,7 @@ import {
   NInputNumber,
 } from "naive-ui";
 import { CloseCircle, Settings } from "@vicons/ionicons5";
-import {
+import { KeyMacro, KeyMacroList, KeyTap } from "../../keyMappingConfig";
-  KeyMacro,
-  KeyMacroList,
-  KeyTap,
-} from "../../keyMappingConfig";
 
 const emit = defineEmits<{
   edit: [];
@@ -148,6 +144,20 @@ function saveMacro() {
     message.error("宏代码保存失败，请检查代码格式是否正确");
   }
 }
+
+const settingPosX = ref(0);
+const settingPosY = ref(0);
+function showSetting() {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const maxWidth = keyboardElement.clientWidth - 150;
+  const maxHeight = keyboardElement.clientHeight - 220;
+
+  settingPosX.value = Math.min(keyMapping.value.posX + 25, maxWidth);
+  settingPosY.value = Math.min(keyMapping.value.posY - 25, maxHeight);
+  showButtonSettingFlag.value = true;
+}
 </script>
 
 <template>
@@ -177,7 +187,7 @@ function saveMacro() {
     <NButton
       class="key-setting-btn"
       text
-      @click="showButtonSettingFlag = true"
+      @click="showSetting"
       :type="isActive ? 'primary' : 'info'"
     >
       <template #icon>
@@ -191,8 +201,8 @@ function saveMacro() {
     class="key-setting"
     v-if="isActive && showButtonSettingFlag"
     :style="{
-      left: `${keyMapping.posX + 25}px`,
+      left: `${settingPosX}px`,
-      top: `${keyMapping.posY - 45}px`,
+      top: `${settingPosY}px`,
     }"
   >
     <NH4 prefix="bar">{{
@@ -269,7 +279,9 @@ function saveMacro() {
   display: flex;
   flex-direction: column;
   padding: 10px 20px;
-  width: 100px;
+  box-sizing: border-box;
+  width: 150px;
+  height: 220px;
   border-radius: 5px;
   border: 2px solid var(--light-color);
   background-color: var(--bg-color);

src/components/keyboard/KeyInfo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { NIcon } from "naive-ui";
 import { CloseCircle } from "@vicons/ionicons5";
-import { Ref, onActivated, ref } from "vue";
+import { Ref, ref, watch } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
 
 const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
 
@@ -28,7 +27,7 @@ function mousemoveHandler(event: MouseEvent) {
 const keyboardCodeList: Ref<string[]> = ref([]);
 function keyupHandler(event: KeyboardEvent) {
   event.preventDefault();
-  if (keyboardCodeList.value.length > 10) {
+  if (keyboardCodeList.value.length > 5) {
     keyboardCodeList.value.shift();
     keyboardCodeList.value.push(event.code);
   } else keyboardCodeList.value.push(event.code);
@@ -36,27 +35,25 @@ function keyupHandler(event: KeyboardEvent) {
 
 function mousedownHandler(event: MouseEvent) {
   const key = `M${event.button}`;
-  if (keyboardCodeList.value.length > 10) {
+  if (keyboardCodeList.value.length > 5) {
     keyboardCodeList.value.shift();
     keyboardCodeList.value.push(key);
   } else keyboardCodeList.value.push(key);
 }
 
-onActivated(() => {
+watch(showKeyInfoFlag, (value) => {
-  const keyboardElement = document.getElementById("keyboardElement");
+  const keyboardElement = document.getElementById(
-  if (keyboardElement) {
+    "keyboardElement"
+  ) as HTMLElement;
+  if (value) {
     keyboardElement.addEventListener("mousemove", mousemoveHandler);
     keyboardElement.addEventListener("mousedown", mousedownHandler);
     document.addEventListener("keyup", keyupHandler);
-  }
+  } else {
-});
-
-onBeforeRouteLeave(() => {
-  const keyboardElement = document.getElementById("keyboardElement");
-  if (keyboardElement) {
     keyboardElement.removeEventListener("mousemove", mousemoveHandler);
     keyboardElement.removeEventListener("mousedown", mousedownHandler);
     document.removeEventListener("keyup", keyupHandler);
+    keyboardCodeList.value.splice(0, keyboardCodeList.value.length);
   }
 });
 
@@ -70,14 +67,27 @@ function dragHandler(downEvent: MouseEvent) {
     const target = downEvent.target;
     downEvent.preventDefault();
     target.style.setProperty("cursor", "grabbing");
+
     const element = downEvent.target.parentElement;
+    const keyboardElement = document.getElementById(
+      "keyboardElement"
+    ) as HTMLElement;
+    const maxWidth = keyboardElement.clientWidth - 120;
+    const maxHeight = keyboardElement.clientHeight - 200;
+
     const x = downEvent.clientX;
     const y = downEvent.clientY;
     const moveHandler = (moveEvent: MouseEvent) => {
-      let left = lastPosX + moveEvent.clientX - x;
+      const newX = lastPosX + moveEvent.clientX - x;
-      let top = lastPosY + moveEvent.clientY - y;
+      const newY = lastPosY + moveEvent.clientY - y;
-      element?.style.setProperty("left", `${left < 0 ? 0 : left}px`);
+      element?.style.setProperty(
-      element?.style.setProperty("top", `${top < 0 ? 0 : top}px`);
+        "left",
+        `${Math.max(0, Math.min(newX, maxWidth))}px`
+      );
+      element?.style.setProperty(
+        "top",
+        `${Math.max(0, Math.min(newY, maxHeight))}px`
+      );
     };
     window.addEventListener("mousemove", moveHandler);
     const upHandler = (upEvent: MouseEvent) => {
@@ -117,8 +127,10 @@ function dragHandler(downEvent: MouseEvent) {
   color: var(--light-color);
   background-color: var(--content-bg-color);
   width: 120px;
+  height: 200px;
   border-radius: 10px;
   position: absolute;
+  text-align: center;
   z-index: 8;
 
   .key-info-header {
@@ -127,7 +139,6 @@ function dragHandler(downEvent: MouseEvent) {
     font-weight: bold;
     height: 20px;
     border-radius: 10px 10px 0 0;
-    text-align: center;
     cursor: grab;
     position: relative;
 
@@ -152,8 +163,10 @@ function dragHandler(downEvent: MouseEvent) {
   }
 
   .key-info-content {
-    text-align: center;
+    height: 180px;
+    box-sizing: border-box;
     border: 1px solid var(--gray-color);
+    border-radius: 0 0 10px 10px;
     padding: 10px;
   }
 }

src/components/keyboard/KeyObservation.vue

@@ -66,6 +66,20 @@ function delCurKeyMapping() {
   activeIndex.value = -1;
   store.editKeyMappingList.splice(props.index, 1);
 }
+
+const settingPosX = ref(0);
+const settingPosY = ref(0);
+function showSetting() {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const maxWidth = keyboardElement.clientWidth - 150;
+  const maxHeight = keyboardElement.clientHeight - 220;
+
+  settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
+  settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
+  showButtonSettingFlag.value = true;
+}
 </script>
 
 <template>
@@ -96,7 +110,7 @@ function delCurKeyMapping() {
     <NButton
       class="key-setting-btn"
       text
-      @click="showButtonSettingFlag = true"
+      @click="showSetting"
       :type="isActive ? 'primary' : 'info'"
     >
       <template #icon>
@@ -110,8 +124,8 @@ function delCurKeyMapping() {
     class="key-setting"
     v-if="isActive && showButtonSettingFlag"
     :style="{
-      left: `${keyMapping.posX + 25}px`,
+      left: `${settingPosX}px`,
-      top: `${keyMapping.posY - 45}px`,
+      top: `${settingPosY}px`,
     }"
   >
     <NH4 prefix="bar">观察视角</NH4>
@@ -139,7 +153,9 @@ function delCurKeyMapping() {
   display: flex;
   flex-direction: column;
   padding: 10px 20px;
-  width: 100px;
+  box-sizing: border-box;
+  width: 150px;
+  height: 220px;
   border-radius: 5px;
   border: 2px solid var(--light-color);
   background-color: var(--bg-color);

src/components/keyboard/KeySkill.vue

@@ -130,6 +130,20 @@ function changeSkillType(flag: string) {
     }
   }
 }
+
+const settingPosX = ref(0);
+const settingPosY = ref(0);
+function showSetting() {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const maxWidth = keyboardElement.clientWidth - 200;
+  const maxHeight = keyboardElement.clientHeight - 350;
+
+  settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
+  settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
+  showButtonSettingFlag.value = true;
+}
 </script>
 
 <template>
@@ -160,7 +174,7 @@ function changeSkillType(flag: string) {
     <NButton
       class="key-setting-btn"
       text
-      @click="showButtonSettingFlag = true"
+      @click="showSetting"
       :type="isActive ? 'primary' : 'info'"
     >
       <template #icon>
@@ -174,8 +188,8 @@ function changeSkillType(flag: string) {
     class="key-setting"
     v-if="isActive && showButtonSettingFlag"
     :style="{
-      left: `${keyMapping.posX + 65}px`,
+      left: `${settingPosX}px`,
-      top: `${keyMapping.posY - 90}px`,
+      top: `${settingPosY}px`,
     }"
   >
     <NH4 prefix="bar">技能</NH4>
@@ -238,7 +252,9 @@ function changeSkillType(flag: string) {
   display: flex;
   flex-direction: column;
   padding: 10px 20px;
-  width: 120px;
+  box-sizing: border-box;
+  width: 200px;
+  height: 350px;
   border-radius: 5px;
   border: 2px solid var(--light-color);
   background-color: var(--bg-color);

src/components/keyboard/KeySteeringWheel.vue

@@ -82,6 +82,23 @@ function delCurKeyMapping() {
   activeIndex.value = -1;
   store.editKeyMappingList.splice(props.index, 1);
 }
+
+const settingPosX = ref(0);
+const settingPosY = ref(0);
+function showSetting() {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const maxWidth = keyboardElement.clientWidth - 150;
+  const maxHeight = keyboardElement.clientHeight - 220;
+
+  settingPosX.value = Math.min(
+    keyMapping.value.posX + offset.value + 10,
+    maxWidth
+  );
+  settingPosY.value = Math.min(keyMapping.value.posY - offset.value, maxHeight);
+  showButtonSettingFlag.value = true;
+}
 </script>
 
 <template>
@@ -151,7 +168,7 @@ function delCurKeyMapping() {
     <NButton
       class="key-setting-btn"
       text
-      @click="showButtonSettingFlag = true"
+      @click="showSetting"
       :type="isActive ? 'primary' : 'info'"
       :style="{
         left: `${offset * 2 + 10}px`,
@@ -169,8 +186,8 @@ function delCurKeyMapping() {
     class="key-setting"
     v-if="isActive && showButtonSettingFlag"
     :style="{
-      left: `${keyMapping.posX + offset + 10}px`,
+      left: `${settingPosX}px`,
-      top: `${keyMapping.posY - 120}px`,
+      top: `${settingPosY}px`,
     }"
   >
     <NH4 prefix="bar">键盘行走</NH4>
@@ -197,7 +214,9 @@ function delCurKeyMapping() {
   display: flex;
   flex-direction: column;
   padding: 10px 20px;
-  width: 100px;
+  box-sizing: border-box;
+  width: 150px;
+  height: 220px;
   border-radius: 5px;
   border: 2px solid var(--light-color);
   background-color: var(--bg-color);