feat(Device): store screen size

src/App.vue

@@ -14,11 +14,11 @@ import {
     <NMessageProvider>
       <Header />
       <NDialogProvider>
-          <RouterView v-slot="{ Component }">
-            <KeepAlive>
-              <component :is="Component" />
-            </KeepAlive>
-          </RouterView>
+        <RouterView v-slot="{ Component }">
+          <KeepAlive>
+            <component :is="Component" />
+          </KeepAlive>
+        </RouterView>
       </NDialogProvider>
       <Sidebar />
     </NMessageProvider>
@@ -36,4 +36,8 @@ import {
     "sidebar header"
     "sidebar content";
 }
+
+.n-scrollbar-content {
+  height: 100%;
+}
 </style>

src/components/Device.vue

@@ -18,6 +18,7 @@ import {
 } from "../invoke";
 import {
   NH4,
+  NP,
   NInputNumber,
   NButton,
   NDataTable,
@@ -37,6 +38,7 @@ import {
 import { CloseCircle, InformationCircle } from "@vicons/ionicons5";
 import { Refresh } from "@vicons/ionicons5";
 import { UnlistenFn, listen } from "@tauri-apps/api/event";
+import { Store } from "@tauri-apps/plugin-store";
 import { shutdown } from "../frontcommand/scrcpyMaskCmd";
 import { useGlobalStore } from "../store/global";
 
@@ -46,11 +48,20 @@ const message = useMessage();
 
 const port = ref(27183);
 
+const localStore = new Store("store.bin");
+
 //#region listener
 const deviceWaitForMetadataTask: ((deviceName: string) => void)[] = [];
 
 let unlisten: UnlistenFn | undefined;
 onMounted(async () => {
+  const screenSize: null | { sizeW: number; sizeH: number } =
+    await localStore.get("screenSize");
+  if (screenSize !== null) {
+    store.screenSizeW = screenSize.sizeW;
+    store.screenSizeH = screenSize.sizeH;
+  }
+
   unlisten = await listen("device-reply", (event) => {
     try {
       let payload = JSON.parse(event.payload as string);
@@ -180,6 +191,12 @@ async function onMenuSelect(key: string) {
         return;
       }
 
+      localStore.set("screenSize", {
+        sizeW: store.screenSizeW,
+        sizeH: store.screenSizeH,
+      });
+      message.info("屏幕尺寸已保存，正在启动控制服务");
+
       let device = devices.value[rowIndex];
 
       let scid = (
@@ -322,6 +339,7 @@ async function refreshDevices() {
   color: var(--light-color);
   background-color: var(--bg-color);
   padding: 0 20px;
+  height: 100%;
 }
 
 .controled-device-list {

src/components/setting/Mask.vue

@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import {
   NH4,
+  NP,
   NForm,
   NGrid,
   NFormItemGi,
@@ -206,6 +207,9 @@ onUnmounted(() => {
           />
         </NFormItemGi>
       </NGrid>
+      <NP
+        >提示：蒙版尺寸与设备尺寸将用于坐标转换，请保证尺寸的准确性</NP
+      >
     </NForm>
   </div>
 </template>

src/store/global.ts

@@ -17,8 +17,8 @@ export const useGlobalStore = defineStore("counter", () => {
     device: Device;
   }
 
-  const screenSizeW: Ref<number> = ref(1280);
-  const screenSizeH: Ref<number> = ref(720);
+  const screenSizeW: Ref<number> = ref(0);
+  const screenSizeH: Ref<number> = ref(0);
 
   const controledDevice: Ref<ControledDevice | null> = ref(null);