feat(settings): support json highlight option

emqx · Aug 4, 2023 · b18f6c6 · b18f6c6
1 parent d1acaea
commit b18f6c6
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
@@ -70,6 +70,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import KeyValueEditor from './KeyValueEditor.vue'
 import Prism from 'prismjs'
+import { Getter } from 'vuex-class'
 
 @Component({
   components: {
@@ -85,6 +86,9 @@ export default class MsgLeftItem extends Vue {
   @Prop({ required: false, default: false }) public retain!: boolean
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
   @Prop({ required: false, default: '' }) public color!: string
+
+  @Getter('jsonHighlight') private jsonHighlight!: boolean
+
   public hightlight: boolean = false
 
   public customMenu(event: MouseEvent) {
@@ -118,7 +122,10 @@ export default class MsgLeftItem extends Vue {
     return this.meta ? JSON.parse(this.meta).msgError : null
   }
 
-  private mounted() {
+  private hightlightJSON() {
+    if (this.jsonHighlight === false) {
+      return
+    }
     try {
       if (this.payload && this.msgType === 'JSON' && !this.msgError) {
         this.hightlight = true
@@ -130,6 +137,10 @@ export default class MsgLeftItem extends Vue {
       this.hightlight = false
     }
   }
+
+  private mounted() {
+    this.hightlightJSON()
+  }
 }
 </script>
 

diff --git a/src/lang/settings.ts b/src/lang/settings.ts
@@ -153,4 +153,18 @@ export default {
     ja: '複数のトピックを一度に購読することができます。コンマで区切ります。',
     hu: 'Egy időben több témára feliratkozhat.',
   },
+  jsonHighlight: {
+    zh: 'JSON 数据高亮',
+    en: 'JSON Highlighting',
+    tr: 'JSON Highlighting',
+    ja: 'JSONハイライト',
+    hu: 'JSON Kiemelés',
+  },
+  jsonHighlightDesc: {
+    zh: '启用此选项后，将对接收到的 JSON 格式的 Payload 数据进行实时高亮显示。<br/>注意：这可能影响应用的性能。如果你在使用时遇到性能问题，可以尝试关闭这个选项。',
+    en: "Highlight received payload data in real-time with JSON format. <br/>Enabling this feature may affect the application's performance, so consider turning it off if you experience performance issues.",
+    tr: 'Bu özelliği etkinleştirerek, JSON formatındaki alınan yük verilerini gerçek zamanlı olarak vurgulayabilirsiniz. <br/>Not: Bu, uygulamanın performansını etkileyebilir. Performans sorunları yaşıyorsanız, bu özelliği devre dışı bırakmayı düşünün.',
+    ja: 'この機能を有効にすると、リアルタイムで受信したJSON形式のPayloadデータをハイライト表示します。<br/>注意：これによりアプリケーションのパフォーマンスが影響を受ける可能性があります。パフォーマンスに問題がある場合は、この機能を無効にすることを検討してください。',
+    hu: 'Engedélyezze ezt a funkciót, hogy a JSON formátumú, fogadott terhelési adatokat valós időben kiemelje. <br/>Megjegyzés: Ez befolyásolhatja az alkalmazás teljesítményét. Ha teljesítményproblémákat tapasztal, fontolja meg ennek a funkcióknak a letiltását.',
+  },
 }
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
@@ -165,6 +165,29 @@
       </el-row>
 
       <el-divider></el-divider>
+
+      <el-row class="settings-item" type="flex" justify="space-between">
+        <el-col :span="20">
+          <label>{{ $t('settings.jsonHighlight') }}</label>
+          <el-tooltip placement="top" :effect="currentTheme !== 'light' ? 'light' : 'dark'" :open-delay="500">
+            <div slot="content" v-html="$t('settings.jsonHighlightDesc')"></div>
+            <a href="javascript:;" class="icon-oper">
+              <i class="el-icon-warning-outline"></i>
+            </a>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="4">
+          <el-switch
+            :value="jsonHighlight"
+            active-color="#13ce66"
+            inactive-color="#A2A9B0"
+            @change="handleJsonHighlightSwitchChange"
+          >
+          </el-switch>
+        </el-col>
+      </el-row>
+
+      <el-divider></el-divider>
     </div>
 
     <div class="settings-advanced">
@@ -248,13 +271,16 @@ export default class Settings extends Vue {
   @Action('TOGGLE_SYNC_OS_THEME') private actionSyncOsTheme!: (payload: { syncOsTheme: boolean }) => void
   @Action('SET_MAX_RECONNECT_TIMES') private actionMaxReconnectTimes!: (payload: { maxReconnectTimes: number }) => void
   @Action('TOGGLE_MULTI_TOPICS') private actionToggleMultiTopics!: (payload: { multiTopics: boolean }) => void
+  @Action('TOGGLE_JSON_HIGHLIGHT') private actionToggleJsonHighlight!: (payload: { jsonHighlight: boolean }) => void
+
   @Getter('currentTheme') private currentTheme!: Theme
   @Getter('currentLang') private currentLang!: Language
   @Getter('autoCheck') private autoCheck!: boolean
   @Getter('autoResub') private autoResub!: boolean
   @Getter('syncOsTheme') private syncOsTheme!: boolean
   @Getter('maxReconnectTimes') private maxReconnectTimes!: number
   @Getter('multiTopics') private multiTopics!: boolean
+  @Getter('jsonHighlight') private jsonHighlight!: boolean
 
   private langOptions: Options[] = [
     { label: '简体中文', value: 'zh' },
@@ -305,6 +331,10 @@ export default class Settings extends Vue {
     this.actionMaxReconnectTimes({ maxReconnectTimes: value })
   }
 
+  private handleJsonHighlightSwitchChange(value: boolean) {
+    this.actionToggleJsonHighlight({ jsonHighlight: value })
+  }
+
   private handleImportData() {
     this.showImportData = true
   }
@@ -335,7 +365,7 @@ export default class Settings extends Vue {
 
   [class$='general'],
   [class$='appearance'] {
-    margin-bottom: 80px;
+    margin-bottom: 56px;
   }
 
   .el-divider--horizontal {