feat(connection): add unit for connection form

emqx · Dec 8, 2021 · 8776ac3 · 8776ac3
1 parent 4fdc73e
commit 8776ac3
Showing 1 changed file with 29 additions and 19 deletions.
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
@@ -239,10 +239,7 @@
           <el-card v-show="advancedVisible" shadow="never" class="info-body item-card">
             <el-row :gutter="10">
               <el-col :span="22">
-                <el-form-item
-                  :label="`${$t('connections.connectionTimeout')} (${$t('common.unitS')})`"
-                  prop="connectTimeout"
-                >
+                <el-form-item :label="$t('connections.connectionTimeout')" prop="connectTimeout">
                   <el-input-number
                     size="mini"
                     type="number"
@@ -253,9 +250,11 @@
                   </el-input-number>
                 </el-form-item>
               </el-col>
-              <el-col :span="2"></el-col>
+              <el-col :span="2"
+                ><div class="unit">({{ $t('common.unitS') }})</div></el-col
+              >
               <el-col :span="22">
-                <el-form-item :label="`Keep Alive (${$t('common.unitS')})`" prop="keepalive">
+                <el-form-item label="Keep Alive" prop="keepalive">
                   <el-input-number
                     size="mini"
                     type="number"
@@ -266,7 +265,9 @@
                   </el-input-number>
                 </el-form-item>
               </el-col>
-              <el-col :span="2"> </el-col>
+              <el-col :span="2"
+                ><div class="unit">({{ $t('common.unitS') }})</div></el-col
+              >
               <el-col :span="22">
                 <el-form-item :label="$t('connections.cleanSession')" prop="clean">
                   <el-radio-group v-model="record.clean">
@@ -315,14 +316,14 @@
                     </el-input>
                   </el-form-item>
                 </el-col>
-                <el-col :span="2"></el-col>
+                <el-col :span="2"><div class="unit">(Byte)</div></el-col>
                 <el-col :span="22">
                   <el-form-item :label="$t('connections.maximumPacketSize')" prop="maximumPacketSize">
                     <el-input size="mini" type="number" :min="100" v-model.number="record.properties.maximumPacketSize">
                     </el-input>
                   </el-form-item>
                 </el-col>
-                <el-col :span="2"></el-col>
+                <el-col :span="2"><div class="unit">(Byte)</div></el-col>
                 <el-col :span="22">
                   <el-form-item :label="$t('connections.topicAliasMaximum')" prop="topicAliasMaximum">
                     <el-input size="mini" type="number" :min="1" v-model.number="record.properties.topicAliasMaximum">
@@ -433,7 +434,7 @@
               <template v-if="record.mqttVersion === '5.0'">
                 <el-col :span="22">
                   <el-form-item
-                    label-width="185px"
+                    label-width="175px"
                     :label="$t('connections.payloadFormatIndicator')"
                     prop="payloadFormatIndicator"
                   >
@@ -446,8 +447,8 @@
                 <el-col :span="2"></el-col>
                 <el-col :span="22">
                   <el-form-item
-                    label-width="185px"
-                    :label="`${$t('connections.willDelayInterval')}(${$t('common.unitS')})`"
+                    label-width="175px"
+                    :label="$t('connections.willDelayInterval')"
                     prop="willDelayInterval"
                   >
                     <el-input
@@ -459,11 +460,13 @@
                     </el-input>
                   </el-form-item>
                 </el-col>
-                <el-col :span="2"></el-col>
+                <el-col :span="2"
+                  ><div class="unit">({{ $t('common.unitS') }})</div></el-col
+                >
                 <el-col :span="22">
                   <el-form-item
-                    label-width="185px"
-                    :label="`${$t('connections.messageExpiryInterval')}(${$t('common.unitS')})`"
+                    label-width="175px"
+                    :label="$t('connections.messageExpiryInterval')"
                     props="messageExpiryInterval"
                   >
                     <el-input
@@ -475,11 +478,13 @@
                     </el-input>
                   </el-form-item>
                 </el-col>
-                <el-col :span="2"></el-col>
+                <el-col :span="2"
+                  ><div class="unit">({{ $t('common.unitS') }})</div></el-col
+                >
                 <el-col :span="22">
                   <el-form-item
                     class="content-type-item"
-                    label-width="185px"
+                    label-width="175px"
                     :label="$t('connections.contentType')"
                     prop="contentType"
                   >
@@ -490,7 +495,7 @@
                 <el-col :span="22">
                   <el-form-item
                     class="content-type-item"
-                    label-width="185px"
+                    label-width="175px"
                     :label="$t('connections.responseTopic')"
                     prop="responseTopic"
                   >
@@ -501,7 +506,7 @@
                 <el-col :span="22">
                   <el-form-item
                     class="content-type-item"
-                    label-width="185px"
+                    label-width="175px"
                     :label="$t('connections.correlationData')"
                     prop="correlationData"
                   >
@@ -795,6 +800,11 @@ export default class ConnectionForm extends Vue {
         color: var(--color-main-green);
       }
     }
+    .unit {
+      color: var(--color-text-default);
+      line-height: 43px;
+      font-size: 12px;
+    }
     // icon style without fake class such as `:hover` style
     .icon-oper-pure {
       color: var(--color-text-default);