feat(setting): add local data manager

src/components/keyboard/KeyBoard.vue

@@ -18,8 +18,6 @@ import { DropdownOption, NDropdown, useDialog, useMessage } from "naive-ui";
 import { onBeforeRouteLeave } from "vue-router";
 import { useKeyboardStore } from "../../store/keyboard";
 
-// TODO 缺少pointer_id的编辑，注意所有按键包括技能取消都有这个内容
-// TODO 设置界面添加本地数据编辑器（类似utools）
 // TODO 添加开发者工具打开按钮
 // TODO 添加息屏按键
 // TODO 添加无线调试（rust加一条指令connet即可）

src/components/keyboard/KeySetting.vue

@@ -421,7 +421,7 @@ function resetKeyMappingConfig() {
     <NP style="margin-top: 40px">提示：右键空白区域可添加按键</NP>
   </div>
   <NModal v-model:show="showImportModal">
-    <NCard style="width: 40%; height: 50%" title="导入按键方案">
+    <NCard style="width: 40%; height: 50%">
       <NFlex vertical style="height: 100%">
         <NInput
           type="textarea"

src/components/setting/Basic.vue

@@ -1,20 +1,142 @@
 <script setup lang="ts">
 import { Store } from "@tauri-apps/plugin-store";
-import { NH4, NForm, FormInst, NButton } from "naive-ui";
+import { Refresh, TrashBinOutline } from "@vicons/ionicons5";
+import {
+  NH4,
+  NP,
+  NButton,
+  NFlex,
+  NList,
+  NListItem,
+  NModal,
+  NInput,
+  useDialog,
+  NCard,
+  NIcon,
+} from "naive-ui";
 
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 
-const formRef = ref<FormInst | null>(null);
 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(() => {
+  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: "Warning",
+      content: `即将删除数据"${key}"，删除操作不可撤回，是否继续？`,
+      positiveText: "删除",
+      negativeText: "取消",
+      onPositiveClick: () => {
+        localStore.delete(key);
+        localStoreEntries.value.splice(curDataIndex, 1);
+        showDataModal.value = false;
+      },
+    });
+  } else {
+    dialog.warning({
+      title: "Warning",
+      content: "即将清空数据，操作不可撤回，且清空后将重启软件，是否继续？",
+      positiveText: "删除",
+      negativeText: "取消",
+      onPositiveClick: () => {
+        localStore.clear();
+      },
+    });
+  }
+}
 </script>
 
 <template>
   <div class="setting-page">
-    <NForm ref="formRef" label-placement="left">
-      <NH4 prefix="bar">客户端相关</NH4>
-      <NButton @click="localStore.clear()">清除数据</NButton>
-    </NForm>
+    <NFlex justify="space-between">
+      <NH4 prefix="bar">本地数据</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
+      >删除数据可能导致无法预料的后果，请慎重操作。若出现异常请尝试清空数据并重启软件。</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="卡片">
+      <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])"
+          >删除当前数据</NButton
+        >
+      </NFlex>
+    </NCard>
+  </NModal>
 </template>
 
-<style scoped></style>
+<style scoped>
+.setting-page {
+  padding: 10px 25px;
+
+  .data-list {
+    margin: 20px 0;
+  }
+}
+</style>