perf: 客户端新增截图快捷键

electron/electron.js

@@ -19,6 +19,9 @@ let mainWindow = null,
     devloadUrl = "",
     devloadCachePath = path.resolve(__dirname, ".devload");
 
+let screenshotObj = null,
+    screenshotKey = null;
+
 if (fs.existsSync(devloadCachePath)) {
     devloadUrl = fs.readFileSync(devloadCachePath, 'utf8')
 }
@@ -196,13 +199,15 @@ if (!getTheLock) {
         if (process.platform === 'win32') {
             app.setAppUserModelId(config.name)
         }
-        // 截图
-        const screenshots = new Screenshots({
+        // 截图对象
+        screenshotObj = new Screenshots({
             singleWindow: true
         })
-        globalShortcut.register('ctrl+shift+a', () => {
-            screenshots.startCapture().then(_ => {})
-        })
+        globalShortcut.register("esc", () => {
+            if (screenshotObj.$win?.isFocused()) {
+                screenshotObj.endCapture().then(_ => {});
+            }
+        });
     })
 }
 
@@ -454,6 +459,35 @@ ipcMain.on('copyBase64Image', (event, args) => {
     event.returnValue = "ok"
 })
 
+/**
+ * 绑定截图快捷键
+ * @param args
+ */
+ipcMain.on('bindScreenshotKey', (event, args) => {
+    const { key } = args;
+    if (screenshotKey !== key) {
+        if (screenshotKey) {
+            globalShortcut.unregister(screenshotKey)
+            screenshotKey = null
+        }
+        if (key) {
+            screenshotKey = key
+            globalShortcut.register(key, () => {
+                screenshotObj.startCapture().then(_ => {})
+            })
+        }
+    }
+    event.returnValue = "ok"
+})
+
+/**
+ * 执行截图
+ */
+ipcMain.on('onScreenshot', (event) => {
+    screenshotObj.startCapture().then(_ => {})
+    event.returnValue = "ok"
+})
+
 //================================================================
 // Update
 //================================================================

electron/package.json

@@ -26,13 +26,13 @@
         "url": "https://github.com/kuaifan/dootask.git"
     },
     "devDependencies": {
-        "@electron-forge/cli": "^6.0.1",
-        "@electron-forge/maker-deb": "^6.0.1",
-        "@electron-forge/maker-rpm": "^6.0.1",
-        "@electron-forge/maker-squirrel": "^6.0.1",
-        "@electron-forge/maker-zip": "^6.0.1",
+        "@electron-forge/cli": "^6.0.4",
+        "@electron-forge/maker-deb": "^6.0.4",
+        "@electron-forge/maker-rpm": "^6.0.4",
+        "@electron-forge/maker-squirrel": "^6.0.4",
+        "@electron-forge/maker-zip": "^6.0.4",
         "dotenv": "^16.0.3",
-        "electron": "^21.3.0",
+        "electron": "^22.0.0",
         "electron-builder": "^23.6.0",
         "electron-notarize": "^1.2.2",
         "form-data": "^4.0.0",

resources/assets/js/App.vue

@@ -237,6 +237,7 @@ export default {
                 key: 'manifest',
                 url: $A.apiUrl("../manifest")
             })
