feat(settings): add enabled json highlight setting

src/background.ts

@@ -122,6 +122,7 @@ async function createWindow() {
       maxReconnectTimes: setting.maxReconnectTimes,
       syncOsTheme: setting.syncOsTheme,
       multiTopics: setting.multiTopics,
+      jsonHighlight: setting.jsonHighlight,
     }
   }
   // Create the browser window.

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>
 

src/database/database.config.ts

@@ -36,6 +36,8 @@ import { modifyDefaultValueOfAutoScrollInterval1668672504891 } from './migration
 import { removeAutoScroll1673603594888 } from './migration/1673603594888-removeAutoScroll'
 import { supportSchemas1688042450818 } from './migration/1688042450818-supportSchemas'
 import { saveScriptName1688449795669 } from './migration/1688449795669-saveScriptName'
+import { jsonHighlight1691071794840 } from './migration/1691071794840-jsonHighlight'
+
 const STORE_PATH = getAppDataPath('MQTTX')
 try {
   if (!fs.pathExistsSync(STORE_PATH)) {
@@ -78,6 +80,7 @@ const ORMConfig = {
     removeAutoScroll1673603594888,
     supportSchemas1688042450818,
     saveScriptName1688449795669,
+    jsonHighlight1691071794840,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [

src/database/migration/1691071794840-jsonHighlight.ts

@@ -0,0 +1,150 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class jsonHighlight1691071794840 implements MigrationInterface {
+  name = 'jsonHighlight1691071794840'
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            CREATE TABLE "temporary_SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1),
+                "jsonHighlight" boolean NOT NULL DEFAULT (1)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "syncOsTheme",
+                    "multiTopics"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "syncOsTheme",
+                "multiTopics"
+            FROM "SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "SettingEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_SettingEntity"
+                RENAME TO "SettingEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "temporary_ScriptEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "name" varchar NOT NULL,
+                "script" varchar NOT NULL,
+                "type" varchar
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_ScriptEntity"("id", "name", "script", "type")
+            SELECT "id",
+                "name",
+                "script",
+                "type"
+            FROM "ScriptEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "ScriptEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_ScriptEntity"
+                RENAME TO "ScriptEntity"
+        `)
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            ALTER TABLE "ScriptEntity"
+                RENAME TO "temporary_ScriptEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "ScriptEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "name" varchar NOT NULL,
+                "script" varchar NOT NULL,
+                "type" varchar DEFAULT (NULL)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "ScriptEntity"("id", "name", "script", "type")
+            SELECT "id",
+                "name",
+                "script",
+                "type"
+            FROM "temporary_ScriptEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_ScriptEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "SettingEntity"
+                RENAME TO "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "syncOsTheme",
+                    "multiTopics"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "syncOsTheme",
+                "multiTopics"
+            FROM "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_SettingEntity"
+        `)
+  }
+}

src/database/models/SettingEntity.ts

@@ -31,4 +31,7 @@ export default class SettingEntity {
 
   @Column({ type: 'boolean', default: true })
   multiTopics!: boolean
+
+  @Column({ type: 'boolean', default: true })
+  jsonHighlight!: boolean
 }

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.',
+  },
 }

src/store/getter.ts

@@ -15,6 +15,7 @@ const getters = {
   allConnections: (state: State) => state.app.allConnections,
   currentScript: (state: State) => state.app.currentScript,
   multiTopics: (state: State) => state.app.multiTopics,
+  jsonHighlight: (state: State) => state.app.jsonHighlight,
 }
 
 export default getters

src/store/modules/app.ts

@@ -20,6 +20,7 @@ const SET_SCRIPT = 'SET_SCRIPT'
 const SET_CURRENT_CONNECTION_ID = 'SET_CURRENT_CONNECTION_ID'
 const TOGGLE_SYNC_OS_THEME = 'TOGGLE_SYNC_OS_THEME'
 const TOGGLE_MULTI_TOPICS = 'TOGGLE_MULTI_TOPICS'
+const TOGGLE_JSON_HIGHLIGHT = 'TOGGLE_JSON_HIGHLIGHT'
 
 const getShowSubscriptions = (): boolean => {
   const $showSubscriptions: string | null = localStorage.getItem('showSubscriptions')
@@ -39,6 +40,7 @@ const app = {
     autoResub: settingData.autoResub,
     syncOsTheme: settingData.syncOsTheme,
     multiTopics: settingData.multiTopics,
+    jsonHighlight: settingData.jsonHighlight,
     maxReconnectTimes: settingData.maxReconnectTimes || 10,
     showSubscriptions: getShowSubscriptions(),
     showClientInfo: {},
@@ -72,6 +74,9 @@ const app = {
     [SET_MAX_RECONNECT_TIMES](state: App, maxReconnectTimes: number) {
       state.maxReconnectTimes = maxReconnectTimes
     },
+    [TOGGLE_JSON_HIGHLIGHT](state: App, jsonHighlight: boolean) {
+      state.jsonHighlight = jsonHighlight
+    },
     [CHANGE_ACTIVE_CONNECTION](state: App, payload: Client) {
       const { id, client } = payload
       if (state.activeConnection[id]) {
@@ -167,6 +172,12 @@ const app = {
       settingData.multiTopics = payload.multiTopics
       await settingService.update(payload)
     },
+    async TOGGLE_JSON_HIGHLIGHT({ commit }: any, payload: App) {
+      const { settingService } = useServices()
+      commit(TOGGLE_JSON_HIGHLIGHT, payload.jsonHighlight)
+      settingData.jsonHighlight = payload.jsonHighlight
+      await settingService.update(payload)
+    },
     async SET_MAX_RECONNECT_TIMES({ commit }: any, payload: App) {
       const { settingService } = useServices()
       commit(SET_MAX_RECONNECT_TIMES, payload.maxReconnectTimes)

src/types/global.d.ts

@@ -104,6 +104,7 @@ declare global {
     currentScript: ScriptState | null
     currentConnectionId: string | null
     connectionTreeState: ConnectionTreeStateMap
+    jsonHighlight: boolean
   }
 
   interface State {

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 {