feat(web): support clearing historical data

web/src/components/ClearUpHistoryData.vue

@@ -0,0 +1,60 @@
+<template>
+  <my-dialog
+    :title="$t('connections.cleanHistoryData')"
+    :visible.sync="showDialog"
+    class="clean-data"
+    width="450px"
+    @confirm="cleanData"
+    @close="resetData"
+  >
+    <i class="el-icon-warning"></i>{{ $t('settings.cleanHistoryDialogMessage') }}
+  </my-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { cleanHistoryData } from '@/utils/api/setting'
+import MyDialog from './MyDialog.vue'
+
+@Component({
+  components: {
+    MyDialog,
+  },
+})
+export default class ClearUpHistoryData extends Vue {
+  @Prop({ default: false }) public visible!: boolean
+
+  private showDialog: boolean = this.visible
+
+  @Watch('visible')
+  private onVisibleChanged(val: boolean) {
+    this.showDialog = val
+  }
+
+  private async cleanData() {
+    cleanHistoryData()
+    this.$message.success(this.$tc('connections.cleanHistorySuccess'))
+    this.resetData()
+  }
+
+  private resetData() {
+    this.showDialog = false
+    this.$emit('update:visible', false)
+  }
+}
+</script>
+
+<style lang="scss">
+.clean-data {
+  .el-icon-warning {
+    color: var(--color-main-yellow);
+    margin-right: 5px;
+    font-size: 20px;
+  }
+  .el-dialog__body {
+    padding-bottom: 0px;
+    word-break: normal;
+    color: var(--color-text-default);
+  }
+}
+</style>

web/src/lang/connections.ts

@@ -429,4 +429,14 @@ export default {
     en: 'The Broker has actively disconnected, Reason: {reason} (Code: {reasonCode})',
     ja: 'サーバーから積極的に接続が切断されました, Reason: {reason} (Code: {reasonCode})',
   },
+  cleanHistoryData: {
+    zh: '清除历史数据',
+    en: 'Clean history data',
+    ja: 'クリーンな履歴データ',
+  },
+  cleanHistorySuccess: {
+    zh: '清除历史数据成功',
+    en: 'Clear history successfully',
+    ja: '履歴を正常にクリアする',
+  },
 }

web/src/lang/settings.ts

@@ -49,6 +49,26 @@ export default {
     en: 'Advanced',
     ja: '詳細',
   },
+  dataBackup: {
+    zh: '数据备份',
+    en: 'Data backup',
+    ja: 'データバックアップ',
+  },
+  dataRecovery: {
+    zh: '数据恢复',
+    en: 'Data recovery',
+    ja: 'データ復旧',
+  },
+  historyCleanup: {
+    zh: '清除历史数据',
+    en: 'Clear history data',
+    ja: '履歴データをクリアする',
+  },
+  cleanHistoryDialogMessage: {
+    zh: '即将删除所有连接中的历史消息记录、发送端记录的发布消息、主题、保留标志及历史连接配置。确定吗？',
+    en: 'This will delete all historical message records in connections, messages published by the sender, topics, retain flags, and past connection configurations. Confirm?',
+    ja: '接続内のすべての過去のメッセージ記録、送信者によって公開されたメッセージ、トピック、保持フラグ、および過去の接続設定を削除しようとしています。確認してください。',
+  },
   autoResub: {
     zh: '自动恢复订阅',
     en: 'Auto resubscribe',

web/src/utils/api/setting.ts

@@ -8,4 +8,11 @@ export const setSettings = (key: string, value: string | boolean | number): stri
   return db.set<string | boolean | number>(key, value)
 }
 
+export const cleanHistoryData = (): void => {
+  db.set('connections', [])
+  db.set('headersHistory', [])
+  db.set('payloadsHistory', [])
+  db.set('suggestConnections', [])
+}
+
 export default {}

web/src/views/settings/index.vue

@@ -157,14 +157,43 @@
 
       <el-divider></el-divider>
     </div>
+
+    <div class="settings-advanced">
+      <div class="settings-title">{{ $t('settings.advanced') }}</div>
+      <el-divider></el-divider>
+
+      <el-row class="settings-item" type="flex" justify="space-between" align="middle">
+        <el-col :span="20">
+          <label>{{ $t('settings.historyCleanup') }}</label>
+        </el-col>
+        <el-col :span="4">
+          <el-button
+            class="data-manager-btn"
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleCleanupHistoryData"
+          >
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+
+      <ClearUpHistoryData :visible.sync="showHistoryData" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
+import ClearUpHistoryData from '@/components/ClearUpHistoryData.vue'
 
-@Component
+@Component({
+  components: {
+    ClearUpHistoryData,
+  },
+})
 export default class Settings extends Vue {
   @Action('TOGGLE_THEME') private actionTheme!: (payload: { currentTheme: string }) => void
   @Action('TOGGLE_LANG') private actionLang!: (payload: { currentLang: string }) => void
@@ -194,6 +223,8 @@ export default class Settings extends Vue {
     { label: 'Night', value: 'night' },
   ]
 
+  private showHistoryData = false
+
   private handleSelectChange(type: 'lang' | 'theme', value: string | number | boolean): void {
     if (type === 'theme') {
       this.actionTheme({ currentTheme: value as string })
@@ -224,6 +255,10 @@ export default class Settings extends Vue {
   private handleAutoScrollIntervalChange(value: number) {
     this.actionAutoScrollInterval({ autoScrollInterval: value })
   }
+
+  private handleCleanupHistoryData() {
+    this.showHistoryData = true
+  }
 }
 </script>
 
@@ -238,7 +273,8 @@ export default class Settings extends Vue {
   user-select: none;
 
   .settings-general,
-  .settings-appearance {
+  .settings-appearance,
+  .settings-advanced {
     max-width: 836px;
     margin: 0 auto;
   }