feat(subscriptions): support disable and enable multi-topics

src/background.ts

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

src/components/SubscriptionsList.vue

@@ -94,7 +94,7 @@
           <el-col :span="24">
             <el-form-item label="Topic" prop="topic">
               <el-tooltip
-                v-if="!isEdit"
+                v-if="!isEdit && multiTopics"
                 class="subinfo-tooltip"
                 placement="top-start"
                 :effect="theme !== 'light' ? 'light' : 'dark'"
@@ -131,7 +131,7 @@
           <el-col :span="24">
             <el-form-item :label="$t('connections.alias')">
               <el-tooltip
-                v-if="!isEdit"
+                v-if="!isEdit && multiTopics"
                 class="subinfo-tooltip"
                 placement="top-start"
                 :effect="theme !== 'light' ? 'light' : 'dark'"
@@ -231,6 +231,7 @@ export default class SubscriptionsList extends Vue {
   @Action('CHANGE_SUBSCRIPTIONS') private changeSubs!: (payload: Subscriptions) => void
 
   @Getter('currentTheme') private theme!: Theme
+  @Getter('multiTopics') private multiTopics!: boolean
   @Getter('activeConnection') private activeConnection!: ActiveConnection
 
   private topicColor = ''
@@ -378,6 +379,32 @@ export default class SubscriptionsList extends Vue {
     }
   }
 
