fix(All): compile-error

Update Tauri and related plugins

.gitignore

@@ -3,6 +3,4 @@ dist
 
 .vscode
 .DS_Store
-pnpm-lock.yaml
 scrcpy-mask.code-workspace
-src-tauri/Cargo.lock

package.json

@@ -11,15 +11,16 @@
     "publish": "node publish.js"
   },
   "dependencies": {
-    "@tauri-apps/api": ">=2.0.0-beta.8",
-    "@tauri-apps/plugin-clipboard-manager": "2.1.0-beta.1",
-    "@tauri-apps/plugin-http": "2.0.0-beta.3",
-    "@tauri-apps/plugin-process": "2.0.0-beta.2",
-    "@tauri-apps/plugin-shell": "2.0.0-beta.3",
-    "@tauri-apps/plugin-store": "2.0.0-beta.2",
-    "pinia": "^2.1.7",
+    "@tauri-apps/api": "2.1.1",
+    "@tauri-apps/plugin-clipboard-manager": "~2.2.1",
+    "@tauri-apps/plugin-http": "~2",
+    "@tauri-apps/plugin-os": "~2",
+    "@tauri-apps/plugin-process": "~2",
+    "@tauri-apps/plugin-shell": "~2",
+    "@tauri-apps/plugin-store": "~2",
+    "pinia": "^3.0.1",
     "vue": "^3.3.4",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "10",
     "vue-router": "4"
   },
   "devDependencies": {
@@ -28,7 +29,8 @@
     "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "naive-ui": "^2.38.1",
-    "sass": "^1.71.1",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
     "typescript": "^5.0.2",
     "vite": "^5.0.0",
     "vue-tsc": "^1.8.5"

src-tauri/Cargo.toml

@@ -8,17 +8,18 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "2.0.0-beta", features = [] }
+tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2.0.0-beta.18", features = ["macos-private-api", "devtools"] }
-tauri-plugin-store = "2.0.0-beta"
+tauri = { version = "2", features = ["macos-private-api", "devtools"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-anyhow = "1.0"
-lazy_static = "1.4.0"
-tokio = { version = "1.36.0", features = ["rt-multi-thread", "net", "macros", "io-util", "time", "sync"] }
-tauri-plugin-process = "2.0.0-beta"
-tauri-plugin-shell = "2.0.0-beta"
-tauri-plugin-http = "2.0.0-beta"
-tauri-plugin-clipboard-manager = "2.1.0-beta.2"
+anyhow = "1"
+lazy_static = "1"
+tokio = { version = "1", features = ["rt-multi-thread", "net", "macros", "io-util", "time", "sync"] }
+tauri-plugin-store = "2"
+tauri-plugin-process = "2"
+tauri-plugin-shell = "2"
+tauri-plugin-http = "2"
+tauri-plugin-clipboard-manager = "2"
+tauri-plugin-os = "2"

src-tauri/capabilities/default.json

@@ -2,20 +2,24 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["main"],
+  "windows": [
+    "main"
+  ],
   "permissions": [
-    "event:default",
-    "window:default",
-    "window:allow-set-position",
-    "window:allow-set-size",
-    "window:allow-maximize",
-    "window:allow-minimize",
-    "window:allow-close",
-    "window:allow-is-maximizable",
-    "window:allow-start-dragging",
-    "window:allow-unmaximize",
-    "window:allow-set-cursor-position",
-    "window:allow-set-cursor-visible",
+    "core:event:default",
+    "core:window:default",
+    "core:window:allow-set-position",
+    "core:window:allow-set-size",
+    "core:window:allow-maximize",
+    "core:window:allow-minimize",
+    "core:window:allow-close",
+    "core:window:allow-is-maximizable",
+    "core:window:allow-start-dragging",
+    "core:window:allow-unmaximize",
+    "core:window:allow-set-cursor-position",
+    "core:window:allow-set-cursor-visible",
+    "core:app:allow-version",
+    "core:app:default",
     "store:default",
     "store:allow-get",
     "store:allow-set",
@@ -26,8 +30,8 @@
     "store:allow-delete",
     "process:default",
     "process:allow-restart",
-    "webview:default",
-    "webview:allow-internal-toggle-devtools",
+    "core:webview:default",
+    "core:webview:allow-internal-toggle-devtools",
     "shell:default",
     "shell:allow-open",
     "http:default",
@@ -40,10 +44,9 @@
       ]
     },
     "http:allow-fetch",
-    "app:default",
-    "app:allow-version",
     "clipboard-manager:default",
     "clipboard-manager:allow-read-text",
-    "clipboard-manager:allow-write-text"
+    "clipboard-manager:allow-write-text",
+    "os:default"
   ]
