fix(KeyBoard): setting card width

src/components/keyboard/KeyCommon.vue

@@ -210,14 +210,14 @@ function showSetting() {
   >
     <NH4 prefix="bar">{{
       keyMapping.type === "CancelSkill"
-        ? "技能取消"
+        ? t("pages.KeyBoard.KeyCommon.cancelSkill")
         : keyMapping.type === "Tap"
-        ? "普通点击"
+        ? t("pages.KeyBoard.KeyCommon.tap")
-        : "宏"
+        : t("pages.KeyBoard.KeyCommon.macro")
     }}</NH4>
     <NFormItem
       v-if="keyMapping.type === 'Macro'"
-      :label="$t('pages.KeyBoard.KeyCommon.macro')"
+      :label="$t('pages.KeyBoard.KeyCommon.macroCode')"
     >
       <NButton type="success" @click="editMacro">
         {{ $t("pages.KeyBoard.KeyCommon.editMacro") }}

src/components/keyboard/KeyFire.vue

@@ -77,11 +77,11 @@ function showSetting() {
   const keyboardElement = document.getElementById(
     "keyboardElement"
   ) as HTMLElement;
-  const maxWidth = keyboardElement.clientWidth - 150;
+  const maxWidth = keyboardElement.clientWidth - 200;
-  const maxHeight = keyboardElement.clientHeight - 420;
+  const maxHeight = keyboardElement.clientHeight - 430;
 
   settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
-  settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
+  settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
   keyboardStore.showButtonSettingFlag = true;
 }
 </script>
@@ -189,8 +189,8 @@ function showSetting() {
   flex-direction: column;
   padding: 10px 20px;
   box-sizing: border-box;
-  width: 150px;
+  width: 200px;
-  height: 420px;
+  height: 430px;
   border-radius: 5px;
   border: 2px solid var(--light-color);
   background-color: var(--bg-color);

src/components/keyboard/KeyObservation.vue

@@ -73,7 +73,7 @@ function showSetting() {
   const maxHeight = keyboardElement.clientHeight - 300;
 
   settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
-  settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
+  settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
   keyboardStore.showButtonSettingFlag = true;
 }
 </script>

src/components/keyboard/KeySight.vue

@@ -69,11 +69,11 @@ function showSetting() {
   const keyboardElement = document.getElementById(
     "keyboardElement"
   ) as HTMLElement;
-  const maxWidth = keyboardElement.clientWidth - 150;
+  const maxWidth = keyboardElement.clientWidth - 200;
   const maxHeight = keyboardElement.clientHeight - 380;
 
   settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
-  settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
+  settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
   keyboardStore.showButtonSettingFlag = true;
 }
 </script>
@@ -176,7 +176,7 @@ function showSetting() {
   flex-direction: column;
   padding: 10px 20px;
   box-sizing: border-box;
-  width: 150px;
+  width: 200px;
   height: 380px;
   border-radius: 5px;
   border: 2px solid var(--light-color);

src/components/keyboard/KeySkill.vue

@@ -184,10 +184,10 @@ function showSetting() {
     "keyboardElement"
   ) as HTMLElement;
   // setting
-  const maxWidth = keyboardElement.clientWidth - 200;
+  const maxWidth = keyboardElement.clientWidth - 220;
   const maxHeight = keyboardElement.clientHeight - 430;
   settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
-  settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
+  settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
   updateRangeIndicator(keyboardElement);
   keyboardStore.showButtonSettingFlag = true;
 }
@@ -373,7 +373,7 @@ function updateRangeIndicator(element?: HTMLElement) {
   flex-direction: column;
   padding: 10px 20px;
   box-sizing: border-box;
-  width: 200px;
+  width: 220px;
   height: 430px;
   border-radius: 5px;
   border: 2px solid var(--light-color);

src/components/keyboard/KeySteeringWheel.vue

@@ -79,7 +79,7 @@ function showSetting() {
   const keyboardElement = document.getElementById(
     "keyboardElement"
   ) as HTMLElement;
-  const maxWidth = keyboardElement.clientWidth - 150;
+  const maxWidth = keyboardElement.clientWidth - 179;
   const maxHeight = keyboardElement.clientHeight - 300;
 
   settingPosX.value = Math.min(
@@ -219,7 +219,7 @@ function showSetting() {
   flex-direction: column;
   padding: 10px 20px;
   box-sizing: border-box;
-  width: 150px;
+  width: 170px;
   height: 300px;
   border-radius: 5px;
   border: 2px solid var(--light-color);

src/hotkey.ts

@@ -650,7 +650,6 @@ function addSightShortcuts(
   sightKeyMapping: KeySight,
   fireKeyMapping?: KeyFire
 ) {
-  // TODO 5. 调整所有按键设置宽度，英文的存在换行问题
   const appWindow = getCurrent();
 
   let mouseLock = false;

src/i18n/en-US.json

@@ -143,7 +143,6 @@
       "KeyCommon": {
         "macroParseSuccess": "The macro code is parsed successfully, but the correctness of the code is not guaranteed. Please test by yourself.",
         "macroParseFailed": "Macro code failed to save, please check whether the code format is correct.",
-        "macro": "Macro code",
         "editMacro": "Edit macro",
         "macroModal": {
           "title": "Macro editor",
@@ -151,7 +150,11 @@
           "placeholder": "JSON macro code, can be empty",
           "loop": "Macro executed on key press and hold",
           "up": "Macro executed on key up"
-        }
+        },
+        "macroCode": "Macro code",
+        "cancelSkill": "CancelSkill",
+        "tap": "Tap",
+        "macro": "Macro"
       },
       "setting": {
         "touchTime": "Touch duration",

src/i18n/zh-CN.json

@@ -143,7 +143,6 @@
       "KeyCommon": {
         "macroParseSuccess": "宏代码解析成功，但不保证代码正确性，请自行测试",
         "macroParseFailed": "宏代码保存失败，请检查代码格式是否正确",
-        "macro": "宏代码",
         "editMacro": "编辑宏代码",
         "macroModal": {
           "title": "宏编辑",
@@ -151,7 +150,11 @@
           "loop": "按住执行的宏",
           "placeholder": "JSON宏代码, 可为空",
           "up": "抬起执行的宏"
-        }
+        },
+        "cancelSkill": "技能取消",
+        "tap": "普通点击",
+        "macroCode": "宏代码",
+        "macro": "宏"
       },
       "setting": {
         "touchTime": "触摸时长",