bugfix: 修复无边框拖拽问题

src/main/common/listener.js

@@ -106,6 +106,7 @@ class Listener {
     this.reRegisterShortCut(mainWindow);
     this.changeSize(mainWindow);
     this.msgTrigger(mainWindow);
+    this.windowMoveInit(mainWindow);
   }
 
   colorPicker() {
@@ -118,6 +119,7 @@ class Listener {
 
       picker.getWindow().on('close', () => {
         ioHook.stop();
+        ioHook.removeAllListeners();
         !this.isWin && ioHook.unload();
       });
 
@@ -147,29 +149,30 @@ class Listener {
       ipcMain.on("closePicker", () => {
         this.closePicker();
       });
-    });
-    ioHook.on('mousemove', e => {
-      let {x, y} = this.getPos(e);
-      if (!picker.getWindow()) return;
-      picker.getWindow().setPosition(parseInt(x) + 10, parseInt(y) + 10);
-      this.fn(e, picker);
-    })
 
-    ioHook.on('mouseup', e => {
-      if (e.button === 1) {
-        let x = e.x
-        let y = e.y
-        const color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
-        clipboard.writeText("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
-        new Notification({ title: 'Rubick 通知', body: `${color} 已保存到剪切板` }).show();
-        this.closePicker();
-      }
-    });
+      ioHook.on('mousemove', e => {
+        let {x, y} = this.getPos(e);
+        if (!picker.getWindow()) return;
+        picker.getWindow().setPosition(parseInt(x) + 10, parseInt(y) + 10);
+        this.fn(e, picker);
+      })
 
-    ioHook.on('mouseup', e => {
-      if (e.button === 3) {
-        this.closePicker()
-      }
+      ioHook.on('mouseup', e => {
+        if (e.button === 1) {
+          let x = e.x
+          let y = e.y
+          const color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
+          clipboard.writeText("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
+          new Notification({ title: 'Rubick 通知', body: `${color} 已保存到剪切板` }).show();
+          this.closePicker();
+        }
+      });
+
+      ioHook.on('mouseup', e => {
+        if (e.button === 3) {
+          this.closePicker()
+        }
+      });
     });
   }
 
@@ -288,6 +291,36 @@ class Listener {
       // todo win
     });
   }
+
+  windowMoveInit(win) {
+    let hasInit = false;
+    ipcMain.on('window-move', () => {
+      if (!hasInit) {
+        hasInit = true;
+        ioHook.start(false);
+        !this.isWin && ioHook.load();
+
+        const winPosition = win.getPosition();
+        const winStartPosition = { x: winPosition[0], y: winPosition[1] };
+        const mouseStartPosition = screen.getCursorScreenPoint();
+
+        ioHook.on('mousedrag', e => {
+          const cursorPosition = screen.getCursorScreenPoint();
+          const dx = winStartPosition.x + cursorPosition.x - mouseStartPosition.x;
+          const dy = winStartPosition.y + cursorPosition.y - mouseStartPosition.y;
+          let {x, y} = this.getPos({x: dx, y: dy});
+          win.setPosition(parseInt(x), parseInt(y));
+        });
+
+        ioHook.on('mouseup', e => {
+          hasInit = false;
+          ioHook.stop();
+          ioHook.removeAllListeners();
+          !this.isWin && ioHook.unload();
+        });
+      }
+    });
+  }
 }
 
 export default Listener;

src/renderer/App.vue

@@ -1,109 +1,111 @@
 <template>
-  <a-layout id="components-layout">
-    <div v-if="!searchType" class="rubick-select">
-      <div class="tag-container" v-if="selected">
-        <a-tag
-          :key="selected.key"
-          @close="closeTag"
-          class="select-tag"
-          color="green"
-          closable
-        >
-          {{ selected.name }}
-        </a-tag>
-      </div>
-      <a-input
-        id="search"
-        :placeholder="
+  <div @mousedown="drag" >
+    <a-layout  id="components-layout">
+      <div v-if="!searchType" class="rubick-select">
+        <div class="tag-container" v-if="selected">
+          <a-tag
+            :key="selected.key"
+            @close="closeTag"
+            class="select-tag"
+            color="green"
+            closable
+          >
+            {{ selected.name }}
+          </a-tag>
+        </div>
+        <a-input
+          id="search"
+          :placeholder="
           subPlaceHolder && selected && selected.key === 'plugin-container'
             ? subPlaceHolder
             : 'Hi, Rubick'
         "
-        class="main-input"
-        @change="(e) => search({ value: e.target.value })"
-        :value="searchValue"
-        :maxLength="selected && selected.key !== 'plugin-container' ? 0 : 1000"
-        @keydown.down="(e) => changeCurrent(1)"
-        @keydown.up="() => changeCurrent(-1)"
-        @keypress.enter="
+          class="main-input"
+          @change="(e) => search({ value: e.target.value })"
+          :value="searchValue"
+          :maxLength="selected && selected.key !== 'plugin-container' ? 0 : 1000"
+          @keydown.down="(e) => changeCurrent(1)"
+          @keydown.up="() => changeCurrent(-1)"
+          @keypress.enter="
           (e) => targetSearch({ value: e.target.value, type: 'enter' })
         "
