弃用 mousetrap

package-lock.json

@@ -13,8 +13,6 @@
         "croner": "^4.3.9",
         "monaco-editor": "^0.33.0",
         "monaco-editor-webpack-plugin": "^7.0.1",
-        "mousetrap": "^1.6.5",
-        "mousetrap-record": "^1.0.1",
         "picture-compressor": "^1.1.0",
         "pinyin-match": "^1.2.2",
         "quasar": "^2.6.6",
@@ -7161,16 +7159,6 @@
         "webpack": "^4.5.0 || 5.x"
       }
     },
-    "node_modules/mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmmirror.com/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-    },
-    "node_modules/mousetrap-record": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/mousetrap-record/-/mousetrap-record-1.0.1.tgz",
-      "integrity": "sha512-0cHFVL3MpH6qRJFe/3svt/hwQJArl2tArW4mt9k51auiFKlWz27DQ6U82aasvuILExvPOa/B7wxngEHxBTQIwQ=="
-    },
     "node_modules/mrmime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.0.tgz",
@@ -16418,16 +16406,6 @@
         "loader-utils": "^2.0.2"
       }
     },
-    "mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmmirror.com/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-    },
-    "mousetrap-record": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/mousetrap-record/-/mousetrap-record-1.0.1.tgz",
-      "integrity": "sha512-0cHFVL3MpH6qRJFe/3svt/hwQJArl2tArW4mt9k51auiFKlWz27DQ6U82aasvuILExvPOa/B7wxngEHxBTQIwQ=="
-    },
     "mrmime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.0.tgz",

package.json

@@ -16,8 +16,6 @@
     "croner": "^4.3.9",
     "monaco-editor": "^0.33.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "mousetrap": "^1.6.5",
-    "mousetrap-record": "^1.0.1",
     "picture-compressor": "^1.1.0",
     "pinyin-match": "^1.2.2",
     "quasar": "^2.6.6",

src/components/CommandEditor.vue

@@ -99,16 +99,22 @@
                 <!-- quickcommand系列按键 -->
                 <q-item
                   :class="{
-                    'text-negative': isRecording && index === 0,
+                    'text-negative': !!recording && index === 0,
                   }"
                   clickable
                   v-for="(item, index) in [
-                    isRecording ? 'play_arrow' : 'keyboard',
+                    !!recording ? 'stop' : 'play_arrow',
                     'ads_click',
                     'help',
                   ]"
                   :key="index"
-                  @click="[listenKey, showActions, showHelp][index]"
+                  @click="
+                    [
+                      !!recording ? stopRecord : recordKeys,
+                      showActions,
+                      showHelp,
+                    ][index]
+                  "
                   v-show="quickcommandInfo.program === 'quickcommand'"
                 >
                   <q-item-section avatar>
@@ -116,7 +122,7 @@
                   </q-item-section>
                   <q-item-section>{{
                     [
-                      isRecording ? "正在录制" : "模拟按键",
+                      !!recording ? "停止录制" : "录制按键",
                       "快捷动作",
                       "查看文档",
                     ][index]
@@ -267,7 +273,7 @@ export default {
       resultMaxLength: 10000,
       showSidebar: this.action.type !== "run",
       isRunCodePage: this.action.type === "run",
-      isRecording: false,
+      recording: null,
     };
   },
   props: {
@@ -278,6 +284,7 @@ export default {
     this.$refs.sidebar?.init();
   },
   beforeUnmount() {
+    !!this.recording && document.removeEventListener("keyup", this.recording);
     if (this.action.type !== "run") return;
     let command = _.cloneDeep(this.quickcommandInfo);
     command.cursorPosition = this.$refs.editor.getCursorPosition();
@@ -336,21 +343,37 @@ export default {
       let highlight = this.$root.programs[language].highlight;
       this.$refs.editor.setEditorLanguage(highlight ? highlight : language);
     },
-    listenKey() {
+    recordKeys() {
-      this.isRecording = true;
+      let keys = [];
-      Mousetrap.record((sequence) => {
+      this.recording = (event) => {
-        sequence.forEach((s) => {
+        event.preventDefault();
-          let keys = s;
+        keys.push(
-          if (s.includes("+") && s.length > 1)
+          event.code.includes("Key") ? event.code.slice(-1) : event.key
-            keys = s
+        );
-              .split("+")
+        setTimeout(() => {
-              .reverse()
+          this.$refs.editor.repacleEditorSelection(
-              .map((x) => x.trim().replace("meta", "command"))
+            this.generatedKeyTapCode(this.keyAnalysis(keys.slice(0, 2)))
-              .join(`", "`);
+          );
-          this.$refs.editor.repacleEditorSelection(`keyTap("${keys}")\n`);
+          keys = [];
-        });
+        }, 200);
-        this.isRecording = false;
+      };
-      });
+      document.addEventListener("keyup", this.recording);
+    },
+    stopRecord() {
+      document.removeEventListener("keyup", this.recording);
+      this.recording = null;
+    },
+    keyAnalysis(keys) {
+      if (keys.length === 1) return keys;
+      keys = keys.sort((x, y) => x.length - y.length);
+      if (keys[1].length === 1) keys.pop();
+      return keys;
+    },
+    generatedKeyTapCode(keys) {
+      return `keyTap("${keys
+        .join(", ")
+        .replace("Meta", "command")
+        .toLowerCase()}")\n`;
     },
     showActions() {
       this.isActionsShow = true;