新增按键录制

package-lock.json

@@ -13,6 +13,8 @@
         "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",
@@ -23,6 +25,7 @@
       "devDependencies": {
         "@babel/eslint-parser": "^7.13.14",
         "@quasar/app-webpack": "^3.5.1",
+        "@types/mousetrap": "^1.6.9",
         "copy-webpack-plugin": "^10.2.4",
         "eslint": "^8.10.0",
         "eslint-config-prettier": "^8.1.0",
@@ -2286,6 +2289,12 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
       "dev": true
     },
+    "node_modules/@types/mousetrap": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmmirror.com/@types/mousetrap/-/mousetrap-1.6.9.tgz",
+      "integrity": "sha512-HUAiN65VsRXyFCTicolwb5+I7FM6f72zjMWr+ajGk+YTvzBgXqa2A5U7d+rtsouAkunJ5U4Sb5lNJjo9w+nmXg==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "17.0.23",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
@@ -7152,6 +7161,16 @@
         "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",
@@ -12644,6 +12663,12 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
       "dev": true
     },
+    "@types/mousetrap": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmmirror.com/@types/mousetrap/-/mousetrap-1.6.9.tgz",
+      "integrity": "sha512-HUAiN65VsRXyFCTicolwb5+I7FM6f72zjMWr+ajGk+YTvzBgXqa2A5U7d+rtsouAkunJ5U4Sb5lNJjo9w+nmXg==",
+      "dev": true
+    },
     "@types/node": {
       "version": "17.0.23",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
@@ -16393,6 +16418,16 @@
         "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,6 +16,8 @@
     "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",
@@ -26,6 +28,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app-webpack": "^3.5.1",
+    "@types/mousetrap": "^1.6.9",
     "copy-webpack-plugin": "^10.2.4",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.1.0",

src/components/CommandEditor.vue

@@ -97,8 +97,15 @@
               <q-list style="min-width: 300px" class="text-primary">
                 <!-- quickcommand系列按键 -->
                 <q-item
+                  :class="{
+                    'text-negative': isRecording && index === 0,
+                  }"
                   clickable
-                  v-for="(item, index) in ['keyboard', 'ads_click', 'help']"
+                  v-for="(item, index) in [
+                    isRecording ? 'play_arrow' : 'keyboard',
+                    'ads_click',
+                    'help',
+                  ]"
                   :key="index"
                   @click="[listenKey, showActions, showHelp][index]"
                   v-show="quickcommandInfo.program === 'quickcommand'"
@@ -107,7 +114,11 @@
                     <q-icon :name="item" />
                   </q-item-section>
                   <q-item-section>{{
-                    ["模拟按键", "快捷动作", "查看文档"][index]
+                    [
+                      isRecording ? "正在录制" : "模拟按键",
+                      "快捷动作",
+                      "查看文档",
+                    ][index]
                   }}</q-item-section>
                 </q-item>
                 <!-- 自定义解释器 -->
@@ -221,6 +232,7 @@ import MonacoEditor from "components/MonacoEditor";
 import CommandSideBar from "components/CommandSideBar";
 import CommandRunResult from "components/CommandRunResult";
 import QuickAction from "components/popup/QuickAction";
+const Mousetrap = require("mousetrap-record")(require("mousetrap"));
 
 export default {
   components: { MonacoEditor, CommandSideBar, CommandRunResult, QuickAction },
@@ -248,6 +260,7 @@ export default {
       resultMaxLength: 10000,
       showSidebar: this.action.type !== "run",
       isRunCodePage: this.action.type === "run",
+      isRecording: false,
     };
   },
   props: {
@@ -316,7 +329,22 @@ export default {
       let highlight = this.$root.programs[language].highlight;
       this.$refs.editor.setEditorLanguage(highlight ? highlight : language);
     },
-    listenKey() {},
+    listenKey() {
+      this.isRecording = true;
+      Mousetrap.record((sequence) => {
+        sequence.forEach((s) => {
+          let keys = s;
+          if (s.includes("+") && s.length > 1)
+            keys = s
+              .split("+")
+              .reverse()
+              .map((x) => x.trim().replace("meta", "command"))
+              .join(`", "`);
+          this.$refs.editor.repacleEditorSelection(`keyTap("${keys}")\n`);
+        });
+        this.isRecording = false;
+      });
+    },
     showActions() {
       this.isActionsShow = true;
     },