+  private saveTopicToSubList(topic: string, qos: QoS, index?: number, aliasArr?: string[]): void {
+    const existTopicIndex: number = this.subsList.findIndex((item: SubscriptionModel) => item.topic === topic)
+    if (existTopicIndex !== -1) {
+      this.subsList[existTopicIndex].qos = qos
+    } else {
+      let { topic: unuseTopic, color, alias, id, ...others } = this.subRecord
+      if (index !== undefined && aliasArr !== undefined) {
+        alias = aliasArr ? aliasArr[index] : alias
+        if (index > 0) {
+          color = getRandomColor()
+          id = getSubscriptionId()
+        }
+      } else {
+        color = getRandomColor()
+        id = getSubscriptionId()
+      }
+      this.subsList.push({
+        topic,
+        id,
+        color,
+        alias,
+        ...others,
+      })
+    }
+  }
+
   public async subscribe(
     { topic, alias, qos, nl, rap, rh, subscriptionIdentifier, disabled }: SubscriptionModel,
     isAuto?: boolean,
@@ -395,8 +422,8 @@ export default class SubscriptionsList extends Vue {
     }
     let isFinshed = false
     if (this.client.subscribe) {
-      const topicsArr = topic.split(',')
-      const aliasArr = alias?.split(',')
+      const topicsArr = this.multiTopics ? topic.split(',') : topic
+      const aliasArr = this.multiTopics ? alias?.split(',') : alias
       let properties: { subscriptionIdentifier: number } | undefined = undefined
       if (this.record.mqttVersion === '5.0' && subscriptionIdentifier) {
         properties = {
@@ -429,26 +456,13 @@ export default class SubscriptionsList extends Vue {
           this.subsList = this.setSubsDisable(topic, disabled)
           this.$log.info(`Enabled topic: ${topic}`)
         } else {
-          topicsArr.forEach((topic, index) => {
-            const existTopicIndex: number = this.subsList.findIndex((item: SubscriptionModel) => item.topic === topic)
-            if (existTopicIndex !== -1) {
-              this.subsList[existTopicIndex].qos = qos
-            } else {
-              let { topic: unuseTopic, color, alias, id, ...others } = this.subRecord
-              alias = aliasArr ? aliasArr[index] : alias
-              if (index > 0) {
-                color = getRandomColor()
-                id = getSubscriptionId()
-              }
-              this.subsList.push({
-                topic,
-                id,
-                color,
-                alias,
-                ...others,
-              })
-            }
-          })
+          if (!Array.isArray(topicsArr)) {
+            this.saveTopicToSubList(topic, qos)
+          } else {
+            topicsArr.forEach((topic, index) => {
+              this.saveTopicToSubList(topic, qos, index, aliasArr as string[])
+            })
+          }
           this.$log.info(`Saved topic: ${topic}`)
         }
         this.record.subscriptions = this.subsList

src/lang/settings.ts

@@ -118,6 +118,13 @@ export default {
     ja: '自動スクロール',
     hu: 'Automatikus görgetés',
   },
+  multiTopics: {
+    zh: '多主题订阅',
+    en: 'Multi topics subscribe',
+    tr: 'Çoklu başlık abone ol',
+    ja: '複数のトピックを購読',
+    hu: 'Több téma feliratkozás',
+  },
   autoResubDesc: {
     zh: '重连时，对连接的订阅列表进行恢复订阅，仅在 Clean Session 为 True 时有效',
     en: 'When reconnecting, the subscription list of the connection will be automatically resubscribed, which is only valid when Clean Session is True',
@@ -153,4 +160,11 @@ export default {
     ja: 'システムが切り替えると、ライトテーマとナイトテーマを自動的に切り替えます。',
     hu: 'Automatikusan válthat a Világos és az Éjszakai témák között, amikor a rendszer ezt teszi.',
   },
+  multiTopicsDesc: {
+    zh: '开启后，将支持一次订阅多个主题，使用逗号（,）分隔',
+    en: 'Enable to subscribe to multiple topics at once, separated by commas',
+    tr: 'Açık kaldığında, birden fazla konu abone olmak için bir kez abone olunabilir.',
+    ja: '複数のトピックを一度に購読することができます。コンマで区切ります。',
+    hu: 'Egy időben több témára feliratkozhat.',
+  },
 }

src/store/modules/app.ts

@@ -40,6 +40,7 @@ const app = {
     autoResub: settingData.autoResub,
     autoScroll: settingData.autoScroll,
     syncOsTheme: settingData.syncOsTheme,
+    multiTopics: settingData.multiTopics,
     maxReconnectTimes: settingData.maxReconnectTimes || 10,
     showSubscriptions: getShowSubscriptions(),
     showClientInfo: {},
@@ -50,7 +51,6 @@ const app = {
     willMessageVisible: true,
     allConnections: [],
     currentScript: null,
-    multiTopics: true,
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {
@@ -174,6 +174,12 @@ const app = {
       settingData.syncOsTheme = payload.syncOsTheme
       await settingService.update(payload)
     },
+    async TOGGLE_MULTI_TOPICS({ commit }: any, payload: App) {
+      const { settingService } = useServices()
+      commit(TOGGLE_MULTI_TOPICS, payload.multiTopics)
+      settingData.multiTopics = payload.multiTopics
+      await settingService.update(payload)
+    },
     async SET_MAX_RECONNECT_TIMES({ commit }: any, payload: App) {
       const { settingService } = useServices()
       commit(SET_MAX_RECONNECT_TIMES, payload.maxReconnectTimes)
@@ -213,9 +219,6 @@ const app = {
     async SET_SCRIPT({ commit }: any, payload: App) {
       commit(SET_SCRIPT, payload.currentScript)
     },
-    async TOGGLE_MULTI_TOPICS({ commit }: any, payload: App) {
-      commit(TOGGLE_MULTI_TOPICS, payload.multiTopics)
-    },
   },
 }
 

src/views/settings/index.vue

@@ -96,6 +96,33 @@
 
       <el-divider></el-divider>
 
+      <el-row class="settings-item" type="flex" justify="space-between">
+        <el-col :span="20">
+          <label>{{ $t('settings.multiTopics') }}</label>
+          <el-tooltip
+            placement="top"
+            :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+            :open-delay="500"
+            :content="$t('settings.multiTopicsDesc')"
+          >
+            <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="multiTopics"
+            active-color="#13ce66"
+            inactive-color="#A2A9B0"
+            @change="handleMultiTopicsSwitchChange"
+          >
+          </el-switch>
+        </el-col>
+      </el-row>
+
+      <el-divider></el-divider>
+
       <el-row class="settings-item" type="flex" justify="space-between">
         <el-col :span="20">
           <label>{{ $t('settings.maxReconnectTimes') }}</label>
@@ -248,13 +275,15 @@ export default class Settings extends Vue {
   @Action('TOGGLE_AUTO_SCROLL') private actionAutoScroll!: (payload: { autoScroll: boolean }) => void
   @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
   @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('autoScroll') private autoScroll!: boolean
+  @Getter('multiTopics') private multiTopics!: boolean
 
   private langOptions: Options[] = [
     { label: '简体中文', value: 'zh' },
@@ -301,6 +330,10 @@ export default class Settings extends Vue {
     this.actionAutoScroll({ autoScroll: value })
   }
 
+  private handleMultiTopicsSwitchChange(value: boolean) {
+    this.actionToggleMultiTopics({ multiTopics: value })
+  }
+
   private handleInputChage(value: number) {
     this.actionMaxReconnectTimes({ maxReconnectTimes: value })
   }