-}
+}

src-tauri/src/main.rs

@@ -9,7 +9,8 @@ use scrcpy_mask::{
     socket::connect_socket,
 };
 use std::{fs::read_to_string, sync::Arc};
-use tauri::Manager;
+use tauri::{Emitter, Listener, Manager};
+use tauri_plugin_store::StoreExt;
 
 #[tauri::command]
 /// get devices info list
@@ -159,101 +160,80 @@ fn check_adb_available() -> Result<(), String> {
 
 #[tauri::command]
 fn set_adb_path(adb_path: String, app: tauri::AppHandle) -> Result<(), String> {
-    let app_h = app.app_handle().clone();
-    let stores = app_h.state::<tauri_plugin_store::StoreCollection<tauri::Wry>>();
-    let path = std::path::PathBuf::from("store.bin");
-    let store_res: Result<(), tauri_plugin_store::Error> =
-        tauri_plugin_store::with_store(app, stores, path, |store| {
-            store.insert(
-                "adbPath".to_string(),
-                serde_json::Value::String(adb_path.clone()),
-            )?;
-            *share::ADB_PATH.lock().unwrap() = adb_path;
-            Ok(())
-        });
-
-    match store_res {
-        Ok(_) => Ok(()),
-        Err(e) => Err(e.to_string()),
-    }
+    let store = app
+        .store("store.bin")
+        .map_err(|_| "failed to load store".to_string())?;
+    store.set("adbPath", adb_path.clone());
+    *share::ADB_PATH.lock().unwrap() = adb_path;
+    Ok(())
 }
-
 #[tokio::main]
 async fn main() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_store::Builder::new().build())
         .setup(|app| {
-            let stores = app
-                .app_handle()
-                .state::<tauri_plugin_store::StoreCollection<tauri::Wry>>();
-            let path: std::path::PathBuf = std::path::PathBuf::from("store.bin");
-            tauri_plugin_store::with_store(app.app_handle().clone(), stores, path, |store| {
-                // load adb path
-                match store.get("adbPath") {
-                    Some(value) => {
-                        *share::ADB_PATH.lock().unwrap() = value.as_str().unwrap().to_string()
-                    }
-                    None => store
-                        .insert(
-                            "adbPath".to_string(),
-                            serde_json::Value::String("adb".to_string()),
-                        )
-                        .unwrap(),
-                };
+            let store = app
+                .store("store.bin")
+                .map_err(|_| "failed to load store".to_string())?;
 
-                // restore window position and size
-                match store.get("maskArea") {
-                    Some(value) => {
-                        let pos_x = value["posX"].as_i64();
-                        let pos_y = value["posY"].as_i64();
-                        let size_w = value["sizeW"].as_i64().unwrap_or(800);
-                        let size_h = value["sizeH"].as_i64().unwrap_or(600);
-
-                        let main_window: tauri::WebviewWindow =
-                            app.get_webview_window("main").unwrap();
-
-                        main_window.set_zoom(1.).unwrap_or(());
-
-                        if pos_x.is_none() || pos_y.is_none() {
-                            main_window.center().unwrap_or(());
-                        } else {
-                            main_window
-                                .set_position(tauri::Position::Logical(tauri::LogicalPosition {
-                                    x: (pos_x.unwrap() - 70) as f64,
-                                    y: (pos_y.unwrap() - 30) as f64,
-                                }))
-                                .unwrap();
-                        }
-
-                        main_window
-                            .set_size(tauri::Size::Logical(tauri::LogicalSize {
-                                width: (size_w + 70) as f64,
-                                height: (size_h + 30) as f64,
-                            }))
-                            .unwrap();
-                    }
-                    None => {
-                        let main_window: tauri::WebviewWindow =
-                            app.get_webview_window("main").unwrap();
-
-                        main_window.center().unwrap_or(());
-
-                        main_window
-                            .set_size(tauri::Size::Logical(tauri::LogicalSize {
-                                width: (800 + 70) as f64,
-                                height: (600 + 30) as f64,
-                            }))
-                            .unwrap();
-                    }
+            // set adb path
+            match store.get("adbPath") {
+                Some(value) => {
+                    *share::ADB_PATH.lock().unwrap() = value.as_str().unwrap().to_string()
                 }
+                None => store.set("adbPath", "adb".to_string()),
+            }
 
-                Ok(())
-            })
-            .unwrap();
+            // restore window position and size
+            match store.get("maskArea") {
+                Some(value) => {
+                    // TODO check position and size validity
+
+                    let pos_x = value["posX"].as_i64();
+                    let pos_y = value["posY"].as_i64();
+                    let size_w = value["sizeW"].as_i64().unwrap_or(800);
+                    let size_h = value["sizeH"].as_i64().unwrap_or(600);
+
+                    let main_window: tauri::WebviewWindow = app.get_webview_window("main").unwrap();
+
+                    main_window.set_zoom(1.).unwrap_or(());
+
+                    if pos_x.is_none() || pos_y.is_none() {
+                        main_window.center().unwrap_or(());
+                    } else {
+                        main_window
+                            .set_position(tauri::Position::Logical(tauri::LogicalPosition {
+                                x: (pos_x.unwrap() - 70) as f64,
+                                y: (pos_y.unwrap() - 30) as f64,
+                            }))
+                            .unwrap();
+                    }
+
+                    main_window
+                        .set_size(tauri::Size::Logical(tauri::LogicalSize {
+                            width: (size_w + 70) as f64,
+                            height: (size_h + 30) as f64,
+                        }))
+                        .unwrap();
+                }
+                None => {
+                    let main_window: tauri::WebviewWindow = app.get_webview_window("main").unwrap();
+
+                    main_window.center().unwrap_or(());
+
+                    main_window
+                        .set_size(tauri::Size::Logical(tauri::LogicalSize {
+                            width: (800 + 70) as f64,
+                            height: (600 + 30) as f64,
+                        }))
+                        .unwrap();
+                }
+            }
 
             // check resource files
             ResHelper::res_init(

src-tauri/src/socket.rs

@@ -2,6 +2,7 @@ use std::sync::Arc;
 
 use anyhow::Context;
 use serde_json::json;
+use tauri::Listener;
 use tokio::{
     io::AsyncReadExt,
     net::{

src/App.vue

@@ -13,24 +13,26 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 onMounted(async () => {
-  router.replace({ name: "mask" });
+  await router.replace({ name: "mask" });
 });
 </script>
 
 <template>
-  <NConfigProvider :theme="darkTheme" class="container">
-    <NMessageProvider>
-      <Header />
-      <NDialogProvider>
-        <RouterView v-slot="{ Component }">
-          <KeepAlive>
-            <component :is="Component" />
-          </KeepAlive>
-        </RouterView>
-      </NDialogProvider>
-      <Sidebar />
-    </NMessageProvider>
-  </NConfigProvider>
+  <Suspense>
+    <NConfigProvider :theme="darkTheme" class="container">
+      <NMessageProvider>
+        <Header />
+        <NDialogProvider>
+          <RouterView v-slot="{ Component }">
+            <KeepAlive>
+              <component :is="Component" />
+            </KeepAlive>
+          </RouterView>
+        </NDialogProvider>
+        <Sidebar />
+      </NMessageProvider>
+    </NConfigProvider>
+  </Suspense>
 </template>
 
 <style>

src/components/Device.vue

@@ -44,7 +44,7 @@ import { shutdown } from "../frontcommand/scrcpyMaskCmd";
 import { useGlobalStore } from "../store/global";
 import { useI18n } from "vue-i18n";
 import { closeExternalControl, connectExternalControl } from "../websocket";
-import { LogicalSize, getCurrent } from "@tauri-apps/api/window";
+import { LogicalSize, getCurrentWindow } from "@tauri-apps/api/window";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 
 const { t } = useI18n();
@@ -97,7 +97,7 @@ onMounted(async () => {
               maskH = Math.round(store.rotation.verticalLength);
               maskW = Math.round(maskH * (payload.width / payload.height));
             }
-            getCurrent().setSize(new LogicalSize(maskW + 70, maskH + 30));
+            getCurrentWindow().setSize(new LogicalSize(maskW + 70, maskH + 30));
           }
           break;
         default:

src/components/Header.vue

@@ -2,10 +2,10 @@
 import { NButtonGroup, NButton, NIcon } from "naive-ui";
 import { Close } from "@vicons/ionicons5";
 import { Maximize16Regular, Subtract16Regular } from "@vicons/fluent";
-import { getCurrent } from "@tauri-apps/api/window";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 
 async function maximizeOrRestore() {
-  const appWindow = getCurrent();
+  const appWindow = getCurrentWindow();
   appWindow.isMaximized().then((maximized) => {
     maximized ? appWindow.unmaximize() : appWindow.maximize();
   });
@@ -16,7 +16,11 @@ async function maximizeOrRestore() {
   <div class="header">
     <div data-tauri-drag-region class="drag"></div>
     <NButtonGroup>
-      <NButton quaternary :focusable="false" @click="getCurrent().minimize()">
+      <NButton
+        quaternary
+        :focusable="false"
+        @click="getCurrentWindow().minimize()"
+      >
         <template #icon>
           <NIcon><Subtract16Regular /></NIcon>
         </template>
@@ -30,7 +34,7 @@ async function maximizeOrRestore() {
         quaternary
         :focusable="false"
         class="close"
-        @click="getCurrent().close()"
+        @click="getCurrentWindow().close()"
       >
         <template #icon>
           <NIcon><Close /></NIcon>
@@ -52,11 +56,11 @@ async function maximizeOrRestore() {
   user-select: none;
   -webkit-user-select: none;
 
-  .n-button-group{
+  .n-button-group {
     flex-shrink: 0;
   }
 
-  .drag{
+  .drag {
     flex-grow: 1;
     height: 100%;
   }

src/components/Mask.vue

@@ -15,11 +15,11 @@ import ScreenStream from "./ScreenStream.vue";
 import { getVersion } from "@tauri-apps/api/app";
 import { fetch } from "@tauri-apps/plugin-http";
 import { open } from "@tauri-apps/plugin-shell";
-import { getCurrent, PhysicalSize } from "@tauri-apps/api/window";
-import { Store } from "@tauri-apps/plugin-store";
+import { getCurrentWindow, PhysicalSize } from "@tauri-apps/api/window";
 import { useI18n } from "vue-i18n";
 import { checkAdbAvailable } from "../invoke";
-import { loadLocalStorage } from "../storeLoader";
+import { loadPersistentStorage } from "../storeLoader";
+import { load } from "@tauri-apps/plugin-store";
 
 const { t } = useI18n();
 const store = useGlobalStore();
@@ -68,7 +68,7 @@ onMounted(async () => {
     checkAdb();
     // listen to window resize event
     const maskElement = document.getElementById("maskElement") as HTMLElement;
-    const appWindow = getCurrent();
+    const appWindow = getCurrentWindow();
     appWindow.onResized(() => {
       store.maskSizeH = maskElement.clientHeight;
       store.maskSizeW = maskElement.clientWidth;
@@ -103,12 +103,13 @@ function genClientId() {
 }
 
 async function loadLocalStore() {
-  const localStore = new Store("store.bin");
-  await loadLocalStorage(localStore, store, t);
+  const localStore = await load("store.json");
+  await loadPersistentStorage(localStore, store, t);
 }
 
 async function cleanAfterimage() {
-  const appWindow = getCurrent();
+  // TODO fix oldSize making window large
+  const appWindow = getCurrentWindow();
   const oldSize = await appWindow.outerSize();
   const newSize = new PhysicalSize(oldSize.width, oldSize.height + 1);
   await appWindow.setSize(newSize);

src/components/keyboard/KeySetting.vue

@@ -14,17 +14,17 @@ import {
 } from "naive-ui";
 import { computed, onActivated, onMounted, ref, watch } from "vue";
 import { useGlobalStore } from "../../store/global";
-import { Store } from "@tauri-apps/plugin-store";
 import { loadDefaultKeyconfig } from "../../invoke";
 import { KeyMappingConfig } from "../../keyMappingConfig";
 import { useKeyboardStore } from "../../store/keyboard";
 import { useI18n } from "vue-i18n";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { load } from "@tauri-apps/plugin-store";
 
 const { t } = useI18n();
 const store = useGlobalStore();
 const keyboardStore = useKeyboardStore();
-const localStore = new Store("store.bin");
+const localStore = await load("store.json");
 const message = useMessage();
 
 const showImportModal = ref(false);
@@ -56,7 +56,7 @@ onMounted(async () => {
     "keySettingPos"
   );
 
-  if (storedPos === null) {
+  if (storedPos === undefined) {
     await localStore.set("keySettingPos", keySettingPos.value);
     storedPos = { x: 100, y: 100 };
   }

src/components/setting/About.vue

@@ -5,10 +5,10 @@ import { open } from "@tauri-apps/plugin-shell";
 import { getVersion } from "@tauri-apps/api/app";
 import { onMounted, ref } from "vue";
 import { useGlobalStore } from "../../store/global";
-import { Store } from "@tauri-apps/plugin-store";
+import { load } from "@tauri-apps/plugin-store";
 
 const store = useGlobalStore();
-const localStore = new Store("store.bin");
+const localStore = await load('store.json');
 
 const appVersion = ref("");
 onMounted(async () => {

src/components/setting/Basic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Store } from "@tauri-apps/plugin-store";
+import { load } from "@tauri-apps/plugin-store";
 import {
   NH4,
   NButton,
@@ -12,20 +12,22 @@ import {
   NTooltip,
 } from "naive-ui";
 import { onMounted, ref } from "vue";
-import i18n from "../../i18n";
+import i18n, { allLanguage } from "../../i18n";
 import { useI18n } from "vue-i18n";
 import { setAdbPath } from "../../invoke";
 import { useGlobalStore } from "../../store/global";
 
 const { t } = useI18n();
-const localStore = new Store("store.bin");
+const localStore = await load("store.json");
 const store = useGlobalStore();
 const message = useMessage();
 
-const languageOptions = [
-  { label: "简体中文", value: "zh-CN" },
-  { label: "English", value: "en-US" },
-];
+const languageOptions = Object.entries(allLanguage).map(([key, value]) => {
+  return {
+    label: value.label,
+    value: key,
+  };
+});
 
 const curLanguage = ref("en-US");
 
@@ -40,7 +42,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
   if (language === curLanguage.value) return;
   curLanguage.value = language;
   localStore.set("language", language);
-  i18n.global.locale.value = language;
+  i18n.global.locale = language;
 }
 
 async function adjustAdbPath() {

src/components/setting/Data.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Store } from "@tauri-apps/plugin-store";
+import { load } from "@tauri-apps/plugin-store";
 import { Refresh, TrashBinOutline } from "@vicons/ionicons5";
 import {
   NH4,
@@ -19,7 +19,8 @@ import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
-const localStore = new Store("store.bin");
+const localStore = await load("store.json");
+
 const dialog = useDialog();
 
 const localStoreEntries = ref<[string, unknown][]>([]);

src/components/setting/Mask.vue

@@ -22,9 +22,9 @@ import {
   LogicalSize,
   PhysicalPosition,
   PhysicalSize,
-  getCurrent,
+  getCurrentWindow,
 } from "@tauri-apps/api/window";
-import { Store } from "@tauri-apps/plugin-store";
+import { load } from "@tauri-apps/plugin-store";
 import { SettingsOutline } from "@vicons/ionicons5";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { useGlobalStore } from "../../store/global";
@@ -35,7 +35,7 @@ let unlistenMove: UnlistenFn = () => {};
 let factor = 1;
 
 const { t } = useI18n();
-const localStore = new Store("store.bin");
+const localStore = await load("store.json");
 const store = useGlobalStore();
 const message = useMessage();
 const formRef = ref<FormInst | null>(null);
@@ -120,7 +120,7 @@ async function adjustMaskArea() {
   const mt = 30;
   const ml = 70;
 
-  const appWindow = getCurrent();
+  const appWindow = getCurrentWindow();
 
   const pos = new LogicalPosition(
     areaModel.value.posX - ml,
@@ -137,11 +137,11 @@ async function adjustMaskArea() {
 }
 
 onMounted(async () => {
-  const appWindow = getCurrent();
+  const appWindow = getCurrentWindow();
   factor = await appWindow.scaleFactor();
 
   let maskArea = await localStore.get<MaskArea>("maskArea");
-  if (maskArea !== null) {
+  if (maskArea !== undefined) {
     areaModel.value = maskArea;
   }
 

src/hotkey.ts

@@ -23,7 +23,7 @@ import {
   KeyTriggerWhenPressedSkill,
 } from "./keyMappingConfig";
 import { useGlobalStore } from "./store/global";
-import { LogicalPosition, getCurrent } from "@tauri-apps/api/window";
+import { LogicalPosition, getCurrentWindow } from "@tauri-apps/api/window";
 import { readText } from "@tauri-apps/plugin-clipboard-manager";
 import { useI18n } from "vue-i18n";
 import { KeyToCodeMap } from "./frontcommand/KeyToCodeMap";
@@ -663,7 +663,7 @@ function addSightShortcuts(
   sightKeyMapping: KeySight,
   fireKeyMapping?: KeyFire
 ) {
-  const appWindow = getCurrent();
+  const appWindow = getCurrentWindow();
 
   let mouseLock = false;
   let msgReactive: ReturnType<typeof message.info> | null = null;

src/i18n/index.ts

@@ -1,22 +1,39 @@
 import { createI18n } from "vue-i18n";
-import { Store } from "@tauri-apps/plugin-store";
+import { load } from "@tauri-apps/plugin-store";
+import { locale } from "@tauri-apps/plugin-os";
 
 import enUS from "./en-US.json";
 import zhCN from "./zh-CN.json";
+const localStore = await load("store.json");
 
-const localStore = new Store("store.bin");
+export const allLanguage = {
+  "en-US": { label: "English US", value: enUS },
+  "zh-CN": { label: "简体中文", value: zhCN },
+};
 
 const i18n = createI18n({
   allowComposition: true,
-  legacy: false,
-  messages: {
-    "en-US": enUS,
-    "zh-CN": zhCN,
-  },
+  messages: Object.fromEntries(
+    Object.entries(allLanguage).map(([key, value]) => [key, value.value])
+  ),
 });
 
 localStore.get<"en-US" | "zh-CN">("language").then((language) => {
-  i18n.global.locale.value = language ?? "en-US";
+  if (language === undefined) {
+    locale().then((lang) => {
+      if (lang === null) i18n.global.locale = "en-US";
+      else if (lang in allLanguage) {
+        i18n.global.locale = lang;
+      } else {
+        if (lang.startsWith("zh")) i18n.global.locale = "zh-CN";
+        else if (lang.startsWith("en")) i18n.global.locale = "en-US";
+        else i18n.global.locale = "en-US";
+      }
+    });
+    // "en-US"
+  } else {
+    i18n.global.locale = language;
+  }
 });
 
 export default i18n;

src/store/global.ts

@@ -5,9 +5,9 @@ import {
   KeyMappingConfig,
   KeySteeringWheel,
 } from "../keyMappingConfig";
-import { Store } from "@tauri-apps/plugin-store";
+import { load } from "@tauri-apps/plugin-store";
 
-const localStore = new Store("store.bin");
+const localStore = await load("store.json");
 
 export const useGlobalStore = defineStore("global", () => {
   const showLoadingRef = ref(false);
@@ -30,21 +30,17 @@ export const useGlobalStore = defineStore("global", () => {
   let checkUpdate: () => Promise<void> = async () => {};
   let checkAdb: () => Promise<void> = async () => {};
 
+  // Applies the edited key mapping list and checks for duplicate keys
   function applyEditKeyMappingList(): boolean {
     const set = new Set<string>();
     for (const keyMapping of editKeyMappingList.value) {
       if (keyMapping.type === "SteeringWheel") {
-        const nameList: ["up", "down", "left", "right"] = [
-          "up",
-          "down",
-          "left",
-          "right",
-        ];
-        for (const name of nameList) {
+        for (const name of ["up", "down", "left", "right"] as const) {
           if (set.has((keyMapping as KeySteeringWheel).key[name])) return false;
           set.add((keyMapping as KeySteeringWheel).key[name]);
         }
       } else if (keyMapping.type !== "Fire") {
+        // check duplicated key
         if (set.has(keyMapping.key as string)) return false;
         set.add(keyMapping.key as string);
       }
@@ -56,12 +52,14 @@ export const useGlobalStore = defineStore("global", () => {
     return true;
   }
 
+  // Reset the edited key mapping to the original key mapping list
   function resetEditKeyMappingList() {
     editKeyMappingList.value = JSON.parse(
       JSON.stringify(keyMappingConfigList.value[curKeyMappingIndex.value].list)
     );
   }
 
+  // change key mapping scheme
   function setKeyMappingIndex(index: number) {
     curKeyMappingIndex.value = index;
     resetEditKeyMappingList();

src/storeLoader.ts

@@ -12,7 +12,7 @@ async function loadKeyMappingConfigList() {
   let keyMappingConfigList = await localStore.get<KeyMappingConfig[]>(
     "keyMappingConfigList"
   );
-  if (keyMappingConfigList === null || keyMappingConfigList.length === 0) {
+  if (keyMappingConfigList === undefined || keyMappingConfigList.length === 0) {
     // add empty key mapping config
     // unable to get mask element when app is not ready
     // so we use the stored mask area to get relative size
@@ -23,7 +23,7 @@ async function loadKeyMappingConfigList() {
       sizeH: number;
     }>("maskArea");
     let relativeSize = { w: 800, h: 600 };
-    if (maskArea !== null) {
+    if (maskArea !== undefined) {
       relativeSize = {
         w: maskArea.sizeW,
         h: maskArea.sizeH,
@@ -45,7 +45,7 @@ async function loadCurKeyMappingIndex() {
   // loading curKeyMappingIndex from local store
   let curKeyMappingIndex = await localStore.get<number>("curKeyMappingIndex");
   if (
-    curKeyMappingIndex === null ||
+    curKeyMappingIndex === undefined ||
     curKeyMappingIndex >= store.keyMappingConfigList.length
   ) {
     curKeyMappingIndex = 0;
@@ -100,10 +100,9 @@ async function loadClipboardSync() {
     pasteFromPC: boolean;
   }>("clipboardSync");
   if (clipboardSync) store.clipboardSync = clipboardSync;
-  console.log(store.clipboardSync);
 }
 
-export async function loadLocalStorage(
+export async function loadPersistentStorage(
   theLocalStore: Store,
   theStore: ReturnType<typeof useGlobalStore>,
   theT: ReturnType<typeof useI18n>["t"]

vite.config.ts

@@ -3,6 +3,14 @@ import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler", // 或 "modern"
+      },
+    },
+  },
+
   plugins: [vue()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`