feat(desktop): add auto resub tips on sub dialog

src/assets/scss/element/element-reset.scss

@@ -226,6 +226,8 @@
 .el-popper {
   background: var(--color-bg-messagebox);
   border-color: var(--color-border-default);
+  word-break: break-word;
+  color: var(--color-text-default);
   li {
     color: var(--color-text-default);
   }

src/components/SubscriptionsList.vue

@@ -77,20 +77,32 @@
       :title="isEdit ? $t('connections.editSubscription') : $t('connections.newSubscription')"
       :visible.sync="showDialog"
       :confirmLoading="subLoading"
-      :top="record.mqttVersion === '5.0' ? '60px' : '15vh'"
+      :top="record.mqttVersion === '5.0' ? '32px' : '15vh'"
       width="530px"
       class="topic-dialog"
       @confirm="saveSubs"
       @close="resetSubs"
       @keyupEnter="saveSubs"
     >
+      <el-popover
+        popper-class="sub-info-popover"
+        placement="top-start"
+        :title="autoResub ? $t('connections.enabledAutoResub') : $t('connections.disabledAutoResub')"
+        width="410"
+        trigger="hover"
+        :content="autoResub ? $t('connections.enabledAutoResubDesc') : $t('connections.disabledAutoResubDesc')"
+      >
+        <a slot="reference" href="javascript:;" class="sub-info-tooltip">
+          <i class="el-icon-warning-outline"></i>
+        </a>
+      </el-popover>
       <el-row :gutter="20">
         <el-form ref="form" :model="subRecord" :rules="rules">
           <el-col :span="24">
             <el-form-item label="Topic" prop="topic">
               <el-tooltip
                 v-if="!isEdit && multiTopics"
-                class="subinfo-tooltip"
+                class="topic-info-tooltip"
                 placement="top-start"
                 :effect="theme !== 'light' ? 'light' : 'dark'"
                 :content="$t('connections.topicTips')"
@@ -127,7 +139,7 @@
             <el-form-item :label="$t('connections.alias')">
               <el-tooltip
                 v-if="!isEdit && multiTopics"
-                class="subinfo-tooltip"
+                class="topic-info-tooltip"
                 placement="top-start"
                 :effect="theme !== 'light' ? 'light' : 'dark'"
                 :content="$t('connections.aliasTip')"
@@ -215,14 +227,15 @@ import getErrorReason from '@/utils/mqttErrorReason'
 export default class SubscriptionsList extends Vue {
   @Prop({ required: true }) public connectionId!: string
   @Prop({ required: true }) public record!: ConnectionModel
-  @Prop({ type: String, default: '60px' }) public top!: string
+  @Prop({ type: String, default: '40px' }) public top!: string
 
   @Action('CHANGE_SUBSCRIPTIONS') private changeSubs!: (payload: Subscriptions) => void
 
   @Getter('currentTheme') private theme!: Theme
   @Getter('multiTopics') private multiTopics!: boolean
   @Getter('activeConnection') private activeConnection!: ActiveConnection
   @Getter('showConnectionList') private showConnectionList!: boolean
+  @Getter('autoResub') private autoResub!: boolean
 
   private topicColor = ''
   private client: Partial<MqttClient> = {
@@ -823,13 +836,25 @@ export default class SubscriptionsList extends Vue {
   }
 }
 .topic-dialog {
+  .el-dialog__header {
+    padding-left: 44px;
+  }
   .el-dialog__body {
     padding: 20px 20px 0 20px;
     .qos-tip {
       position: absolute;
       top: 40px;
       right: 36px;
     }
+    .sub-info-tooltip {
+      font-size: 14px;
+      position: absolute;
+      top: 17px;
+      color: var(--color-text-default);
+      &:hover {
+        color: var(--color-main-green);
+      }
+    }
     .qos-select {
       .el-input .el-input__inner {
         background: transparent;
@@ -880,4 +905,9 @@ export default class SubscriptionsList extends Vue {
     border-top-color: var(--color-bg-popover) !important;
   }
 }
+.sub-info-popover {
+  .el-popover__title {
+    font-size: 14px;
+  }
+}
 </style>

src/lang/connections.ts

@@ -336,11 +336,39 @@ export default {
     hu: 'Nem lehet üzenetet küldeni az #, + karaktereket tartalmazó témákhoz',
   },
   topicTips: {
-    zh: '可订阅一个或多个主题，订阅多个主题时，请用逗号分隔（,）',
-    en: 'Subscribe to one or multiple topics, use a comma to separate multiple topics (,)',
-    tr: 'Bir veya birden fazla konuya abone olun, birden fazla konu için virgül kullanın (,)',
-    ja: '1つまたは複数のトピックを購読し、複数のトピックをカンマで区切ってください（,）。',
-    hu: 'Iratkozz fel egy vagy több témára, használj vesszőt több téma elválasztásához (,)',
+    zh: '可订阅一个或多个主题。订阅多个主题时，请用逗号（,）分隔每个主题。例如：test1,test2',
+    en: 'Subscribe to one or more topics. Use a comma (,) to separate each topic when subscribing to multiple topics. e.g. test1,test2',
+    tr: 'Bir veya birden fazla konuya abone olabilirsiniz. Birden fazla konuya abone olurken her konuyu virgülle (,) ayırın. Örneğin: test1,test2',
+    Ja: '1つまたは複数のトピックを購読できます。複数のトピックを購読する場合は、各トピックをカンマ（,）で区切ってください。例えば：test1,test2',
+    hu: 'Iratkozz fel egy vagy több témára. Több téma elválasztásához használj vesszőt (,). Például: test1,test2',
+  },
+  enabledAutoResub: {
+    zh: '已开启自动重新订阅',
+    en: 'Auto resubscription is enabled',
+    tr: 'Otomatik yeniden abonelik etkin',
+    Ja: '自動再購読が有効',
+    hu: 'Az automatikus újra feliratkozás engedélyezve',
+  },
+  disabledAutoResub: {
+    zh: '已关闭自动重新订阅',
+    en: 'Auto resubscription is disabled',
+    tr: 'Otomatik yeniden abonelik devre dışı',
+    Ja: '自動再購読が無効',
+    hu: 'Az automatikus újra feliratkozás le van tiltva',
+  },
+  enabledAutoResubDesc: {
+    zh: '开启后，MQTTX 连接后会自动重新订阅本地保存的主题，无论主题是否在 MQTT Broker 持久化。',
+    en: 'When enabled, MQTTX will automatically resubscribe to locally saved topics upon connection, regardless of their persistence in the MQTT Broker.',
+    tr: "Etkinleştirildiğinde, MQTTX bağlantı kurduğunda yerel olarak kaydedilen konulara otomatik olarak yeniden abone olur, konuların MQTT Broker'da kalıcı olup olmadığını dikkate almaz.",
+    Ja: '有効にすると、MQTTX は接続時にローカルに保存されたトピックを自動的に再購読します。トピックが MQTT Broker に永続化されているかどうかは関係ありません。',
+    hu: 'Bekapcsoláskor az MQTTX automatikusan újra feliratkozik a helyben mentett témákra a csatlakozás után, függetlenül attól, hogy ezek a témák tartósak-e az MQTT Broker-ben.',
+  },
+  disabledAutoResubDesc: {
+    zh: '关闭后，本地保存的主题是否可用取决于 MQTT Broker 是否保存了 Session。如果 Clean Session 为 true，重新连接后需手动重新订阅。',
+    en: "When disabled, the availability of locally saved topics depends on the MQTT Broker's session preservation. If Clean Session is true, manually resubscribe after reconnection.",
+    tr: "Devre dışı bırakıldığında, yerel olarak kaydedilen konuların kullanılabilirliği, MQTT Broker'ın oturumu saklayıp saklamadığına bağlıdır. Clean Session doğru ise, yeniden bağlandıktan sonra elle yeniden abone olunması gerekir.",
+    Ja: '無効にすると、ローカルに保存されたトピックは、MQTT Broker のセッション保持に依存します。Clean Session が true の場合、再接続後に手動で再購読する必要があります。',
+    hu: 'Kikapcsoláskor a helyben mentett témák elérhetősége az MQTT Broker munkamenetének megőrzésétől függ. Ha a Clean Session igaz, újracsatlakozás után kézzel kell újra feliratkozni.',
   },
   payloadReuired: {
     zh: '请输入 Payload',

src/lang/settings.ts

@@ -119,11 +119,11 @@ export default {
     hu: 'Több téma feliratkozás',
   },
   autoResubDesc: {
-    zh: '重连时，对连接的订阅列表进行恢复订阅',
-    en: 'When reconnecting, the subscription list of the connection will be automatically resubscribed',
-    tr: 'Yeniden bağlanırken, bağlantının abonelik listesi otomatik olarak yeniden abone olur',
-    ja: '再接続時に、接続のサブスクリプションリストが自動的に再購読されます',
-    hu: 'Újracsatlakozáskor az előfizetési lista automatikusan újra feliratkozik',
+    zh: '开启后，MQTTX 连接后会自动重新订阅本地保存的所有订阅',
+    en: 'Once enabled, MQTTX will automatically resubscribe to all locally saved subscriptions after connecting',
+    tr: 'Etkinleştirildiğinde, MQTTX bağlandıktan sonra yerel olarak kaydedilen tüm aboneliklere otomatik olarak yeniden abone olur',
+    ja: '有効にした後、MQTTXは接続した後にローカルに保存されたすべてのサブスクリプションに自動的に再購読します',
+    hu: 'Ha engedélyezve van, az MQTTX csatlakozás után automatikusan újra feliratkozik a helyben mentett összes előfizetésre',
   },
   cleanHistoryDialogMessage: {
     zh: '即将删除所有连接中的历史消息记录、发送端记录的发布消息、主题、保留标志及历史连接配置。确定吗？',