+            $A.bindScreenshotKey($A.jsonParse(window.localStorage['__keyboard:data__'] || {}));
         },
 
         eeuiEvents() {

resources/assets/js/app.js

@@ -193,3 +193,16 @@ $A.execMainCacheJudge = (key) => {
     return val
 };
 
+$A.bindScreenshotKey = (data) => {
+    let key = "";
+    if (data.screenshot_key && (data.screenshot_mate || data.screenshot_shift)) {
+        if (data.screenshot_mate) {
+            key = /macintosh|mac os x/i.test(navigator.userAgent) ? 'command' : 'ctrl'
+        }
+        if (data.screenshot_shift) {
+            key = `${key ? `${key}+` : ''}shift`
+        }
+        key = `${key}+${data.screenshot_key.toLowerCase()}`
+    }
+    $A.Electron.sendMessage('bindScreenshotKey', {key});
+};

resources/assets/js/pages/manage/setting/index.vue

@@ -76,6 +76,10 @@ export default {
                 {path: 'email', name: '修改邮箱'},
             ]
 
+            if (this.$Electron) {
+                menu.splice(2, 0, {path: 'keyboard', name: '快捷键'})
+            }
+
             if ([
                 '127.0.0.1:2222',
                 '192.168.100.88:2222',

resources/assets/js/pages/manage/setting/keyboard.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="setting-item submit">
+        <Form ref="formData" :model="formData" :rules="ruleData" label-width="auto" @submit.native.prevent>
+            <FormItem :label="$L('截图快捷键')" prop="screenshot">
+                <div class="input-box">
+                    <Checkbox v-model="formData.screenshot_mate">{{mateName}}</Checkbox>
+                    <div class="input-box-push">+</div>
+                    <Checkbox v-model="formData.screenshot_shift">Shift</Checkbox>
+                    <div class="input-box-push">+</div>
+                    <Input class="input-box-key" :value="formData.screenshot_key" @on-keyup="onKeydown" :maxlength="1"/>
+                </div>
+            </FormItem>
+        </Form>
+        <div class="setting-footer">
+            <Button :loading="loadIng > 0" type="primary" @click="submitForm">{{$L('提交')}}</Button>
+            <Button :loading="loadIng > 0" @click="resetForm" style="margin-left: 8px">{{$L('重置')}}</Button>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.input-box {
+    display: flex;
+    align-items: center;
+    .input-box-push {
+        opacity: 0.5;
+        padding: 0 12px 0 8px;
+    }
+    .input-box-key {
+        width: 80px;
+    }
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            loadIng: 0,
+
+            mateName: /macintosh|mac os x/i.test(navigator.userAgent) ? 'Command' : 'Ctrl',
+
+
+            formData: {
+                screenshot_mate: true,
+                screenshot_shift: true,
+                screenshot_key: '',
+            },
+
+            ruleData: { },
+        }
+    },
+
+    mounted() {
+        this.initData();
+    },
+
+    methods: {
+        initData() {
+            this.formData = Object.assign({
+                screenshot_mate: true,
+                screenshot_shift: true,
+                screenshot_key: '',
+            }, $A.jsonParse(window.localStorage['__keyboard:data__'] || {}));
+            //
+            this.formData_bak = $A.cloneJSON(this.formData);
+        },
+
+        onKeydown({key}) {
+            this.formData.screenshot_key = key && key.length === 1 ? key.toUpperCase() : ""
+        },
+
+        submitForm() {
+            this.$refs.formData.validate((valid) => {
+                if (valid) {
+                    window.localStorage['__keyboard:data__'] = $A.jsonStringify(this.formData);
+                    $A.bindScreenshotKey(this.formData);
+                }
+            })
+        },
+
+        resetForm() {
+            this.formData = $A.cloneJSON(this.formData_bak);
+        }
+    }
+}
+</script>

resources/assets/js/pages/manage/setting/language.vue

@@ -15,11 +15,9 @@
 </template>
 
 <script>
-import ImgUpload from "../../../components/ImgUpload";
 import {languageList, languageType, setLanguage} from "../../../language";
 
 export default {
-    components: {ImgUpload},
     data() {
         return {
             loadIng: 0,

resources/assets/js/routes.js

@@ -44,6 +44,11 @@ export default [
                         path: 'language',
                         component: () => import('./pages/manage/setting/language.vue'),
                     },
+                    {
+                        name: 'manage-setting-keyboard',
+                        path: 'keyboard',
+                        component: () => import('./pages/manage/setting/keyboard.vue'),
+                    },
                     {
                         name: 'manage-setting-password',
                         path: 'password',

resources/assets/js/store/actions.js

@@ -514,6 +514,7 @@ export default {
                 const cacheLoginEmail = $A.getStorageString("cacheLoginEmail");
                 const cacheFileSort = $A.getStorageJson("cacheFileSort");
                 const languageType = window.localStorage['__language:type__'];
+                const keyboardData = window.localStorage['__keyboard:data__'];
                 const themeMode = window.localStorage['__theme:mode__'];
                 //
                 window.localStorage.clear();
@@ -525,6 +526,7 @@ export default {
                 state.cacheTasks = [];
                 //
                 window.localStorage['__language:type__'] = languageType;
+                window.localStorage['__keyboard:data__'] = keyboardData;
                 window.localStorage['__theme:mode__'] = themeMode;
                 $A.setStorage("cacheProjectParameter", state.cacheProjectParameter);
                 $A.setStorage("cacheServerUrl", state.cacheServerUrl);