fix(All): runtime error

package.json

@@ -12,27 +12,32 @@
   },
   "dependencies": {
     "@tauri-apps/api": "2.1.1",
+    "@tauri-apps/cli": "^2.3.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",
+    "naive-ui": "^2.41.0",
     "pinia": "^3.0.1",
-    "vue": "^3.3.4",
+    "vue": "^3.5.13",
     "vue-i18n": "10",
-    "vue-router": "4"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tauri-apps/cli": ">=2.0.0-beta.0",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.13.9",
     "@vicons/fluent": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.2.1",
-    "naive-ui": "^2.38.1",
+    "@vue/tsconfig": "^0.7.0",
+    "npm-run-all2": "^7.0.2",
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
-    "typescript": "^5.0.2",
+    "typescript": "~5.8.0",
-    "vite": "^5.0.0",
+    "vite": "^6.2.1",
-    "vue-tsc": "^1.8.5"
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
   }
 }

src/App.vue

@@ -18,27 +18,23 @@ onMounted(async () => {
 </script>
 
 <template>
-  <NConfigProvider :theme="darkTheme" class="container">
+  <NConfigProvider :theme="darkTheme" class="root">
     <NMessageProvider>
-      <Header />
       <NDialogProvider>
+        <Header />
         <RouterView v-slot="{ Component }">
           <KeepAlive>
-            <Suspense>
-              <div>
             <component :is="Component" />
-              </div>
-            </Suspense>
           </KeepAlive>
         </RouterView>
-      </NDialogProvider>
         <Sidebar />
+      </NDialogProvider>
     </NMessageProvider>
   </NConfigProvider>
 </template>
 
 <style>
-.container {
+.root {
   background-color: transparent;
   height: 100%;
   display: grid;

src/components/Device.vue

@@ -75,7 +75,6 @@ onMounted(async () => {
           if (payload.clipboard === lastClipboard) break;
           lastClipboard = payload.clipboard;
           writeText(payload.clipboard);
-          console.log(payload);
           break;
         case "ClipboardSetAck":
           break;
@@ -101,7 +100,7 @@ onMounted(async () => {
           }
           break;
         default:
-          console.log("Unknown reply", payload);
+          console.warn("Unknown reply", payload);
           break;
       }
     } catch (e) {
@@ -360,6 +359,7 @@ function closeWS() {
 </script>
 
 <template>
+  <div class="container">
     <NScrollbar>
       <div class="device">
         <NSpin :show="store.showLoadingRef">
@@ -470,9 +470,16 @@ function closeWS() {
         </NSpin>
       </div>
     </NScrollbar>
+  </div>
 </template>
 
 <style scoped lang="scss">
+@use "./../css/common.scss";
+
+.container {
+  @include common.contentContainer;
+}
+
 .device {
   color: var(--light-color);
   background-color: var(--bg-color);

src/components/Mask.vue

@@ -19,7 +19,6 @@ import { getCurrentWindow, PhysicalSize } from "@tauri-apps/api/window";
 import { useI18n } from "vue-i18n";
 import { checkAdbAvailable } from "../invoke";
 import { loadPersistentStorage } from "../storeLoader";
-import { load } from "@tauri-apps/plugin-store";
 
 const { t } = useI18n();
 const store = useGlobalStore();
@@ -60,7 +59,7 @@ onActivated(async () => {
 
 onMounted(async () => {
   store.screenStreamClientId = genClientId();
-  await loadLocalStore();
+  loadPersistentStorage(store, t);
   store.checkUpdate = checkUpdate;
   if (store.checkUpdateAtStart) checkUpdate();
   store.checkAdb = checkAdb;
@@ -102,11 +101,6 @@ function genClientId() {
   return result;
 }
 
-async function loadLocalStore() {
-  const localStore = await load("store.json");
-  await loadPersistentStorage(localStore, store, t);
-}
-
 async function cleanAfterimage() {
   // TODO fix oldSize making window large
   const appWindow = getCurrentWindow();
@@ -181,6 +175,7 @@ async function checkUpdate() {
 </script>
 
 <template>
+  <div class="content-container">
     <div v-show="!store.controledDevice" class="notice">
       <div class="content">
         <NDialog
@@ -197,7 +192,9 @@ async function checkUpdate() {
       <div @contextmenu.prevent class="mask" id="maskElement"></div>
       <ScreenStream
         :cid="store.screenStreamClientId"
-      v-if="curPageActive && store.controledDevice && store.screenStream.enable"
+        v-if="
+          curPageActive && store.controledDevice && store.screenStream.enable
+        "
       />
       <div
         v-if="store.maskButton.show"
@@ -243,9 +240,16 @@ async function checkUpdate() {
         </template>
       </div>
     </template>
+  </div>
 </template>
 
 <style scoped lang="scss">
+@use "../css/common.scss";
+
+.content-container {
+  @include common.contentContainer;
+}
+
 .mask {
   background-color: transparent;
   overflow: hidden;

src/components/keyboard/KeyBoard.vue

@@ -335,6 +335,7 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
+  <div class="content-container">
     <ScreenStream
       :cid="store.screenStreamClientId"
       v-if="curPageActive && store.controledDevice && store.screenStream.enable"
@@ -367,7 +368,8 @@ onBeforeRouteLeave(() => {
           v-else-if="
             store.editKeyMappingList[index].type === 'DirectionalSkill' ||
             store.editKeyMappingList[index].type === 'DirectionlessSkill' ||
-          store.editKeyMappingList[index].type === 'TriggerWhenPressedSkill' ||
+            store.editKeyMappingList[index].type ===
+              'TriggerWhenPressedSkill' ||
             store.editKeyMappingList[index].type ===
               'TriggerWhenDoublePressedSkill'
           "
@@ -392,10 +394,19 @@ onBeforeRouteLeave(() => {
         <KeyCommon v-else :index="index" />
       </template>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
+@use "../../css/common.scss";
+
+.content-container {
+  @include common.contentContainer;
+}
+
 .keyboard {
+  width: 100%;
+  height: 100%;
   color: var(--light-color);
   background-color: rgba(0, 0, 0, 0.5);
   overflow: hidden;

src/components/keyboard/KeySetting.vue

@@ -19,12 +19,11 @@ 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";
+import { LocalStore } from "../../store/localStore";
 
 const { t } = useI18n();
 const store = useGlobalStore();
 const keyboardStore = useKeyboardStore();
-const localStore = await load("store.json");
 const message = useMessage();
 
 const showImportModal = ref(false);
@@ -52,12 +51,12 @@ const keySettingPos = ref({ x: 100, y: 100 });
 
 onMounted(async () => {
   // loading keySettingPos from local store
-  let storedPos = await localStore.get<{ x: number; y: number }>(
+  let storedPos = await LocalStore.get<{ x: number; y: number }>(
     "keySettingPos"
   );
 
   if (storedPos === undefined) {
-    await localStore.set("keySettingPos", keySettingPos.value);
+    await LocalStore.set("keySettingPos", keySettingPos.value);
     storedPos = { x: 100, y: 100 };
   }
   // apply keySettingPos
@@ -119,7 +118,7 @@ function dragHandler(downEvent: MouseEvent) {
     if (moveFlag) {
       // move up
       target.style.setProperty("cursor", "pointer");
-      localStore.set("keySettingPos", keySettingPos.value);
+      LocalStore.set("keySettingPos", keySettingPos.value);
     } else {
       // click up
       if (keyboardStore.editSwipePointsFlag) {
@@ -152,7 +151,7 @@ function importKeyMappingConfig() {
   store.keyMappingConfigList.push(keyMappingConfig);
   store.setKeyMappingIndex(store.keyMappingConfigList.length - 1);
   showImportModal.value = false;
-  localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+  LocalStore.set("keyMappingConfigList", store.keyMappingConfigList);
   message.success(t("pages.KeyBoard.KeySetting.importSuccess"));
 }
 
@@ -172,7 +171,7 @@ async function importDefaultKeyMappingConfig() {
     return;
   }
 
-  localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+  LocalStore.set("keyMappingConfigList", store.keyMappingConfigList);
   message.success(t("pages.KeyBoard.KeySetting.importDefaultSuccess", [count]));
 }
 
@@ -195,7 +194,7 @@ function createKeyMappingConfig() {
   };
   store.keyMappingConfigList.push(newConfig);
   store.setKeyMappingIndex(store.keyMappingConfigList.length - 1);
-  localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+  LocalStore.set("keyMappingConfigList", store.keyMappingConfigList);
   message.success(t("pages.KeyBoard.KeySetting.newConfigSuccess"));
 }
 
@@ -218,7 +217,7 @@ function copyCurKeyMappingConfig() {
   keyboardStore.activeButtonIndex = -1;
   keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
   store.setKeyMappingIndex(store.keyMappingConfigList.length - 1);
-  localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+  LocalStore.set("keyMappingConfigList", store.keyMappingConfigList);
   message.success(t("pages.KeyBoard.KeySetting.copyConfigSuccess", [newTitle]));
 }
 
@@ -237,7 +236,7 @@ function delCurKeyMappingConfig() {
   store.setKeyMappingIndex(
     store.curKeyMappingIndex > 0 ? store.curKeyMappingIndex - 1 : 0
   );
-  localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+  LocalStore.set("keyMappingConfigList", store.keyMappingConfigList);
   message.success(t("pages.KeyBoard.KeySetting.delSuccess", [title]));
 }
 
@@ -246,7 +245,7 @@ function renameKeyMappingConfig() {
   showRenameModal.value = false;
   if (newTitle !== "") {
     store.keyMappingConfigList[store.curKeyMappingIndex].title = newTitle;
-    localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+    LocalStore.set("keyMappingConfigList", store.keyMappingConfigList);
     message.success(t("pages.KeyBoard.KeySetting.renameSuccess", [newTitle]));
   } else {
     message.error(t("pages.KeyBoard.KeySetting.renameEmpty"));

src/components/keyboard/KeySwipe.vue

@@ -141,7 +141,6 @@ function swipePointDragHandlue(downEvent: MouseEvent, index: number) {
 
 function swipeTrackClickHandler(event: MouseEvent) {
   if (event.button !== 0) return;
-  console.log(event.target, event.currentTarget);
   if (event.target !== event.currentTarget) return;
   keyMapping.value.pos.push({ x: event.clientX - 70, y: event.clientY - 30 });
 }

src/components/setting/About.vue

@@ -5,10 +5,9 @@ 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 { load } from "@tauri-apps/plugin-store";
+import { LocalStore } from "../../store/localStore";
 
 const store = useGlobalStore();
-const localStore = await load('store.json');
 
 const appVersion = ref("");
 onMounted(async () => {
@@ -73,7 +72,7 @@ async function checkUpdate() {
     <NCheckbox
       v-model:checked="store.checkUpdateAtStart"
       @update:checked="
-        localStore.set('checkUpdateAtStart', store.checkUpdateAtStart)
+        LocalStore.set('checkUpdateAtStart', store.checkUpdateAtStart)
       "
       >{{ $t("pages.Setting.About.checkUpdateOnStartup") }}</NCheckbox
     >

src/components/setting/Basic.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { load } from "@tauri-apps/plugin-store";
 import {
   NH4,
   NButton,
@@ -16,9 +15,9 @@ import i18n, { allLanguage } from "../../i18n";
 import { useI18n } from "vue-i18n";
 import { setAdbPath } from "../../invoke";
 import { useGlobalStore } from "../../store/global";
+import { LocalStore } from "../../store/localStore";
 
 const { t } = useI18n();
-const localStore = await load("store.json");
 const store = useGlobalStore();
 const message = useMessage();
 
@@ -34,14 +33,14 @@ const curLanguage = ref("en-US");
 const adbPath = ref("");
 
 onMounted(async () => {
-  curLanguage.value = (await localStore.get<string>("language")) ?? "en-US";
+  curLanguage.value = (await LocalStore.get<string>("language")) ?? "en-US";
-  adbPath.value = (await localStore.get<string>("adbPath")) ?? "";
+  adbPath.value = (await LocalStore.get<string>("adbPath")) ?? "";
 });
 
 function changeLanguage(language: "zh-CN" | "en-US") {
   if (language === curLanguage.value) return;
   curLanguage.value = language;
-  localStore.set("language", language);
+  LocalStore.set("language", language);
   i18n.global.locale = language;
 }
 
@@ -50,12 +49,12 @@ async function adjustAdbPath() {
   await setAdbPath(adbPath.value);
   message.success(t("pages.Setting.Basic.adbPath.setSuccess"));
   await store.checkAdb();
-  adbPath.value = (await localStore.get<string>("adbPath")) ?? "";
+  adbPath.value = (await LocalStore.get<string>("adbPath")) ?? "";
   store.hideLoading();
 }
 
 function changeClipboardSync() {
-  localStore.set("clipboardSync", store.clipboardSync);
+  LocalStore.set("clipboardSync", store.clipboardSync);
 }
 </script>
 

src/components/setting/Data.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { load } from "@tauri-apps/plugin-store";
 import { Refresh, TrashBinOutline } from "@vicons/ionicons5";
 import {
   NH4,
@@ -17,9 +16,9 @@ import {
 import { relaunch } from "@tauri-apps/plugin-process";
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { LocalStore } from "../../store/localStore";
 
 const { t } = useI18n();
-const localStore = await load("store.json");
 
 const dialog = useDialog();
 
@@ -33,7 +32,7 @@ onMounted(async () => {
 });
 
 async function refreshLocalData() {
-  localStoreEntries.value = await localStore.entries();
+  localStoreEntries.value = await LocalStore.entries();
 }
 
 function showLocalStore(index: number) {
@@ -54,7 +53,7 @@ function delLocalStore(key?: string) {
       positiveText: t("pages.Setting.Data.delLocalStore.dialog.positiveText"),
       negativeText: t("pages.Setting.Data.delLocalStore.dialog.negativeText"),
       onPositiveClick: () => {
-        localStore.delete(key);
+        LocalStore.delete(key);
         localStoreEntries.value.splice(curDataIndex, 1);
         showDataModal.value = false;
       },
@@ -66,7 +65,7 @@ function delLocalStore(key?: string) {
       positiveText: t("pages.Setting.Data.delLocalStore.dialog.positiveText"),
       negativeText: t("pages.Setting.Data.delLocalStore.dialog.negativeText"),
       onPositiveClick: () => {
-        localStore.clear();
+        LocalStore.clear();
         relaunch();
       },
     });

src/components/setting/Mask.vue

@@ -24,18 +24,17 @@ import {
   PhysicalSize,
   getCurrentWindow,
 } from "@tauri-apps/api/window";
-import { load } from "@tauri-apps/plugin-store";
 import { SettingsOutline } from "@vicons/ionicons5";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { useGlobalStore } from "../../store/global";
 import { useI18n } from "vue-i18n";
+import { LocalStore } from "../../store/localStore";
 
 let unlistenResize: UnlistenFn = () => {};
 let unlistenMove: UnlistenFn = () => {};
 let factor = 1;
 
 const { t } = useI18n();
-const localStore = await load("store.json");
 const store = useGlobalStore();
 const message = useMessage();
 const formRef = ref<FormInst | null>(null);
@@ -105,7 +104,7 @@ function handleAdjustClick(e: MouseEvent) {
   formRef.value?.validate((errors) => {
     if (!errors) {
       adjustMaskArea().then(() => {
-        localStore.set("maskArea", areaModel.value);
+        LocalStore.set("maskArea", areaModel.value);
         message.success(t("pages.Setting.Mask.areaSaved"));
       });
     } else {
@@ -140,7 +139,7 @@ onMounted(async () => {
   const appWindow = getCurrentWindow();
   factor = await appWindow.scaleFactor();
 
-  let maskArea = await localStore.get<MaskArea>("maskArea");
+  let maskArea = await LocalStore.get<MaskArea>("maskArea");
   if (maskArea !== undefined) {
     areaModel.value = maskArea;
   }
@@ -172,13 +171,13 @@ onUnmounted(() => {
     >
       <NCheckbox
         v-model:checked="store.maskButton.show"
-        @update:checked="localStore.set('maskButton', store.maskButton)"
+        @update:checked="LocalStore.set('maskButton', store.maskButton)"
       />
     </NFormItem>
     <NFormItem :label="$t('pages.Setting.Mask.opacity')" label-placement="left">
       <NSlider
         v-model:value="store.maskButton.transparency"
-        @update:value="localStore.set('maskButton', store.maskButton)"
+        @update:value="LocalStore.set('maskButton', store.maskButton)"
         :min="0"
         :max="1"
         :step="0.01"
@@ -243,7 +242,7 @@ onUnmounted(() => {
     >
       <NCheckbox
         v-model:checked="store.rotation.enable"
-        @update:checked="localStore.set('rotation', store.rotation)"
+        @update:checked="LocalStore.set('rotation', store.rotation)"
       />
     </NFormItem>
     <NGrid :cols="2">
@@ -253,7 +252,7 @@ onUnmounted(() => {
       >
         <NInputNumber
           v-model:value="store.rotation.verticalLength"
-          @update:value="localStore.set('rotation', store.rotation)"
+          @update:value="LocalStore.set('rotation', store.rotation)"
           :placeholder="$t('pages.Setting.Mask.rotation.verticalLength')"
         />
       </NFormItemGi>
@@ -263,7 +262,7 @@ onUnmounted(() => {
       >
         <NInputNumber
           v-model:value="store.rotation.horizontalLength"
-          @update:value="localStore.set('rotation', store.rotation)"
+          @update:value="LocalStore.set('rotation', store.rotation)"
           :placeholder="$t('pages.Setting.Mask.rotation.horizontalLength')"
         />
       </NFormItemGi>
@@ -276,7 +275,7 @@ onUnmounted(() => {
     >
       <NCheckbox
         v-model:checked="store.screenStream.enable"
-        @update:checked="localStore.set('screenStream', store.screenStream)"
+        @update:checked="LocalStore.set('screenStream', store.screenStream)"
       />
     </NFormItem>
     <NFormItem
@@ -285,7 +284,7 @@ onUnmounted(() => {
     >
       <NInput
         v-model:value="store.screenStream.address"
-        @update:value="localStore.set('screenStream', store.screenStream)"
+        @update:value="LocalStore.set('screenStream', store.screenStream)"
         clearable
         :placeholder="$t('pages.Setting.Mask.screenStream.addressPlaceholder')"
       />

src/components/setting/Setting.vue

@@ -39,10 +39,12 @@ const store = useGlobalStore();
 </template>
 
 <style scoped lang="scss">
+@use "../../css/common.scss";
+
 .setting {
+  @include common.contentContainer;
   background-color: var(--content-bg-color);
   color: var(--light-color);
-  height: 100%;
   overflow-y: auto;
   display: flex;
 

src/css/common.scss

@@ -0,0 +1,5 @@
+@mixin contentContainer {
+  grid-area: content;
+  width: 100%;
+  height: 100%;
+}

src/i18n/index.ts

@@ -4,7 +4,6 @@ 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");
 
 export const allLanguage = {
   "en-US": { label: "English US", value: enUS },
@@ -18,7 +17,8 @@ const i18n = createI18n({
   ),
 });
 
-localStore.get<"en-US" | "zh-CN">("language").then((language) => {
+load("store.json").then((localStore) => {
+  localStore.get<"en-US" | "zh-CN">("language").then((language) => {
     if (language === undefined) {
       locale().then((lang) => {
         if (lang === null) i18n.global.locale = "en-US";
@@ -34,6 +34,7 @@ localStore.get<"en-US" | "zh-CN">("language").then((language) => {
     } else {
       i18n.global.locale = language;
     }
+  });
 });
 
 export default i18n;

src/store/global.ts

@@ -5,9 +5,7 @@ import {
   KeyMappingConfig,
   KeySteeringWheel,
 } from "../keyMappingConfig";
-import { load } from "@tauri-apps/plugin-store";
+import { LocalStore } from "./localStore";
-
-const localStore = await load("store.json");
 
 export const useGlobalStore = defineStore("global", () => {
   const showLoadingRef = ref(false);
@@ -48,7 +46,7 @@ export const useGlobalStore = defineStore("global", () => {
 
     keyMappingConfigList.value[curKeyMappingIndex.value].list =
       editKeyMappingList.value;
-    localStore.set("keyMappingConfigList", keyMappingConfigList.value);
+    LocalStore.set("keyMappingConfigList", keyMappingConfigList.value);
     return true;
   }
 
@@ -63,7 +61,7 @@ export const useGlobalStore = defineStore("global", () => {
   function setKeyMappingIndex(index: number) {
     curKeyMappingIndex.value = index;
     resetEditKeyMappingList();
-    localStore.set("curKeyMappingIndex", index);
+    LocalStore.set("curKeyMappingIndex", index);
   }
 
   const externalControlled = ref(false);

src/store/localStore.ts

@@ -0,0 +1,29 @@
+import { load, Store } from "@tauri-apps/plugin-store";
+
+export class LocalStore {
+  public static store: Store;
+
+  static async init() {
+    this.store = await load("store.json");
+  }
+
+  static async get<T>(key: string): Promise<T | undefined> {
+    return this.store.get(key);
+  }
+
+  static async set<T>(key: string, value: T) {
+    return this.store.set(key, value);
+  }
+
+  static async delete(key: string) {
+    return this.store.delete(key);
+  }
+
+  static async clear() {
+    return this.store.clear();
+  }
+
+  static async entries(){
+    return this.store.entries();
+  }
+}

src/storeLoader.ts

@@ -1,22 +1,21 @@
-import { Store } from "@tauri-apps/plugin-store";
 import { KeyMappingConfig } from "./keyMappingConfig";
 import { useGlobalStore } from "./store/global";
 import { useI18n } from "vue-i18n";
+import { LocalStore } from "./store/localStore";
 
-let localStore: Store;
 let store: ReturnType<typeof useGlobalStore>;
 let t: ReturnType<typeof useI18n>["t"];
 
 async function loadKeyMappingConfigList() {
   // loading keyMappingConfigList from local store
-  let keyMappingConfigList = await localStore.get<KeyMappingConfig[]>(
+  let keyMappingConfigList = await LocalStore.get<KeyMappingConfig[]>(
     "keyMappingConfigList"
   );
   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
-    const maskArea = await localStore.get<{
+    const maskArea = await LocalStore.get<{
       posX: number;
       posY: number;
       sizeW: number;
@@ -36,27 +35,27 @@ async function loadKeyMappingConfigList() {
         list: [],
       },
     ];
-    await localStore.set("keyMappingConfigList", keyMappingConfigList);
+    await LocalStore.set("keyMappingConfigList", keyMappingConfigList);
   }
   store.keyMappingConfigList = keyMappingConfigList;
 }
 
 async function loadCurKeyMappingIndex() {
   // loading curKeyMappingIndex from local store
-  let curKeyMappingIndex = await localStore.get<number>("curKeyMappingIndex");
+  let curKeyMappingIndex = await LocalStore.get<number>("curKeyMappingIndex");
   if (
     curKeyMappingIndex === undefined ||
     curKeyMappingIndex >= store.keyMappingConfigList.length
   ) {
     curKeyMappingIndex = 0;
-    localStore.set("curKeyMappingIndex", curKeyMappingIndex);
+    LocalStore.set("curKeyMappingIndex", curKeyMappingIndex);
   }
   store.curKeyMappingIndex = curKeyMappingIndex;
 }
 
 async function loadMaskButton() {
   // loading maskButton from local store
-  let maskButton = await localStore.get<{
+  const maskButton = await LocalStore.get<{
     show: boolean;
     transparency: number;
   }>("maskButton");
@@ -68,7 +67,7 @@ async function loadMaskButton() {
 
 async function loadCheckUpdateAtStart() {
   // loading checkUpdateAtStart from local store
-  const checkUpdateAtStart = await localStore.get<boolean>(
+  const checkUpdateAtStart = await LocalStore.get<boolean>(
     "checkUpdateAtStart"
   );
   store.checkUpdateAtStart = checkUpdateAtStart ?? true;
@@ -76,7 +75,7 @@ async function loadCheckUpdateAtStart() {
 
 async function loadRotation() {
   // loading rotation from local store
-  const rotation = await localStore.get<{
+  const rotation = await LocalStore.get<{
     enable: boolean;
     verticalLength: number;
     horizontalLength: number;
@@ -86,7 +85,7 @@ async function loadRotation() {
 
 async function loadScreenStream() {
   // loading screenStream from local store
-  const screenStream = await localStore.get<{
+  const screenStream = await LocalStore.get<{
     enable: boolean;
     address: string;
   }>("screenStream");
@@ -95,7 +94,7 @@ async function loadScreenStream() {
 
 async function loadClipboardSync() {
   // loading clipboardSync from local store
-  const clipboardSync = await localStore.get<{
+  const clipboardSync = await LocalStore.get<{
     syncFromDevice: boolean;
     pasteFromPC: boolean;
   }>("clipboardSync");
@@ -103,11 +102,11 @@ async function loadClipboardSync() {
 }
 
 export async function loadPersistentStorage(
-  theLocalStore: Store,
   theStore: ReturnType<typeof useGlobalStore>,
   theT: ReturnType<typeof useI18n>["t"]
 ) {
-  localStore = theLocalStore;
+  await LocalStore.init();
+
   store = theStore;
   t = theT;
 

src/websocket.ts

@@ -51,7 +51,6 @@ async function handleMessage(event: MessageEvent) {
       delete msg.type;
       await touch(msg);
     } else if (msg.type === "swipe") {
-      console.log(msg);
       msg.screen = { w: sharedStore.screenSizeW, h: sharedStore.screenSizeH };
       delete msg.type;
       await swipe(msg);