diff --git a/package-lock.json b/package-lock.json index dcef6a2..64946d2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index db4c3a9..c97ad5c 100644 --- a/package.json +++ b/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", diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue index 436243e..284bc22 100644 --- a/src/components/CommandEditor.vue +++ b/src/components/CommandEditor.vue @@ -99,16 +99,22 @@ @@ -116,7 +122,7 @@ {{ [ - 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() { - 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; - }); + recordKeys() { + let keys = []; + this.recording = (event) => { + event.preventDefault(); + keys.push( + event.code.includes("Key") ? event.code.slice(-1) : event.key + ); + setTimeout(() => { + this.$refs.editor.repacleEditorSelection( + this.generatedKeyTapCode(this.keyAnalysis(keys.slice(0, 2))) + ); + keys = []; + }, 200); + }; + 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;