bug(Mask): fix migration error

src-tauri/Cargo.toml

@@ -2,7 +2,7 @@
 name = "scrcpy-mask"
 version = "0.0.0"
 description = "A Tauri App"
-authors = ["you"]
+authors = ["AkiChase"]
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

src-tauri/src/socket.rs

@@ -173,7 +173,6 @@ async fn recv_front_msg(
                             &mut write_half,
                         )
                         .await;
-                        println!("控制信息发送完成！");
                         continue;
                     } else {
                         // 处理Scrcpy Mask命令

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "productName": "scrcpy-mask",
   "version": "0.0.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "com.akichase.mask",
   "build": {
     "beforeDevCommand": "pnpm dev",
     "devUrl": "http://localhost:1420",

src/components/Device.vue

@@ -15,6 +15,7 @@ import {
   pushServerFile,
   forwardServerPort,
   startScrcpyServer,
+  getScreenSize,
 } from "../invoke";
 import {
   NH4,
@@ -43,9 +44,7 @@ const store = useGlobalStore();
 const port = ref(27183);
 
 //#region listener
-const deviceWaitForMetadataTask: ((
-  deviceName: string
-) => void)[] = [];
+const deviceWaitForMetadataTask: ((deviceName: string) => void)[] = [];
 
 let unlisten: UnlistenFn | undefined;
 onMounted(async () => {
@@ -175,6 +174,8 @@ async function onMenuSelect(key: string) {
         "00000000" + Math.floor(Math.random() * 100000).toString(16)
       ).slice(-8);
 
+      let screenSize = await getScreenSize(device.id);
+
       await pushServerFile(device.id);
       await forwardServerPort(device.id, scid, port.value);
       await startScrcpyServer(device.id, scid, `127.0.0.1:${port.value}`);
@@ -185,7 +186,8 @@ async function onMenuSelect(key: string) {
           scid,
           deviceName,
           device,
-        }
+          screenSize,
+        };
         nextTick(() => {
           store.hideLoading();
         });
@@ -200,6 +202,13 @@ async function refreshDevices() {
   devices.value = await adbDevices();
   store.hideLoading();
 }
+
+const screenSizeInfo = computed(() => {
+  if (store.controledDevice) {
+    return `${store.controledDevice.screenSize[0]} x ${store.controledDevice.screenSize[1]}`;
+  }
+  return "";
+});
 </script>
 
 <template>
@@ -221,7 +230,11 @@ async function refreshDevices() {
           v-if="!store.controledDevice"
         />
         <div class="controled-device" v-if="store.controledDevice">
-          <div>{{ store.controledDevice.deviceName }} ({{ store.controledDevice.device.id }})</div>
+          <div>
+            {{ store.controledDevice.deviceName }} ({{
+              store.controledDevice.device.id
+            }})
+          </div>
           <div class="device-op">
             <NTooltip trigger="hover">
               <template #trigger>
@@ -231,16 +244,11 @@ async function refreshDevices() {
                   </template>
                 </NButton>
               </template>
-              scid: {{ store.controledDevice.scid }}
-              <br />status: {{ store.controledDevice.device.status }}
+              scid: {{ store.controledDevice.scid }} <br />status:
+              {{ store.controledDevice.device.status }} <br />screen:
+              {{ screenSizeInfo }}
             </NTooltip>
-
-            <NButton
-              quaternary
-              circle
-              type="error"
-              @click="shutdownSC()"
-            >
+            <NButton quaternary circle type="error" @click="shutdownSC()">
               <template #icon>
                 <NIcon><CloseCircle /></NIcon>
               </template>

src/components/Header.vue

@@ -15,7 +15,7 @@ async function maximizeOrRestore() {
 <template>
   <div data-tauri-drag-region class="header">
     <NButtonGroup>
-      <NButton quaternary :focusable="false" @click="appWindow.minimize()">
+      <NButton quaternary :focusable="false" @click="getCurrent().minimize()">
         <template #icon>
           <NIcon><Subtract16Regular /></NIcon>
         </template>

src/components/Mask.vue

@@ -2,10 +2,12 @@
 import { onActivated, ref } from "vue";
 import { NDialog } from "naive-ui";
 import { useGlobalStore } from "../store/global";
-import { useRouter } from "vue-router";
-import { getCurrent } from "@tauri-apps/api/window";
-import { initShortcuts } from "../hotkey";
-import { getScreenSize } from "../invoke";
+import { onBeforeRouteLeave, useRouter } from "vue-router";
+import {
+  initShortcuts,
+  listenToKeyEvent,
+  unlistenToKeyEvent,
+} from "../hotkey";
 
 const maskRef = ref<HTMLElement | null>(null);
 
@@ -14,20 +16,26 @@ const router = useRouter();
 
 let isShortcutInited = false;
 
+onBeforeRouteLeave(() => {
+  if (isShortcutInited) {
+    if (maskRef.value) {
+      unlistenToKeyEvent();
+    }
+  }
+});
+
 onActivated(async () => {
   if (isShortcutInited) {
-    maskRef.value?.focus();
+    if (maskRef.value) {
+      listenToKeyEvent();
+    }
     return;
   }
   if (store.controledDevice) {
-    let screenSize = await getScreenSize(store.controledDevice.device.id);
     if (maskRef.value) {
-      const appWindow = getCurrent();
-      let posFactor = await appWindow.scaleFactor();
-      initShortcuts(maskRef.value, posFactor, screenSize);
+      initShortcuts(store.controledDevice.screenSize, maskRef.value);
+      listenToKeyEvent();
       isShortcutInited = true;
-      maskRef.value.focus();
-      console.log("热键已载入");
     }
   }
 });
@@ -36,7 +44,6 @@ function toStartServer() {
   router.replace({ name: "device" });
 }
 
-// TODO 监听快捷键
 // TODO 按键设置
 // TODO 渲染按钮
 </script>
@@ -56,7 +63,7 @@ function toStartServer() {
   </div>
   <div
     v-show="store.controledDevice"
-    tabindex="-1"
+    @contextmenu.prevent
     class="mask"
     ref="maskRef"
   ></div>
@@ -66,11 +73,7 @@ function toStartServer() {
 .mask {
   background-color: rgba(255, 255, 255, 0.2);
   overflow: hidden;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 5px var(--primary-color);
-  }
+  cursor: pointer;
 }
 .notice {
   background-color: rgba(255, 255, 255, 0.2);