diff --git a/package-lock.json b/package-lock.json index 1ec7ab1..dcef6a2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a9bc052..db4c3a9 100644 --- a/package.json +++ b/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", diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue index e49831e..14c4a61 100644 --- a/src/components/CommandEditor.vue +++ b/src/components/CommandEditor.vue @@ -97,8 +97,15 @@ {{ - ["模拟按键", "快捷动作", "查看文档"][index] + [ + isRecording ? "正在录制" : "模拟按键", + "快捷动作", + "查看文档", + ][index] }} @@ -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; },