增加失焦隐藏or不隐藏的小按钮

src/main/common/common.js

-import {app} from 'electron';
-import './config';
-import Listener from './listener';
+import { app } from "electron";
+import "./config";
+import Listener from "./listener";
+import { remote } from "electron";
 
 export default function init(mainWindow) {
   const listener = new Listener();
@@ -16,11 +17,11 @@ export default function init(mainWindow) {
     }
   });
 
-  // 打包后，失焦隐藏
-  mainWindow.on('blur', () => {
-    app.isPackaged && mainWindow.hide();
+  // 判断失焦是否隐藏
+  mainWindow.on("blur", () => {
+    const config = { ...opConfig.get() };
+    if (config.perf.common.hideOnBlur) {
+      mainWindow.hide();
+    }
   });
-
 }
-
-

src/main/common/config.js

@@ -2,6 +2,7 @@ import path from "path";
 import fs from "fs";
 import { getLocalDataFile } from "./utils";
 import os from "os";
+import { app } from "electron";
 
 const configPath = path.join(getLocalDataFile(), "./rubick-config.json");
 
@@ -16,6 +17,8 @@ const defaultConfigForAnyPlatform = {
     common: {
       start: true,
       space: true,
+      // 是否失焦隐藏。默认在dev环境不隐藏，在打包后隐藏。
+      hideOnBlur: app.isPackaged,
     },
     local: {
       search: true,

src/renderer/App.vue

@@ -59,6 +59,14 @@
             </div>
           </div>
         </a-input>
+        <span class="button-hide-on-blur" @click="changeHideOnBlur">
+          <a-icon
+            type="pushpin"
+            :style="{
+              color: config.perf.common.hideOnBlur ? 'grey' : '#ea68a2',
+            }"
+          ></a-icon>
+        </span>
         <div v-show="showOptions" class="options">
           <a-list item-layout="horizontal" :data-source="options">
             <a-list-item
@@ -135,11 +143,10 @@ export default {
     return {
       query: this.$route.query,
       searchFn: null,
-      config: opConfig.get(),
+      config: { ...opConfig.get() },
       currentSelect: 0,
     };
   },
-
   created() {
     window.setPluginInfo = (pluginInfo) => {
       this.commonUpdate({
@@ -147,7 +154,6 @@ export default {
       });
     };
   },
-
   mounted() {
     ipcRenderer.on("init-rubick", this.closeTag);
     ipcRenderer.on("new-window", this.newWindow);
@@ -319,10 +325,14 @@ export default {
       }
     },
     changePath({ key }) {
-      this.$router.push({ path: `/home/${key}` });
-      this.commonUpdate({
-        current: [key],
-      });
+      const path = `/home/${key}`;
+      // 避免重复点击导致跳转相同路由而爆红
+      if (this.$router.history.current.fullPath != path) {
+        this.$router.push({ path });
+        this.commonUpdate({
+          current: [key],
+        });
+      }
     },
     closeTag(v) {
       this.commonUpdate({
@@ -396,6 +406,11 @@ export default {
         ipcRenderer.send("window-move");
       }
     },
+    changeHideOnBlur(e) {
+      let cfg = { ...this.config };
+      cfg.perf.common.hideOnBlur = !cfg.perf.common.hideOnBlur;
+      this.config = cfg;
+    },
   },
   computed: {
     ...mapState("main", [
@@ -410,7 +425,7 @@ export default {
       "pluginLoading",
     ]),
     showOptions() {
-      // 有选项值，且不在显示主页
+      // 有选项值，且不在显示主页。（即出现下方选项框）
       if (this.options.length && !this.showMain) {
         return true;
       }
@@ -419,6 +434,17 @@ export default {
       return this.pluginInfo.searchType ? "subWindow" : "";
     },
   },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        opConfig.set("perf", this.config.perf);
+        opConfig.set("superPanel", this.config.superPanel);
+        opConfig.set("global", this.config.global);
+        ipcRenderer.send("re-register");
+      },
+    },
+  },
 };
 </script>
 <style lang="less">
@@ -538,4 +564,9 @@ export default {
     left: 0;
   }
 }
+.button-hide-on-blur {
+  padding: 0px 3px 0px 0px;
+  // 小按钮只会在碰到1/3处时被认为点击。
+  height: 33%;
+}
 </style>

src/renderer/pages/search/subpages/settings.vue

 <template>
   <div class="pg-settings">
     <div class="dev-detail">
-      <a-menu v-model="currentSelect" style="width: 256px; height: 100%" mode="vertical">
+      <a-menu
+        v-model="currentSelect"
+        style="width: 256px; height: 100%"
+        mode="vertical"
+      >
         <a-menu-item :key="0">
           偏好设置
         </a-menu-item>
@@ -15,40 +19,72 @@
       <div class="settings-detail">
         <div v-if="currentSelect[0] === 0">
           <div class="setting-item">
-            <div class="title">快捷键(需要使用 option/ctrl/shift/command 键修饰)</div>
+            <div class="title">
+              快捷键(需要使用 option/ctrl/shift/command 键修饰)
+            </div>
             <div class="settings-item-li">
               <div class="label">显示/隐藏快捷键</div>
-              <div class="value" tabIndex=-1 @keyup="(e) => changeShortCut(e, 'showAndHidden')">{{ config.perf.shortCut.showAndHidden }}</div>
+              <div
+                class="value"
+                tabIndex="-1"
+                @keyup="(e) => changeShortCut(e, 'showAndHidden')"
+              >
+                {{ config.perf.shortCut.showAndHidden }}
+              </div>
             </div>
             <div class="settings-item-li">
               <div class="label">插件分离快捷键</div>
-              <div class="value" tabIndex=-1 @keyup="(e) => changeShortCut(e, 'separate')">{{ config.perf.shortCut.separate }}</div>
+              <div
+                class="value"
+                tabIndex="-1"
+                @keyup="(e) => changeShortCut(e, 'separate')"
+              >
+                {{ config.perf.shortCut.separate }}
+              </div>
             </div>
             <div class="settings-item-li">
               <div class="label">返回主界面</div>
-              <div class="value" tabIndex=-1 @keyup="(e) => changeShortCut(e, 'quit')">{{ config.perf.shortCut.quit }}</div>
+              <div
+                class="value"
+                tabIndex="-1"
+                @keyup="(e) => changeShortCut(e, 'quit')"
+              >
+                {{ config.perf.shortCut.quit }}
+              </div>
             </div>
           </div>
           <div class="setting-item">
             <div class="title">通用</div>
             <div class="settings-item-li">
               <div class="label">开机启动</div>
-              <a-switch v-model:checked="config.perf.common.start" checked-children="开" un-checked-children="关"></a-switch>
+              <a-switch
+                v-model:checked="config.perf.common.start"
+                checked-children="开"
+                un-checked-children="关"
+              ></a-switch>
             </div>
             <div class="settings-item-li">
               <div class="label">空格执行</div>
-              <a-switch v-model:checked="config.perf.common.space" checked-children="开" un-checked-children="关"></a-switch>
+              <a-switch
+                v-model:checked="config.perf.common.space"
+                checked-children="开"
+                un-checked-children="关"
+              ></a-switch>
             </div>
           </div>
           <div class="setting-item">
             <div class="title">本地搜索启动</div>
             <div class="settings-item-li">
               <div class="label">搜索启动应用&文件</div>
-              <a-switch v-model:checked="config.perf.local.search" checked-children="开" un-checked-children="关"></a-switch>
+              <a-switch
+                v-model:checked="config.perf.local.search"
+                checked-children="开"
+                un-checked-children="关"
+              ></a-switch>
             </div>
           </div>
         </div>
-        <div  v-if="currentSelect[0] === 1">
+        <div v-if="currentSelect[0] === 1">
           <div class="setting-item">
             <div class="title">弹出面板</div>
             <a-select value="mouseRight" style="width: 200px" disabled>
@@ -57,20 +93,25 @@
           </div>
           <div class="setting-item">
             <div class="title">长按以下设置的毫秒响应</div>
-            <a-slider :step="100" v-model:value="config.superPanel.mouseDownTime" :min="200" :max="1000" />
+            <a-slider
+              :step="100"
+              v-model:value="config.superPanel.mouseDownTime"
+              :min="200"
+              :max="1000"
+            />
           </div>
         </div>
         <div v-if="currentSelect[0] === 2">
           <a-collapse>
             <a-collapse-panel key="1" header="说明及示例">
-              <div>按下快捷键，自动搜索对应关键字，当关键字结果完全匹配，且结果唯一时，会直接指向该功能。</div>
+              <div>
+                按下快捷键，自动搜索对应关键字，当关键字结果完全匹配，且结果唯一时，会直接指向该功能。
+              </div>
               <h3 style="margin-top: 10px;">示例</h3>
               <a-divider style="margin: 5px 0;" />
               <a-list item-layout="horizontal" :data-source="examples">
                 <a-list-item slot="renderItem" slot-scope="item, index">
-                  <a-list-item-meta
-                      :description="item.desc"
-                  >
+                  <a-list-item-meta :description="item.desc">
                     <div slot="title">{{ item.title }}</div>
                   </a-list-item-meta>
                 </a-list-item>
@@ -82,80 +123,81 @@
               <div>快捷键</div>
               <a-tooltip placement="top" trigger="click">
                 <template slot="title">
-                  <span>先按功能键（Ctrl、Shift、Alt、Option、Command），再按其他普通键。或按 F1-F12 单键</span>
+                  <span
+                    >先按功能键（Ctrl、Shift、Alt、Option、Command），再按其他普通键。或按
+                    F1-F12 单键</span
+                  >
                 </template>
                 <div
-                    v-for="(item, index) in config.global"
-                    class="value"
-                    tabIndex=-1
-                    @keyup="(e) => changeGlobalKey(e, index)"
+                  v-for="(item, index) in config.global"
+                  class="value"
+                  tabIndex="-1"
+                  @keyup="(e) => changeGlobalKey(e, index)"
                 >
                   {{ item.key }}
                 </div>
               </a-tooltip>
-
             </div>
             <div class="short-cut item">
               <div>功能关键字</div>
               <a-input
-                  :value="item.value"
-                  v-for="(item, index) in config.global"
-                  class="value"
-                  :disabled="!item.key"
-                  @change="(e) => changeGlobalValue(index, e.target.value)"
+                :value="item.value"
+                v-for="(item, index) in config.global"
+                class="value"
+                :disabled="!item.key"
+                @change="(e) => changeGlobalValue(index, e.target.value)"
               />
             </div>
           </div>
-          <div @click="addConfig" class="add-global"> +  新增全局快捷功能</div>
+          <div @click="addConfig" class="add-global">+ 新增全局快捷功能</div>
         </div>
       </div>
     </div>
   </div>
-
 </template>
 
 <script>
-import keycodes from '../../../assets/keycode';
-import {ipcRenderer, remote} from 'electron';
+import keycodes from "../../../assets/keycode";
+import { ipcRenderer, remote } from "electron";
 
-const opConfig = remote.getGlobal('opConfig');
+const opConfig = remote.getGlobal("opConfig");
 
 export default {
   data() {
     return {
       currentSelect: [0],
-      config: JSON.parse(JSON.stringify(opConfig.get())),
+      config: { ...opConfig.get() },
       examples: [
         {
-          title: '快捷键 「 Alt + W」 关键字 「 微信」',
-          desc: '按下Alt + W 直接打开本地微信应用'
+          title: "快捷键 「 Alt + W」 关键字 「 微信」",
+          desc: "按下Alt + W 直接打开本地微信应用",
         },
         {
-          title: '快捷键 「 Alt + Q」 关键字 「 取色」',
-          desc: '按下Alt + Q 直接打开屏幕取色功能'
-        }
-      ]
-    }
+          title: "快捷键 「 Alt + Q」 关键字 「 取色」",
+          desc: "按下Alt + Q 直接打开屏幕取色功能",
+        },
+      ],
+    };
   },
   methods: {
     changeShortCut(e, key) {
       let change = false;
-      if(e.altKey && e.keyCode !== 18){
+      if (e.altKey && e.keyCode !== 18) {
         const compose = `Option+${keycodes[e.keyCode].toUpperCase()}`;
         this.config.perf.shortCut[key] = compose;
         change = true;
       }
-      if(e.ctrlKey && e.keyCode !== 17){
+      if (e.ctrlKey && e.keyCode !== 17) {
         const compose = `Ctrl+${keycodes[e.keyCode].toUpperCase()}`;
         this.config.perf.shortCut[key] = compose;
         change = true;
       }
-      if(e.shiftKey && e.keyCode !== 16){
+      if (e.shiftKey && e.keyCode !== 16) {
         const compose = `Shift+${keycodes[e.keyCode].toUpperCase()}`;
         this.config.perf.shortCut[key] = compose;
         change = true;
       }
-      if(e.metaKey && e.keyCode !== 93){
+      if (e.metaKey && e.keyCode !== 93) {
         const compose = `Command+${keycodes[e.keyCode].toUpperCase()}`;
         this.config.perf.shortCut[key] = compose;
         change = true;
@@ -163,131 +205,129 @@ export default {
     },
     addConfig() {
       this.config.global.push({
-        key: '',
-        value: ''
+        key: "",
+        value: "",
       });
     },
-
     changeGlobalKey(e, index) {
       let compose;
-      if(e.altKey && e.keyCode !== 18){
+      if (e.altKey && e.keyCode !== 18) {
         compose = `Alt+${keycodes[e.keyCode].toUpperCase()}`;
       }
-      if(e.ctrlKey && e.keyCode !== 17){
+      if (e.ctrlKey && e.keyCode !== 17) {
         compose = `Ctrl+${keycodes[e.keyCode].toUpperCase()}`;
       }
-      if(e.shiftKey && e.keyCode !== 16){
+      if (e.shiftKey && e.keyCode !== 16) {
         compose = `Shift+${keycodes[e.keyCode].toUpperCase()}`;
       }
-      if(e.metaKey && e.keyCode !== 93){
+      if (e.metaKey && e.keyCode !== 93) {
         compose = `Command+${keycodes[e.keyCode].toUpperCase()}`;
       }
       if (compose) {
-        this.$set(this.config.global[index], 'key', compose);
+        this.$set(this.config.global[index], "key", compose);
       }
       // f1 - f12
       if (e.keyCode >= 112 && e.keyCode <= 123) {
         compose = keycodes[e.keyCode].toUpperCase();
       }
       if (compose) {
-        this.$set(this.config.global[index], 'key', compose);
+        this.$set(this.config.global[index], "key", compose);
       }
     },
     changeGlobalValue(index, value) {
-      this.$set(this.config.global[index], 'value', value);
-    }
+      this.$set(this.config.global[index], "value", value);
+    },
   },
   watch: {
     config: {
       deep: true,
       handler() {
-        opConfig.set('perf', this.config.perf);
-        opConfig.set('superPanel', this.config.superPanel);
-        opConfig.set('global', this.config.global);
-        ipcRenderer.send('re-register');
-      }
-    }
-  }
-}
+        opConfig.set("perf", this.config.perf);
+        opConfig.set("superPanel", this.config.superPanel);
+        opConfig.set("global", this.config.global);
+        ipcRenderer.send("re-register");
+      },
+    },
+  },
+};
 </script>
 
 <style lang="less">
-  .pg-settings {
-    height: calc(~'100vh - 110px');
+.pg-settings {
+  height: calc(~"100vh - 110px");
+  overflow: auto;
+  .dev-detail {
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+    background: #fff;
+  }
+  .settings-detail {
+    padding: 20px;
+    box-sizing: border-box;
+    flex: 1;
     overflow: auto;
-    .dev-detail {
-      height: 100%;
-      display: flex;
-      align-items: flex-start;
-      background: #fff;
-    }
-    .settings-detail {
-      padding: 20px;
-      box-sizing: border-box;
-      flex: 1;
-      overflow: auto;
-      height: 100%;
-      .setting-item {
-        margin-bottom: 20px;
-        .ant-form-item {
-          margin-bottom: 0;
-        }
-        .title {
-          color: #6C9FE2;
-          font-size: 15px;
-          margin-bottom: 10px;
+    height: 100%;
+    .setting-item {
+      margin-bottom: 20px;
+      .ant-form-item {
+        margin-bottom: 0;
+      }
+      .title {
+        color: #6c9fe2;
+        font-size: 15px;
+        margin-bottom: 10px;
+      }
+      .settings-item-li {
+        padding-left: 20px;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        .label {
+          color: #646464;
         }
-        .settings-item-li {
-          padding-left: 20px;
-          display: flex;
-          width: 100%;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 10px;
-          .label {
-            color: #646464;
-          }
-          .value {
-            width: 300px;
-            text-align: center;
-            border: 1px solid #ddd;
-            color: #6C9FE2;
-            font-size: 14px;
-            height: 24px;
-            font-weight: lighter;
-          }
+        .value {
+          width: 300px;
+          text-align: center;
+          border: 1px solid #ddd;
+          color: #6c9fe2;
+          font-size: 14px;
+          height: 24px;
+          font-weight: lighter;
         }
       }
     }
-    .feature-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 10px;
-      font-size: 14px;
-      .item {
-        flex: 1;
-
-      }
-      .short-cut {
-        margin-left: 20px;
-      }
-      .value {
-        text-align: center;
-        border: 1px solid #ddd;
-        color: #6C9FE2;
-        font-size: 14px;
-        height: 24px;
-        font-weight: lighter;
-        margin-top: 10px;
-      }
+  }
+  .feature-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    font-size: 14px;
+    .item {
+      flex: 1;
     }
-    .add-global {
-      color: #6C9FE2;
-      margin-top: 20px;
-      width: 100%;
+    .short-cut {
+      margin-left: 20px;
+    }
+    .value {
       text-align: center;
-      cursor: pointer;
+      border: 1px solid #ddd;
+      color: #6c9fe2;
+      font-size: 14px;
+      height: 24px;
+      font-weight: lighter;
+      margin-top: 10px;
     }
   }
+  .add-global {
+    color: #6c9fe2;
+    margin-top: 20px;
+    width: 100%;
+    text-align: center;
+    cursor: pointer;
+  }
+}
 </style>