-        @keypress.space="
+          @keypress.space="
           (e) => targetSearch({ value: e.target.value, type: 'space' })
         "
-      >
-        <div @click="goMenu" class="suffix-tool" slot="suffix">
-          <a-icon
-            v-show="selected && selected.key === 'plugin-container'"
-            class="icon-more"
-            type="more"
-          />
-          <img
-            class="icon-tool"
-            v-if="selected && selected.icon"
-            :src="selected.icon"
-          />
-          <div v-else class="rubick-logo">
-            <img src="./assets/imgs/logo.png" />
+        >
+          <div @click="goMenu" class="suffix-tool" slot="suffix">
+            <a-icon
+              v-show="selected && selected.key === 'plugin-container'"
+              class="icon-more"
+              type="more"
+            />
+            <img
+              class="icon-tool"
+              v-if="selected && selected.icon"
+              :src="selected.icon"
+            />
+            <div v-else class="rubick-logo">
+              <img src="./assets/imgs/logo.png" />
+            </div>
           </div>
+        </a-input>
+        <div class="options" v-show="showOptions">
+          <a-list item-layout="horizontal" :data-source="options">
+            <a-list-item
+              @click="() => item.click($router)"
+              :class="currentSelect === index ? 'active op-item' : 'op-item'"
+              slot="renderItem"
+              slot-scope="item, index"
+            >
+              <a-list-item-meta :description="item.desc">
+                <span slot="title" v-html="renderTitle(item.name)"></span>
+                <a-avatar
+                  slot="avatar"
+                  style="border-radius: 0"
+                  :src="item.icon"
+                />
+              </a-list-item-meta>
+              <a-tag v-show="item.type === 'dev'">开发者</a-tag>
+              <a-tag v-show="item.type === 'system'">系统</a-tag>
+            </a-list-item>
+          </a-list>
         </div>
-      </a-input>
-      <div class="options" v-show="showOptions">
-        <a-list item-layout="horizontal" :data-source="options">
-          <a-list-item
-            @click="() => item.click($router)"
-            :class="currentSelect === index ? 'active op-item' : 'op-item'"
-            slot="renderItem"
-            slot-scope="item, index"
-          >
-            <a-list-item-meta :description="item.desc">
-              <span slot="title" v-html="renderTitle(item.name)"></span>
-              <a-avatar
-                slot="avatar"
-                style="border-radius: 0"
-                :src="item.icon"
-              />
-            </a-list-item-meta>
-            <a-tag v-show="item.type === 'dev'">开发者</a-tag>
-            <a-tag v-show="item.type === 'system'">系统</a-tag>
-          </a-list-item>
-        </a-list>
       </div>
-    </div>
-    <div class="rubick-select-subMenu" v-else>
-      <div>
-        <img
-          class="icon-tool-sub"
-          v-if="pluginInfo.icon"
-          :src="pluginInfo.icon"
-        />
-        <a-input
-          :placeholder="subPlaceHolder"
-          class="sub-input"
-          @change="
+      <div class="rubick-select-subMenu" v-else>
+        <div>
+          <img
+            class="icon-tool-sub"
+            v-if="pluginInfo.icon"
+            :src="pluginInfo.icon"
+          />
+          <a-input
+            :placeholder="subPlaceHolder"
+            class="sub-input"
+            @change="
             (e) =>
               search({
                 value: e.target.value,
                 searchType: pluginInfo.searchType,
               })
           "
-          :value="searchValue"
-          @keypress.enter="
+            :value="searchValue"
+            @keypress.enter="
             (e) => targetSearch({ value: e.target.value, type: 'enter' })
           "
-          @keypress.space="
+            @keypress.space="
             (e) => targetSearch({ value: e.target.value, type: 'space' })
           "
-        ></a-input>
-      </div>
+          ></a-input>
+        </div>
 
-      <div class="icon-container">
-        <a-icon class="icon" type="info-circle" />
-        <a-icon class="icon" @click="goMenu('separate')" type="setting" />
+        <div class="icon-container">
+          <a-icon class="icon" type="info-circle" />
+          <a-icon class="icon" @click="goMenu('separate')" type="setting" />
+        </div>
       </div>
-    </div>
-    <router-view></router-view>
-  </a-layout>
+      <router-view></router-view>
+    </a-layout>
+  </div>
 </template>
 <script>
 import { mapActions, mapMutations, mapState } from "vuex";
@@ -309,6 +311,9 @@ export default {
       this.showMainUI();
       this.changePath({ key: "market" });
     },
+    drag() {
+      ipcRenderer.send('window-move');
+    }
   },
   computed: {
     ...mapState("main", [
@@ -345,13 +350,9 @@ export default {
   ::-webkit-scrollbar {
     width: 0;
   }
-  .main-input {
-      -webkit-app-region: no-drag;
-  }
 }
 .rubick-select,
 .rubick-select-subMenu {
-  -webkit-app-region: drag;
   display: flex;
   padding-left: 10px;
   background: #fff;