From aa4e83937a950b7c2757c559b2012e8deea0d954 Mon Sep 17 00:00:00 2001
From: kerms <kerms@niazo.org>
Date: Wed, 31 Jul 2024 20:36:43 +0800
Subject: [PATCH] feat(uart) import and export settings

---
 src/views/text-data-viewer/textDataMacro.vue | 231 ++++++++++++++++++-
 1 file changed, 229 insertions(+), 2 deletions(-)

diff --git a/src/views/text-data-viewer/textDataMacro.vue b/src/views/text-data-viewer/textDataMacro.vue
index a37decd..94b8728 100644
--- a/src/views/text-data-viewer/textDataMacro.vue
+++ b/src/views/text-data-viewer/textDataMacro.vue
@@ -1,6 +1,19 @@
 <template>
-  <div class="flex items-center mb-2">
-    <el-button class="mr-2" type="primary" @click="() => {
+  <div class="flex items-center mb-2 flex-wrap gap-2">
+    <el-button type="primary" @click="importSettings">导入</el-button>
+    <el-button type="warning" @click="exportSettings">导出</el-button>
+
+    <el-tooltip
+        effect="light"
+        placement="top"
+    >
+      <template #content>
+        <p>刷新页面后生效</p>
+      </template>
+      <el-button type="info" @click="resetSettings">重置</el-button>
+    </el-tooltip>
+  </div>
+
   <div class="flex items-center mb-2 flex-wrap gap-2">
     <el-button type="primary" @click="() => {
     macroData.push({
@@ -112,6 +125,220 @@ function onSendClick(val: string) {
   }
 }
 
+interface DataViewerState {
+  macroButtons: any; // Specify more precise types
+  configTab: string;
+  showText: boolean;
+  showHex: boolean;
+  showHexdump: boolean;
+  showTimestamp: boolean;
+  lineWrap: boolean;
+  RxHexdumpColor: string;
+  TxHexdumpColor: string;
+  frameBreakSequence: string;
+  frameBreakAfterSequence: boolean;
+  frameBreakDelay: number;
+  frameBreakSize: number;
+  frameBreak: any[]; // Specify more precise types
+  decodeANSI: boolean;
+  frameFilterValue: string;
+  autoUpdate: boolean;
+  updateInterval: number;
+  sendFramePrefix: string;
+  sendFrameSuffix: string;
+  loopSendInterval: number;
+  sendBoxIsText: boolean;
+  sendBox: string;
+  winLeft: any;
+  winRight: any;
+  winAutoLayout: boolean;
+  winLayoutMode: string;
+}
+
+
+function isKeyOfDataViewerState(key: any): key is keyof DataViewerState {
+  return key in useDataViewerStore().$state;
+}
+
+function importSettings() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'application/json';
+
+  input.onchange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (!target.files) return;
+    const file = target.files[0];
+
+    const reader = new FileReader();
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      const text = e.target?.result;
+      if (typeof text !== 'string') return;
+
+      try {
+        const data = JSON.parse(text) as Partial<DataViewerState>;
+
+
+        if (data.macroButtons) {
+          macroData.value = data.macroButtons;
+        }
+        if (data.configTab) {
+          viewerStore.configPanelTab = data.configTab;
+        }
+        if (data.showText) {
+          viewerStore.showText = data.showText;
+        }
+        if (data.showHex) {
+          viewerStore.showHex = data.showHex;
+        }
+        if (data.showHexdump) {
+          viewerStore.showHexdump = data.showHexdump;
+        }
+        if (data.showTimestamp) {
+          viewerStore.showTimestamp = data.showTimestamp;
+        }
+        if (data.lineWrap) {
+          viewerStore.enableLineWrap = data.lineWrap;
+        }
+        if (data.RxHexdumpColor) {
+          viewerStore.RxHexdumpColor = data.RxHexdumpColor;
+        }
+        if (data.TxHexdumpColor) {
+          viewerStore.TxHexdumpColor = data.TxHexdumpColor;
+        }
+        if (data.frameBreakSequence) {
+          viewerStore.frameBreakSequence = data.frameBreakSequence;
+        }
+        if (data.frameBreakAfterSequence) {
+          viewerStore.frameBreakAfterSequence = data.frameBreakAfterSequence;
+        }
+        if (data.frameBreakDelay) {
+          viewerStore.frameBreakDelay = data.frameBreakDelay;
+        }
+        if (data.frameBreakSize) {
+          viewerStore.frameBreakSize = data.frameBreakSize;
+        }
+
+        if (data.frameBreak) {
+          viewerStore.frameBreakRules = data.frameBreak;
+        }
+        if (data.decodeANSI) {
+          viewerStore.enableAnsiDecode = data.decodeANSI;
+        }
+        if (data.frameFilterValue) {
+          viewerStore.filterValue = data.frameFilterValue;
+        }
+        if (data.autoUpdate) {
+          viewerStore.dataFilterAutoUpdate = data.autoUpdate;
+        }
+        if (data.updateInterval) {
+          viewerStore.batchUpdateTime = data.updateInterval;
+        }
+
+        if (data.sendFramePrefix) {
+          viewerStore.textPrefixValue = data.sendFramePrefix;
+        }
+        if (data.sendFrameSuffix) {
+          viewerStore.textSuffixValue = data.sendFrameSuffix;
+        }
+
+        if (data.loopSendInterval) {
+          viewerStore.loopSendFreq = data.loopSendInterval;
+        }
+        if (data.sendBoxIsText) {
+          viewerStore.isSendTextFormat = data.sendBoxIsText;
+        }
+        if (data.sendBox) {
+          viewerStore.uartInputTextBox = data.sendBox;
+        }
+
+        if (data.winLeft) {
+          viewerStore.winLeft = data.winLeft;
+        }
+        if (data.winRight) {
+          viewerStore.winRight = data.winRight;
+        }
+        if (data.winAutoLayout !== undefined) {
+          viewerStore.winAutoLayout = data.winAutoLayout;
+        }
+        if (data.winLayoutMode) {
+          viewerStore.winLayoutMode = data.winLayoutMode;
+        }
+
+        viewerStore.reloadFrameBreak();
+        emit('winSizeRefresh', '');
+      } catch (error) {
+        globalNotifyRightSide('导入失败', "error");
+        console.log("error", error);
+      }
+    };
+
+    reader.readAsText(file);
+  };
+
+  input.click();
+}
+
+const viewerStore = useDataViewerStore();
+
+function exportSettings() {
+  let obj = {
+    version: "v0.1.0",
+
+    /* Macro Window */
+    macroButtons: macroData.value,
+
+    /* Config Window */
+    configTab: viewerStore.configPanelTab,
+    showText: viewerStore.showText,
+    showHex: viewerStore.showHex,
+    showHexdump: viewerStore.showHexdump,
+    showTimestamp: viewerStore.showTimestamp,
+    lineWrap: viewerStore.enableLineWrap,
+    RxHexdumpColor: viewerStore.RxHexdumpColor,
+    TxHexdumpColor: viewerStore.TxHexdumpColor,
+    frameBreak: viewerStore.frameBreakRules,
+    frameBreakSequence: viewerStore.frameBreakSequence,
+    frameBreakAfterSequence: viewerStore.frameBreakAfterSequence,
+    frameBreakDelay: viewerStore.frameBreakDelay,
+    frameBreakSize: viewerStore.frameBreakSize,
+
+    decodeANSI: viewerStore.enableAnsiDecode,
+    frameFilterValue: viewerStore.filterValue,
+    autoUpdate: viewerStore.dataFilterAutoUpdate,
+    updateInterval: viewerStore.batchUpdateTime,
+
+    sendFramePrefix: viewerStore.textPrefixValue,
+    sendFrameSuffix: viewerStore.textSuffixValue,
+
+    /* Viewer Window */
+    loopSendInterval: viewerStore.loopSendFreq,
+    sendBoxIsText: viewerStore.isSendTextFormat,
+    sendBox: viewerStore.uartInputTextBox,
+
+    /* layout settings */
+    winLeft: viewerStore.winLeft,
+    winRight: viewerStore.winRight,
+    winAutoLayout: viewerStore.winAutoLayout,
+    winLayoutMode: viewerStore.winLayoutMode,
+  };
+
+  const dataStr = JSON.stringify(obj, null, 2);
+  const blob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = "settingsBackup.json";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+function resetSettings() {
+  localStorage.clear();
+}
+
 </script>