vue shortcut

app/controller/v1/example.js

@@ -74,6 +74,18 @@ class ExampleController extends BaseController {
     self.sendData(uploadRes);
   }
 
+  async setShortcut() {
+    const self = this;
+    const { ctx, service } = this;
+    const body = ctx.request.body;
+    const shortcutStr = body.shortcutStr;
+    const data = {};
+
+    await service.example.setShortcut(shortcutStr);
+
+    self.sendSuccess(data);
+  }
+
   async getWsUrl() {
     const self = this;
     const { service } = this;

app/router/example.js

@@ -21,4 +21,6 @@ module.exports = app => {
   router.post('/api/v1/example/updateTestData', controller.v1.example.updateTestData);
   // get test data
   router.post('/api/v1/example/getTestData', controller.v1.example.getTestData);
+  // set shortcut
+  router.post('/api/v1/example/setShortcut', controller.v1.example.setShortcut);
 };

app/service/example.js

@@ -17,6 +17,12 @@ class ExampleService extends BaseService {
     return result;
   }
 
+  async setShortcut(shortcutStr) {
+    const self = this;
+    let result = await self.ipcCall('example.setShortcut', shortcutStr);
+    return result;
+  }
+
   async uploadFileToSMMS(tmpFile) {
     const res = {
       code: 1000,

electron/apis/example.js

@@ -7,6 +7,7 @@ const {
   shell,
   globalShortcut
 } = require('electron');
+const shortcut = require('../lib/shortcut');
 
 exports.getPath = function () {
   const dir = app.getAppPath();
@@ -28,16 +29,14 @@ exports.executeJS = function (str) {
   return webContents.fromId(1).executeJavaScript(jscode);
 }
 
-exports.shortcut = function (shortcutStr = '') {
-  // if (!dir) {
-  //   return false;
-  // }
-  // globalShortcut.register("CommandOrControl+Shift+S", () => {
-  //   MAIN_WINDOW.show()
-  // })
-  // globalShortcut.register("CommandOrControl+Shift+H", () => {
-  //   MAIN_WINDOW.hide()
-  // })
+exports.setShortcut = function (shortcutStr = "") {
+  if (!shortcutStr || shortcutStr == "") {
+    return false;
+  }
+  shortcut.register(shortcutStr, true, function (){
+    MAIN_WINDOW.show()
+  });
+  
   return true;
 }
 

electron/lib/shortcut.js

@@ -21,7 +21,7 @@ exports.setup = function () {
   // }
 }
 
-exports.register = function (cmd, fn, force = true) {
+exports.register = function (cmd, force = true, fn) {
   const isRegistered = this.isRegistered(cmd);
   console.log('[shortcut] [register] cmd:', [cmd, isRegistered]);
   if (isRegistered && !force) {

frontend/src/api/main.js

@@ -6,6 +6,7 @@ const mainApi = {
   openDir: '/api/v1/example/openLocalDir',
   uploadFile: '/api/v1/example/uploadFile',
   executeJS: '/api/v1/example/executeJS',
+  setShortcut: '/api/v1/example/setShortcut',
   autoLaunchEnable: '/api/v1/setting/autoLaunchEnable',
   autoLaunchDisable: '/api/v1/setting/autoLaunchDisable',
   autoLaunchIsEnabled: '/api/v1/setting/autoLaunchIsEnabled'

frontend/src/main.js

@@ -5,6 +5,7 @@ import App from './App'
 import router from './router'
 import { VueAxios } from './utils/request'
 import InjectIpc from '@/utils/injectIpc'
+import HotKeyInput from '@/utils/shortcut/lib/index.min.js'
 
 Vue.use(antd)
 // mount axios to `Vue.$http` and `this.$http`
@@ -12,6 +13,8 @@ Vue.use(VueAxios)
 // 全局注入IPC
 Vue.use(InjectIpc)
 
+Vue.use(HotKeyInput)
+
 Vue.config.productionTip = false
 
 new Vue({

frontend/src/views/example/Shortcut.vue

@@ -4,89 +4,75 @@
       demo4 快捷键
     </h3>
     <a-row :gutter="[16,16]">
-      <a-col :span="12">
-        显示窗口
-        <!-- <HotkeyInput
-          :hotkey.sync="hotKeyObj.keys"
-          :verify="handleHotkeyVerify"
-          placeholder="请按需要绑定的按键，支持组合按键"
-        /> -->
-        <a-input-search
-          style="width: 272px;"
-          v-model="cmd"
-          @search="handleSetting"
-          placeholder="快捷键">
-          <a-button slot="enterButton">
-            保存
-          </a-button>
-        </a-input-search>
-      </a-col>
-      <a-col :span="12">
-        隐藏窗口
-        <a-input-search
-          style="width: 272px;"
-          v-model="cmd"
-          @search="handleSetting"
-          placeholder="快捷键">
-          <a-button slot="enterButton">
-            保存
-          </a-button>
-        </a-input-search>
-      </a-col>
-    </a-row>  
-    <a-row :gutter="[16,16]">
-      <a-col :span="12">
+      <a-col :span="24">
         窗口最小化
-        <a-input-search
-          style="width: 272px;"
-          v-model="cmd"
-          @search="handleSetting"
-          placeholder="快捷键">
-          <a-button slot="enterButton">
-            保存
-          </a-button>
-        </a-input-search>
-      </a-col>
-      <a-col :span="12">
-        窗口还原
-        <a-input-search
-          style="width: 272px;"
-          v-model="cmd"
-          @search="handleSetting"
-          placeholder="快捷键">
-          <a-button slot="enterButton">
-            保存
-          </a-button>
-        </a-input-search>
+        <a-form @submit="handleSubmit" :form="form">
+          <a-form-item>
+            <hot-key-input
+              style="width: 100%;"
+              :hotkey.sync="hotKeyObj.keys"
+              :verify="handleHotkeyVerify"
+              :max="1"
+              type="lowser"
+              :reset="true"
+              :shake="false"
+              :range="null"
+              placeholder="快捷键">
+            </hot-key-input>
+          </a-form-item>
+          <a-form-item
+            :wrapperCol="{ span: 24 }"
+            style="text-align: center"
+          >
+            <a-button htmlType="submit" type="primary">保存</a-button>
+          </a-form-item>
+        </a-form>  
       </a-col>
     </a-row>
   </div>
 </template>
 <script>
-// import VHotkey from "v-hotkey";
-// import { openDir } from '@/api/main'
+import { localApi } from '@/api/main'
 
 export default {
   components: {},
   data() {
     return {
+      form: this.$form.createForm(this),
       cmd: '',
       hotKeyObj: {
         tab: 'save',
-        // keys: undefined
-        keys: ["Ctrl+A", "Alt+D"]
+        keys: ["Ctrl+q"]
       },
     };
   },
   methods: {
-    handleSetting (value) {
-      console.log('cmd:', value)
-      //this.cmd = ''
-    },
     handleHotkeyVerify(hotkey) {
-      console.log('验证：', hotkey, this.hotKeyObj)
+      console.log('组合键：', hotkey)
       return true;
     },
+    handleSubmit (e) {
+      e.preventDefault()
+      console.log('submit 验证：', this.hotKeyObj)
+      const shortcutStr = this.hotKeyObj.keys[0];
+      const params = {
+        'shortcutStr': shortcutStr
+      }
+      localApi('setShortcut', params).then(res => {
+        if (res.code !== 0) {
+          return false
+        }
+        this.autoLaunchChecked = res.data.isEnabled;
+      }).catch(err => {
+        console.log('err:', err)
+      })
+
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
   }
 };
 </script>