emqx · ysfscream · Aug 24, 2022 · Aug 24, 2022
diff --git a/web/src/components/SubscriptionsList.vue b/web/src/components/SubscriptionsList.vue
@@ -231,9 +231,7 @@ export default class SubscriptionsList extends Vue {
   @Action('CHANGE_SUBSCRIPTIONS') private changeSubs!: (payload: Subscriptions) => void
 
   @Getter('currentTheme') private theme!: Theme
-  // TODO: support multi topics subscribe
-  // @Getter('multiTopics') private multiTopics!: boolean
-  private multiTopics = false
+  @Getter('multiTopics') private multiTopics!: boolean
   @Getter('activeConnection') private activeConnection!: ActiveConnection
 
   private topicColor = ''

diff --git a/web/src/database/index.ts b/web/src/database/index.ts
@@ -37,6 +37,7 @@ class DB {
           autoCheck: true,
           currentLang: 'en',
           currentTheme: 'light',
+          multiTopics: true,
           maxReconnectTimes: 10,
         })
         .write()

diff --git a/web/src/lang/settings.ts b/web/src/lang/settings.ts
@@ -49,4 +49,14 @@ export default {
     en: 'Advanced',
     ja: '詳細',
   },
+  multiTopics: {
+    zh: '多主题订阅',
+    en: 'Multi topics subscribe',
+    ja: '複数のトピックを購読',
+  },
+  multiTopicsDesc: {
+    zh: '开启后，将支持一次订阅多个主题，使用逗号（,）分隔',
+    en: 'Enable to subscribe to multiple topics at once, separated by commas',
+    ja: '複数のトピックを一度に購読することができます。コンマで区切ります。',
+  },
 }
diff --git a/web/src/store/getter.ts b/web/src/store/getter.ts
@@ -10,6 +10,7 @@ const getters = {
   willMessageVisible: (state: State) => state.app.willMessageVisible,
   advancedVisible: (state: State) => state.app.advancedVisible,
   allConnections: (state: State) => state.app.allConnections,
+  multiTopics: (state: State) => state.app.multiTopics,
 }
 
 export default getters
diff --git a/web/src/store/modules/app.ts b/web/src/store/modules/app.ts
@@ -14,6 +14,7 @@ const UNREAD_MESSAGE_COUNT_INCREMENT = 'UNREAD_MESSAGE_COUNT_INCREMENT'
 const TOGGLE_WILL_MESSAGE_VISIBLE = 'TOGGLE_WILL_MESSAGE_VISIBLE'
 const TOGGLE_ADVANCED_VISIBLE = 'TOGGLE_ADVANCED_VISIBLE'
 const CHANGE_ALL_CONNECTIONS = 'CHANGE_ALL_CONNECTIONS'
+const TOGGLE_MULTI_TOPICS = 'TOGGLE_MULTI_TOPICS'
 
 const stateRecord: App = loadSettings()
 
@@ -30,6 +31,7 @@ const app = {
     currentTheme: stateRecord.currentTheme || 'light',
     currentLang: stateRecord.currentLang || 'en',
     autoCheck: stateRecord.autoCheck,
+    multiTopics: stateRecord.multiTopics,
     maxReconnectTimes: stateRecord.maxReconnectTimes || 10,
     showSubscriptions: getShowSubscriptions(),
     showClientInfo: {},
@@ -49,6 +51,9 @@ const app = {
     [TOGGLE_AUTO_CHECK](state: App, autoCheck: boolean) {
       state.autoCheck = autoCheck
     },
+    [TOGGLE_MULTI_TOPICS](state: App, multiTopics: boolean) {
+      state.multiTopics = multiTopics
+    },
     [SET_MAX_RECONNECT_TIMES](state: App, maxReconnectTimes: number) {
       state.maxReconnectTimes = maxReconnectTimes
     },
@@ -118,6 +123,10 @@ const app = {
       setSettings('settings.autoCheck', payload.autoCheck)
       commit(TOGGLE_AUTO_CHECK, payload.autoCheck)
     },
+    TOGGLE_MULTI_TOPICS({ commit }: any, payload: App) {
+      setSettings('settings.multiTopics', payload.multiTopics)
+      commit(TOGGLE_MULTI_TOPICS, payload.multiTopics)
+    },
     SET_MAX_RECONNECT_TIMES({ commit }: any, payload: App) {
       setSettings('settings.maxReconnectTimes', payload.maxReconnectTimes)
       commit(SET_MAX_RECONNECT_TIMES, payload.maxReconnectTimes)

diff --git a/web/src/types/global.d.ts b/web/src/types/global.d.ts
@@ -115,6 +115,7 @@ declare global {
     currentLang: Language
     autoCheck: boolean
     showSubscriptions: boolean
+    multiTopics: boolean
     maxReconnectTimes: number
     showClientInfo: {
       [id: string]: boolean

diff --git a/web/src/views/settings/index.vue b/web/src/views/settings/index.vue
@@ -25,6 +25,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>
@@ -74,9 +101,11 @@ export default class Settings extends Vue {
   @Action('TOGGLE_THEME') private actionTheme!: (payload: { currentTheme: string }) => void
   @Action('TOGGLE_LANG') private actionLang!: (payload: { currentLang: string }) => 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 getterTheme!: 'light' | 'dark' | 'night'
   @Getter('currentLang') private getterLang!: Language
   @Getter('maxReconnectTimes') private getterMaxReconnectTimes!: number
+  @Getter('multiTopics') private multiTopics!: boolean
 
   private currentTheme: 'light' | 'dark' | 'night' = 'light'
   private currentLang: Language = 'en'
@@ -103,6 +132,10 @@ export default class Settings extends Vue {
     }
   }
 
+  private handleMultiTopicsSwitchChange(value: boolean) {
+    this.actionToggleMultiTopics({ multiTopics: value })
+  }
+
   private handleInputChage(value: number) {
     this.actionMaxReconnectTimes({ maxReconnectTimes: value })
   }
@@ -133,6 +166,10 @@ export default class Settings extends Vue {
 
   .settings-general {
     margin-top: 30px;
+  }
+
+  [class$='general'],
+  [class$='appearance'] {
     margin-bottom: 80px;
   }
 
@@ -151,7 +188,8 @@ export default class Settings extends Vue {
     }
   }
 
-  .el-col-4 {
+  .el-col-4,
+  .el-col-6 {
     text-align: right;
   }
 
@@ -174,13 +212,29 @@ export default class Settings extends Vue {
 
   .el-input-number__increase,
   .el-input-number__decrease {
-    background: var(--color-bg-input_btn);
+    background: transparent;
   }
   .el-input-number__decrease {
     border-right: 1px solid var(--color-border-default);
   }
   .el-input-number__increase {
     border-left: 1px solid var(--color-border-default);
   }
+  .el-input-number--mini .el-input__inner {
+    text-align: center;
+  }
+
+  i {
+    font-size: 16px;
+  }
+  .data-manager-btn {
+    width: 90px;
+  }
+  .icon-oper {
+    position: relative;
+    top: 1px;
+    left: 5px;
+    color: var(--color-text-default);
+  }
 }
 </style>