feat(Basic): add clipboardSync setting

src/components/Mask.vue

@@ -10,7 +10,7 @@ import {
   listenToEvent,
   unlistenToEvent,
 } from "../hotkey";
-import { KeyMappingConfig, KeySteeringWheel } from "../keyMappingConfig";
+import { KeySteeringWheel } from "../keyMappingConfig";
 import ScreenStream from "./ScreenStream.vue";
 import { getVersion } from "@tauri-apps/api/app";
 import { fetch } from "@tauri-apps/plugin-http";
@@ -19,6 +19,7 @@ import { getCurrent, PhysicalSize } from "@tauri-apps/api/window";
 import { Store } from "@tauri-apps/plugin-store";
 import { useI18n } from "vue-i18n";
 import { checkAdbAvailable } from "../invoke";
+import { loadLocalStorage } from "../storeLoader";
 
 const { t } = useI18n();
 const store = useGlobalStore();
@@ -103,79 +104,7 @@ function genClientId() {
 
 async function loadLocalStore() {
   const localStore = new Store("store.bin");
-  // loading keyMappingConfigList from local store
-  let keyMappingConfigList = await localStore.get<KeyMappingConfig[]>(
-    "keyMappingConfigList"
-  );
-  if (keyMappingConfigList === null || 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<{
-      posX: number;
-      posY: number;
-      sizeW: number;
-      sizeH: number;
-    }>("maskArea");
-    let relativeSize = { w: 800, h: 600 };
-    if (maskArea !== null) {
-      relativeSize = {
-        w: maskArea.sizeW,
-        h: maskArea.sizeH,
-      };
-    }
-    keyMappingConfigList = [
-      {
-        relativeSize,
-        title: t("pages.Mask.blankConfig"),
-        list: [],
-      },
-    ];
-    await localStore.set("keyMappingConfigList", keyMappingConfigList);
-  }
-  store.keyMappingConfigList = keyMappingConfigList;
-
-  // loading curKeyMappingIndex from local store
-  let curKeyMappingIndex = await localStore.get<number>("curKeyMappingIndex");
-  if (
-    curKeyMappingIndex === null ||
-    curKeyMappingIndex >= keyMappingConfigList.length
-  ) {
-    curKeyMappingIndex = 0;
-    localStore.set("curKeyMappingIndex", curKeyMappingIndex);
-  }
-  store.curKeyMappingIndex = curKeyMappingIndex;
-
-  // loading maskButton from local store
-  let maskButton = await localStore.get<{
-    show: boolean;
-    transparency: number;
-  }>("maskButton");
-  store.maskButton = maskButton ?? {
-    show: true,
-    transparency: 0.5,
-  };
-
-  // loading checkUpdateAtStart from local store
-  const checkUpdateAtStart = await localStore.get<boolean>(
-    "checkUpdateAtStart"
-  );
-  store.checkUpdateAtStart = checkUpdateAtStart ?? true;
-
-  // loading rotation from local store
-  const rotation = await localStore.get<{
-    enable: boolean;
-    verticalLength: number;
-    horizontalLength: number;
-  }>("rotation");
-  if (rotation) store.rotation = rotation;
-
-  // loading screenStream from local store
-  const screenStream = await localStore.get<{
-    enable: boolean;
-    address: string;
-  }>("screenStream");
-  if (screenStream) store.screenStream = screenStream;
+  await loadLocalStorage(localStore, store, t);
 }
 
 async function cleanAfterimage() {

src/components/setting/Basic.vue

@@ -7,6 +7,9 @@ import {
   NSelect,
   NInputGroup,
   useMessage,
+  NFlex,
+  NCheckbox,
+  NTooltip,
 } from "naive-ui";
 import { onMounted, ref } from "vue";
 import i18n from "../../i18n";
@@ -48,6 +51,10 @@ async function adjustAdbPath() {
   adbPath.value = (await localStore.get<string>("adbPath")) ?? "";
   store.hideLoading();
 }
+
+function changeClipboardSync() {
+  localStore.set("clipboardSync", store.clipboardSync);
+}
 </script>
 
 <template>
@@ -70,6 +77,27 @@ async function adjustAdbPath() {
         $t("pages.Setting.Basic.adbPath.set")
       }}</NButton>
     </NInputGroup>
+    <NH4 prefix="bar">剪切板同步</NH4>
+    <NFlex vertical>
+      <NCheckbox
+        v-model:checked="store.clipboardSync.syncFromDevice"
+        @update:checked="changeClipboardSync"
+      >
+        <NTooltip trigger="hover">
+          <template #trigger>从设备同步</template>
+          设备剪切板发生变化时自动同步更新电脑剪切板
+        </NTooltip>
+      </NCheckbox>
+      <NCheckbox
+        v-model:checked="store.clipboardSync.pasteFromPC"
+        @update:checked="changeClipboardSync"
+      >
+        <NTooltip trigger="hover">
+          <template #trigger>粘贴时同步</template>
+          在按键输入模式下，按下 Ctrl + V 可将电脑剪切板内容同步粘贴到设备
+        </NTooltip>
+      </NCheckbox>
+    </NFlex>
   </div>
 </template>
 

src/store/global.ts

@@ -100,6 +100,11 @@ export const useGlobalStore = defineStore("global", () => {
     horizontalLength: 800,
   });
 
+  const clipboardSync = ref({
+    syncFromDevice: true,
+    pasteFromPC: true,
+  });
+
   return {
     // persistent storage
     keyMappingConfigList,
@@ -109,6 +114,7 @@ export const useGlobalStore = defineStore("global", () => {
     externalControlled,
     screenStream,
     rotation,
+    clipboardSync,
     // in-memory storage
     screenStreamClientId,
     maskSizeW,

src/storeLoader.ts

@@ -0,0 +1,122 @@
+import { Store } from "@tauri-apps/plugin-store";
+import { KeyMappingConfig } from "./keyMappingConfig";
+import { useGlobalStore } from "./store/global";
+import { useI18n } from "vue-i18n";
+
+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[]>(
+    "keyMappingConfigList"
+  );
+  if (keyMappingConfigList === null || 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<{
+      posX: number;
+      posY: number;
+      sizeW: number;
+      sizeH: number;
+    }>("maskArea");
+    let relativeSize = { w: 800, h: 600 };
+    if (maskArea !== null) {
+      relativeSize = {
+        w: maskArea.sizeW,
+        h: maskArea.sizeH,
+      };
+    }
+    keyMappingConfigList = [
+      {
+        relativeSize,
+        title: t("pages.Mask.blankConfig"),
+        list: [],
+      },
+    ];
+    await localStore.set("keyMappingConfigList", keyMappingConfigList);
+  }
+  store.keyMappingConfigList = keyMappingConfigList;
+}
+
+async function loadCurKeyMappingIndex() {
+  // loading curKeyMappingIndex from local store
+  let curKeyMappingIndex = await localStore.get<number>("curKeyMappingIndex");
+  if (
+    curKeyMappingIndex === null ||
+    curKeyMappingIndex >= store.keyMappingConfigList.length
+  ) {
+    curKeyMappingIndex = 0;
+    localStore.set("curKeyMappingIndex", curKeyMappingIndex);
+  }
+  store.curKeyMappingIndex = curKeyMappingIndex;
+}
+
+async function loadMaskButton() {
+  // loading maskButton from local store
+  let maskButton = await localStore.get<{
+    show: boolean;
+    transparency: number;
+  }>("maskButton");
+  store.maskButton = maskButton ?? {
+    show: true,
+    transparency: 0.5,
+  };
+}
+
+async function loadCheckUpdateAtStart() {
+  // loading checkUpdateAtStart from local store
+  const checkUpdateAtStart = await localStore.get<boolean>(
+    "checkUpdateAtStart"
+  );
+  store.checkUpdateAtStart = checkUpdateAtStart ?? true;
+}
+
+async function loadRotation() {
+  // loading rotation from local store
+  const rotation = await localStore.get<{
+    enable: boolean;
+    verticalLength: number;
+    horizontalLength: number;
+  }>("rotation");
+  if (rotation) store.rotation = rotation;
+}
+
+async function loadScreenStream() {
+  // loading screenStream from local store
+  const screenStream = await localStore.get<{
+    enable: boolean;
+    address: string;
+  }>("screenStream");
+  if (screenStream) store.screenStream = screenStream;
+}
+
+async function loadClipboardSync() {
+  // loading clipboardSync from local store
+  const clipboardSync = await localStore.get<{
+    syncFromDevice: boolean;
+    pasteFromPC: boolean;
+  }>("clipboardSync");
+  if (clipboardSync) store.clipboardSync = clipboardSync;
+  console.log(store.clipboardSync);
+}
+
+export async function loadLocalStorage(
+  theLocalStore: Store,
+  theStore: ReturnType<typeof useGlobalStore>,
+  theT: ReturnType<typeof useI18n>["t"]
+) {
+  localStore = theLocalStore;
+  store = theStore;
+  t = theT;
+
+  await loadKeyMappingConfigList();
+  await loadCurKeyMappingIndex();
+  await loadMaskButton();
+  await loadCheckUpdateAtStart();
+  await loadRotation();
+  await loadScreenStream();
+  await loadClipboardSync();
+}