bug(setting): fix size and pos error

package.json

@@ -10,9 +10,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@tauri-apps/api": ">=2.0.0-beta.0",
-    "@tauri-apps/plugin-os": "2.0.0-beta.2",
-    "@tauri-apps/plugin-shell": ">=2.0.0-beta.0",
+    "@tauri-apps/api": ">=2.0.0-beta.8",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
     "vue-router": "4"

src-tauri/Cargo.toml

@@ -11,8 +11,7 @@ edition = "2021"
 tauri-build = { version = "2.0.0-beta", features = [] }
 
 [dependencies]
-tauri = { version = "2.0.0-beta", features = ["macos-private-api"] }
-tauri-plugin-os = "2.0.0-beta"
+tauri = { version = "2.0.0-beta.15", features = ["macos-private-api"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 anyhow = "1.0"

src-tauri/capabilities/default.json

@@ -13,8 +13,6 @@
     "window:allow-close",
     "window:allow-is-maximizable",
     "window:allow-start-dragging",
-    "window:allow-unmaximize",
-    "os:default",
-    "os:allow-platform"
+    "window:allow-unmaximize"
   ]
 }

src-tauri/src/main.rs

@@ -112,6 +112,14 @@ fn start_scrcpy_server(
 async fn main() {
     tauri::Builder::default()
         .setup(|app| {
+            // let main_window = app.get_webview_window("main").unwrap();
+            // main_window
+            //     .set_size(tauri::Size::Logical(tauri::LogicalSize {
+            //         width: 1350.,
+            //         height: 750.,
+            //     }))
+            //     .unwrap();
+
             // check resource files
             ResHelper::res_init(
                 &app.path()
@@ -120,44 +128,8 @@ async fn main() {
                     .join("resource"),
             )
             .unwrap();
-
-            let main_window = app.get_webview_window("main").unwrap();
-
-            #[cfg(windows)]
-            {
-                let scale_factor = main_window.scale_factor().unwrap();
-                main_window
-                    .set_size(tauri::Size::Physical(tauri::PhysicalSize {
-                        width: 1350,
-                        height: 750,
-                    }))
-                    .unwrap();
-
-                main_window
-                    .with_webview(move |webview| {
-                        unsafe {
-                            // see https://docs.rs/webview2-com/0.19.1/webview2_com/Microsoft/Web/WebView2/Win32/struct.ICoreWebView2Controller.html
-                            webview
-                                .controller()
-                                .SetZoomFactor(1.0 / scale_factor)
-                                .unwrap();
-                        }
-                    })
-                    .unwrap();
-            }
-            #[cfg(target_os = "macos")]
-            {
-                main_window
-                    .set_size(tauri::Size::Logical(tauri::LogicalSize {
-                        width: 1350.,
-                        height: 750.,
-                    }))
-                    .unwrap();
-            }
-
             Ok(())
         })
-        .plugin(tauri_plugin_os::init())
         .invoke_handler(tauri::generate_handler![
             adb_devices,
             forward_server_port,

src/App.vue

@@ -29,7 +29,6 @@ import {
 .container {
   background-color: transparent;
   height: 100%;
-  overflow: auto;
   display: grid;
   grid-template-columns: 70px 1fr;
   grid-template-rows: 30px 1fr;

src/components/Device.vue

@@ -28,6 +28,7 @@ import {
   NFormItem,
   NIcon,
   NSpin,
+  NScrollbar,
   DataTableColumns,
   DropdownOption,
   useDialog,
@@ -213,6 +214,7 @@ async function refreshDevices() {
 </script>
 
 <template>
+  <NScrollbar>
     <div class="device">
       <NSpin :show="store.showLoadingRef">
         <NH4 prefix="bar">本地端口</NH4>
@@ -223,7 +225,7 @@ async function refreshDevices() {
           :max="49151"
           style="max-width: 300px"
         />
-      <NH4 prefix="bar">屏幕尺寸</NH4>
+        <NH4 prefix="bar">设备尺寸</NH4>
         <NFlex justify="left" align="center">
           <NFormItem label="宽度">
             <NInputNumber
@@ -312,17 +314,14 @@ async function refreshDevices() {
         />
       </NSpin>
     </div>
+  </NScrollbar>
 </template>
 
 <style scoped lang="scss">
 .device {
   color: var(--light-color);
   background-color: var(--bg-color);
-  padding: 0 25px;
-}
-
-.n-h4 {
-  margin-top: 20px;
+  padding: 0 20px;
 }
 
 .controled-device-list {

src/components/setting/Mask.vue

@@ -12,14 +12,14 @@ import {
   NIcon,
   FormInst,
   useMessage,
-  NP,
 } from "naive-ui";
 import {
+  LogicalPosition,
+  LogicalSize,
   PhysicalPosition,
   PhysicalSize,
   getCurrent,
 } from "@tauri-apps/api/window";
-import { platform } from "@tauri-apps/plugin-os";
 import { SettingsOutline } from "@vicons/ionicons5";
 import { UnlistenFn } from "@tauri-apps/api/event";
 
@@ -27,34 +27,25 @@ let unlistenResize: UnlistenFn = () => {};
 let unlistenMove: UnlistenFn = () => {};
 
 let factor = 1;
-let platformName = "";
 
 // macos: use logical position and size to refresh the area model
 // others: use pyhsical position and size to refresh the area model
 async function refreshAreaModel(size?: PhysicalSize, pos?: PhysicalPosition) {
+  const lSize = size?.toLogical(factor);
+  const lPos = pos?.toLogical(factor);
+
   // header size and sidebar size
   const mt = 30;
   const ml = 70;
 
-  if (platformName === "macos") {
   // use logical position and size
-    if (size !== undefined) {
-      areaModel.value.sizeW = Math.floor((size.width - ml) / factor);
-      areaModel.value.sizeH = Math.floor((size.height - mt) / factor);
-    }
-    if (pos !== undefined) {
-      areaModel.value.posX = Math.floor((pos.x + ml) / factor);
-      areaModel.value.posY = Math.floor((pos.y + mt) / factor);
-    }
-  } else {
-    if (size !== undefined) {
-      areaModel.value.sizeW = Math.floor(size.width - ml);
-      areaModel.value.sizeH = Math.floor(size.height - mt);
-    }
-    if (pos !== undefined) {
-      areaModel.value.posX = Math.floor(pos.x + ml);
-      areaModel.value.posY = Math.floor(pos.y + mt);
+  if (lSize !== undefined) {
+    areaModel.value.sizeW = lSize.width - ml;
+    areaModel.value.sizeH = lSize.height - mt;
   }
+  if (lPos !== undefined) {
+    areaModel.value.posX = lPos.x + ml;
+    areaModel.value.posY = lPos.y + mt;
   }
 }
 
@@ -110,7 +101,6 @@ function handleAdjustClick(e: MouseEvent) {
   });
 }
 
-// TODO 等待官方合并修复分支后检查表现是否正常
 // move and resize window to the selected window (control) area
 async function adjustMaskArea() {
   // header size and sidebar size
@@ -119,30 +109,23 @@ async function adjustMaskArea() {
 
   const appWindow = getCurrent();
 
-  const pos = new PhysicalPosition(
+  const pos = new LogicalPosition(
     areaModel.value.posX - ml,
     areaModel.value.posY - mt
   );
 
-  const size = new PhysicalSize(
+  const size = new LogicalSize(
     areaModel.value.sizeW + ml,
     areaModel.value.sizeH + mt
   );
 
-  if (platformName === "macos") {
-    // use logical position and size
-    await appWindow.setPosition(pos.toLogical(factor));
-    await appWindow.setSize(size.toLogical(factor));
-  } else {
   await appWindow.setPosition(pos);
   await appWindow.setSize(size);
-  }
 }
 
 onMounted(async () => {
   const appWindow = getCurrent();
   factor = await appWindow.scaleFactor();
-  platformName = await platform();
 
   unlistenResize = await appWindow.onResized(({ payload: size }) => {
     refreshAreaModel(size, undefined);
@@ -165,7 +148,7 @@ onUnmounted(() => {
 <template>
   <div class="setting-page">
     <NFlex justify="space-between" align="center">
-      <NH4 prefix="bar">手动调整</NH4>
+      <NH4 prefix="bar">蒙版调整</NH4>
       <NButton
         tertiary
         circle
@@ -213,7 +196,6 @@ onUnmounted(() => {
           />
         </NFormItemGi>
       </NGrid>
-      <NP>提示：使用物理坐标、尺寸</NP>
     </NForm>
   </div>
 </template>

src/components/setting/Setting.vue

@@ -31,7 +31,8 @@ import { NTabs, NTabPane, NScrollbar } from "naive-ui";
 .setting {
   background-color: var(--content-bg-color);
   color: var(--light-color);
-  overflow: hidden;
+  height: 100%;
+  overflow-y: auto;
   display: flex;
 
   .NTabPane {