feat(Data): move data management to Data.vue

src/components/Device.vue

@@ -63,6 +63,17 @@ let deviceWaitForScreenSizeTask: ((w: number, h: number) => void) | null = null;
 let unlisten: UnlistenFn | undefined;
 let lastClipboard = "";
 
+// TODO 1. 窗口激活时剪切板同步到设备 2. 为剪切板同步设置两个选项
+// TODO 添加一个滑动的按键，相当于调用swipe，难点在于如何设定多个坐标点
+// 当滑动按键激活时
+// 1. 使用svg的polyline，可见gpt配合vue来渲染直线
+// 2. 并使用svg的circle单独渲染每个圆点
+// 当滑动按键激活并点开设置后
+// 1. 停止原来的按键监听，创建一个新的透明蒙版
+// 2. 在新的透明蒙版上使用svg来画线，但是用新元素来渲染每个圆点，每个圆点右上角添加删除按钮
+// 3. 每个圆点都添加点击监听来拖动
+// 4. 点击蒙版其他位置则插入新的圆点（到列表末尾）
+
 onMounted(async () => {
   unlisten = await listen("device-reply", (event) => {
     try {

src/components/setting/Basic.vue

@@ -1,23 +1,13 @@
 <script setup lang="ts">
 import { Store } from "@tauri-apps/plugin-store";
-import { Refresh, TrashBinOutline } from "@vicons/ionicons5";
 import {
   NH4,
-  NP,
   NButton,
-  NFlex,
-  NList,
-  NListItem,
-  NModal,
   NInput,
-  useDialog,
-  NCard,
-  NIcon,
   NSelect,
   NInputGroup,
   useMessage,
 } from "naive-ui";
-import { relaunch } from "@tauri-apps/plugin-process";
 import { onMounted, ref } from "vue";
 import i18n from "../../i18n";
 import { useI18n } from "vue-i18n";
@@ -28,12 +18,6 @@ const { t } = useI18n();
 const localStore = new Store("store.bin");
 const store = useGlobalStore();
 const message = useMessage();
-const dialog = useDialog();
-
-const localStoreEntries = ref<[string, unknown][]>([]);
-const showDataModal = ref(false);
-const dataModalInputVal = ref("");
-let curDataIndex = -1;
 
 const languageOptions = [
   { label: "简体中文", value: "zh-CN" },
@@ -45,52 +29,10 @@ const curLanguage = ref("en-US");
 const adbPath = ref("");
 
 onMounted(async () => {
-  refreshLocalData();
   curLanguage.value = (await localStore.get<string>("language")) ?? "en-US";
   adbPath.value = (await localStore.get<string>("adbPath")) ?? "";
 });
 
-async function refreshLocalData() {
-  localStoreEntries.value = await localStore.entries();
-}
-
-function showLocalStore(index: number) {
-  curDataIndex = index;
-  dataModalInputVal.value = JSON.stringify(
-    localStoreEntries.value[index][1],
-    null,
-    2
-  );
-  showDataModal.value = true;
-}
-
-function delLocalStore(key?: string) {
-  if (key) {
-    dialog.warning({
-      title: t("pages.Setting.Basic.delLocalStore.dialog.title"),
-      content: t("pages.Setting.Basic.delLocalStore.dialog.delKey", [key]),
-      positiveText: t("pages.Setting.Basic.delLocalStore.dialog.positiveText"),
-      negativeText: t("pages.Setting.Basic.delLocalStore.dialog.negativeText"),
-      onPositiveClick: () => {
-        localStore.delete(key);
-        localStoreEntries.value.splice(curDataIndex, 1);
-        showDataModal.value = false;
-      },
-    });
-  } else {
-    dialog.warning({
-      title: t("pages.Setting.Basic.delLocalStore.dialog.title"),
-      content: t("pages.Setting.Basic.delLocalStore.dialog.delAll"),
-      positiveText: t("pages.Setting.Basic.delLocalStore.dialog.positiveText"),
-      negativeText: t("pages.Setting.Basic.delLocalStore.dialog.negativeText"),
-      onPositiveClick: () => {
-        localStore.clear();
-        relaunch();
-      },
-    });
-  }
-}
-
 function changeLanguage(language: "zh-CN" | "en-US") {
   if (language === curLanguage.value) return;
   curLanguage.value = language;
@@ -128,72 +70,11 @@ async function adjustAdbPath() {
         $t("pages.Setting.Basic.adbPath.set")
       }}</NButton>
     </NInputGroup>
-    <NFlex justify="space-between">
-      <NH4 prefix="bar">{{ $t("pages.Setting.Basic.localStore") }}</NH4>
-      <NFlex>
-        <NButton
-          tertiary
-          circle
-          type="primary"
-          @click="delLocalStore()"
-          style="margin-right: 20px"
-        >
-          <template #icon>
-            <NIcon><TrashBinOutline /></NIcon>
-          </template>
-        </NButton>
-        <NButton
-          tertiary
-          circle
-          type="primary"
-          @click="refreshLocalData()"
-          style="margin-right: 20px"
-        >
-          <template #icon>
-            <NIcon><Refresh /></NIcon>
-          </template>
-        </NButton>
-      </NFlex>
-    </NFlex>
-    <NP>{{ $t("pages.Setting.Basic.delLocalStore.warning") }}</NP>
-    <NList class="data-list" hoverable clickable>
-      <NListItem v-for="(entrie, index) in localStoreEntries">
-        <div @click="showLocalStore(index)">
-          {{ entrie[0] }}
-        </div>
-      </NListItem>
-    </NList>
   </div>
-  <NModal v-model:show="showDataModal">
-    <NCard
-      style="width: 50%; height: 80%"
-      :title="localStoreEntries[curDataIndex][0]"
-    >
-      <NFlex vertical style="height: 100%">
-        <NInput
-          type="textarea"
-          style="flex-grow: 1"
-          :value="dataModalInputVal"
-          round
-          readonly
-        />
-        <NButton
-          type="success"
-          round
-          @click="delLocalStore(localStoreEntries[curDataIndex][0])"
-          >{{ $t("pages.Setting.Basic.delCurData") }}</NButton
-        >
-      </NFlex>
-    </NCard>
-  </NModal>
 </template>
 
 <style scoped>
 .setting-page {
   padding: 10px 25px;
-
-  .data-list {
-    margin: 20px 0;
-  }
 }
 </style>

src/components/setting/Data.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { Store } from "@tauri-apps/plugin-store";
+import { Refresh, TrashBinOutline } from "@vicons/ionicons5";
+import {
+  NH4,
+  NP,
+  NButton,
+  NFlex,
+  NList,
+  NListItem,
+  NModal,
+  NInput,
+  useDialog,
+  NCard,
+  NIcon,
+} from "naive-ui";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+const localStore = new Store("store.bin");
+const dialog = useDialog();
+
+const localStoreEntries = ref<[string, unknown][]>([]);
+const showDataModal = ref(false);
+const dataModalInputVal = ref("");
+let curDataIndex = -1;
+
+onMounted(async () => {
+  refreshLocalData();
+});
+
+async function refreshLocalData() {
+  localStoreEntries.value = await localStore.entries();
+}
+
+function showLocalStore(index: number) {
+  curDataIndex = index;
+  dataModalInputVal.value = JSON.stringify(
+    localStoreEntries.value[index][1],
+    null,
+    2
+  );
+  showDataModal.value = true;
+}
+
+function delLocalStore(key?: string) {
+  if (key) {
+    dialog.warning({
+      title: t("pages.Setting.Data.delLocalStore.dialog.title"),
+      content: t("pages.Setting.Data.delLocalStore.dialog.delKey", [key]),
+      positiveText: t("pages.Setting.Data.delLocalStore.dialog.positiveText"),
+      negativeText: t("pages.Setting.Data.delLocalStore.dialog.negativeText"),
+      onPositiveClick: () => {
+        localStore.delete(key);
+        localStoreEntries.value.splice(curDataIndex, 1);
+        showDataModal.value = false;
+      },
+    });
+  } else {
+    dialog.warning({
+      title: t("pages.Setting.Data.delLocalStore.dialog.title"),
+      content: t("pages.Setting.Data.delLocalStore.dialog.delAll"),
+      positiveText: t("pages.Setting.Data.delLocalStore.dialog.positiveText"),
+      negativeText: t("pages.Setting.Data.delLocalStore.dialog.negativeText"),
+      onPositiveClick: () => {
+        localStore.clear();
+        relaunch();
+      },
+    });
+  }
+}
+</script>
+
+<template>
+  <div class="setting-page">
+    <NFlex justify="space-between">
+      <NH4 prefix="bar">{{ $t("pages.Setting.Data.localStore") }}</NH4>
+      <NFlex>
+        <NButton
+          tertiary
+          circle
+          type="primary"
+          @click="delLocalStore()"
+          style="margin-right: 20px"
+        >
+          <template #icon>
+            <NIcon><TrashBinOutline /></NIcon>
+          </template>
+        </NButton>
+        <NButton
+          tertiary
+          circle
+          type="primary"
+          @click="refreshLocalData()"
+          style="margin-right: 20px"
+        >
+          <template #icon>
+            <NIcon><Refresh /></NIcon>
+          </template>
+        </NButton>
+      </NFlex>
+    </NFlex>
+    <NP>{{ $t("pages.Setting.Data.delLocalStore.warning") }}</NP>
+    <NList class="data-list" hoverable clickable>
+      <NListItem
+        v-for="(entrie, index) in localStoreEntries"
+        @click="showLocalStore(index)"
+      >
+        <div>
+          {{ entrie[0] }}
+        </div>
+      </NListItem>
+    </NList>
+  </div>
+  <NModal v-model:show="showDataModal">
+    <NCard
+      style="width: 50%; height: 80%"
+      :title="localStoreEntries[curDataIndex][0]"
+    >
+      <NFlex vertical style="height: 100%">
+        <NInput
+          type="textarea"
+          style="flex-grow: 1"
+          :value="dataModalInputVal"
+          round
+          readonly
+        />
+        <NButton
+          type="success"
+          round
+          @click="delLocalStore(localStoreEntries[curDataIndex][0])"
+          >{{ $t("pages.Setting.Data.delCurData") }}</NButton
+        >
+      </NFlex>
+    </NCard>
+  </NModal>
+</template>
+
+<style scoped>
+.setting-page {
+  padding: 10px 25px;
+
+  .data-list {
+    margin: 20px 0;
+  }
+}
+</style>

src/components/setting/Setting.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Basic from "./Basic.vue";
 import Mask from "./Mask.vue";
+import Data from "./Data.vue";
 import About from "./About.vue";
 import { NTabs, NTabPane, NScrollbar, NSpin } from "naive-ui";
 import { useGlobalStore } from "../../store/global";
@@ -22,6 +23,11 @@ const store = useGlobalStore();
             <Mask />
           </NScrollbar>
         </NTabPane>
+        <NTabPane :tab="$t('pages.Setting.tabs.data')" name="data">
+          <NScrollbar>
+            <Data />
+          </NScrollbar>
+        </NTabPane>
         <NTabPane :tab="$t('pages.Setting.tabs.about')" name="about">
           <NScrollbar>
             <About />

src/i18n/en-US.json

@@ -63,7 +63,8 @@
       "tabs": {
         "basic": "Basic settings",
         "mask": "Mask setting",
-        "about": "About"
+        "about": "About",
+        "data": "Data management"
       },
       "Mask": {
         "areaFormMissing": {
@@ -99,6 +100,15 @@
         }
       },
       "Basic": {
+        "language": "Language",
+        "adbPath": {
+          "placeholder": "adb path",
+          "set": "Save",
+          "setSuccess": "adb path set successfully",
+          "title": "adb path"
+        }
+      },
+      "Data": {
         "delLocalStore": {
           "dialog": {
             "title": "Warning",
@@ -109,15 +119,8 @@
           },
           "warning": "Deleting data may lead to unpredictable consequences, so please operate with caution. \nIf an exception occurs, please try clearing the data and restarting the software."
         },
-        "language": "Language",
         "localStore": "Local data",
-        "delCurData": "Delete current data",
+        "delCurData": "Delete current data"
-        "adbPath": {
-          "placeholder": "adb path",
-          "set": "Save",
-          "setSuccess": "adb path set successfully",
-          "title": "adb path"
-        }
       },
       "About": {
         "introduction": "A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping to control Android device.",

src/i18n/zh-CN.json

@@ -63,7 +63,8 @@
       "tabs": {
         "basic": "基本设置",
         "mask": "蒙版设置",
-        "about": "关于"
+        "about": "关于",
+        "data": "数据管理"
       },
       "Mask": {
         "incorrectArea": "请正确输入蒙版的坐标和尺寸",
@@ -99,6 +100,15 @@
         }
       },
       "Basic": {
+        "language": "语言",
+        "adbPath": {
+          "setSuccess": "adb 路径设置成功",
+          "title": "adb 路径",
+          "placeholder": "adb 路径",
+          "set": "设置"
+        }
+      },
+      "Data": {
         "delLocalStore": {
           "dialog": {
             "title": "警告",
@@ -109,15 +119,8 @@
           },
           "warning": "删除数据可能导致无法预料的后果，请慎重操作。若出现异常请尝试清空数据并重启软件。"
         },
-        "language": "语言",
         "localStore": "本地数据",
-        "delCurData": "删除当前数据",
+        "delCurData": "删除当前数据"
-        "adbPath": {
-          "setSuccess": "adb 路径设置成功",
-          "title": "adb 路径",
-          "placeholder": "adb 路径",
-          "set": "设置"
-        }
       },
       "About": {
         "about": "关于",