refactor(desktop): extracted hard-coded style values into enums

src/components/EmptyPage.vue

@@ -2,7 +2,7 @@
   <div
     class="empty-page right-content"
     :style="{
-      marginLeft: showConnectionList ? '341px' : '81px',
+      marginLeft: leftValue,
     }"
   >
     <div class="empty-page__block">
@@ -30,6 +30,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import gaCustomLinks from '@/utils/gaCustomLinks'
+import { LeftValues } from '@/utils/styles'
 
 @Component
 export default class EmptyPage extends Vue {
@@ -51,6 +52,10 @@ export default class EmptyPage extends Vue {
   get emqxWebsite(): string {
     return gaCustomLinks(this.getterLang).empty.EMQX
   }
+
+  get leftValue(): string {
+    return this.showConnectionList ? LeftValues.Show : LeftValues.Hide
+  }
 }
 </script>
 

src/components/SubscriptionsList.vue

@@ -5,7 +5,7 @@
       class="subscriptions-list-view"
       :style="{
         top,
-        left: showConnectionList ? '341px' : '81px',
+        left: leftValue,
       }"
     >
       <div slot="header" class="clearfix">
@@ -202,6 +202,7 @@ import useServices from '@/database/useServices'
 import time from '@/utils/time'
 import { getSubscriptionId } from '@/utils/idGenerator'
 import getContextmenuPosition from '@/utils/getContextmenuPosition'
+import { LeftValues } from '@/utils/styles'
 
 enum SubscribeErrorReason {
   normal,
@@ -272,6 +273,10 @@ export default class SubscriptionsList extends Vue {
     return defineColors
   }
 
+  get leftValue(): string {
+    return this.showConnectionList ? LeftValues.Show : LeftValues.Hide
+  }
+
   @Watch('$route.params.id')
   private handleIdChanged() {
     this.$emit('onClickTopic', this.topicActiveIndex, true)

src/utils/styles.ts

@@ -0,0 +1,19 @@
+export enum LeftValues {
+  Show = '341px',
+  Hide = '81px',
+}
+
+export enum DetailLeftValues {
+  Show = '571px',
+  Hide = '311px',
+}
+
+export enum BodyTopValues {
+  Open = '249px',
+  Close = '60px',
+}
+
+export enum MsgTopValues {
+  Open = '282px',
+  Close = '91px',
+}

src/views/connections/ConnectionForm.vue

@@ -2,13 +2,13 @@
   <div
     class="connection-form right-content card-form"
     :style="{
-      marginLeft: showConnectionList ? '341px' : '81px',
+      marginLeft: leftValue,
     }"
   >
     <div
       class="right-topbar topbar"
       :style="{
-        left: showConnectionList ? '341px' : '81px',
+        left: leftValue,
       }"
     >
       <div class="header">
@@ -596,6 +596,7 @@ import { getClientId } from '@/utils/idGenerator'
 import { getMQTTProtocol, getDefaultRecord } from '@/utils/mqttUtils'
 import Editor from '@/components/Editor.vue'
 import KeyValueEditor from '@/components/KeyValueEditor.vue'
+import { LeftValues } from '@/utils/styles'
 
 @Component({
   components: {
@@ -656,6 +657,10 @@ export default class ConnectionForm extends Vue {
     return this.$refs.form as VueForm
   }
 
+  get leftValue(): string {
+    return this.showConnectionList ? LeftValues.Show : LeftValues.Hide
+  }
+
   private async loadDetail(id: string) {
     const { connectionService } = useServices()
     const res: ConnectionModel | undefined = await connectionService.get(id)

src/views/connections/ConnectionsDetail.vue

@@ -5,7 +5,7 @@
       ref="connectionTopbar"
       class="connections-topbar right-topbar"
       :style="{
-        left: showConnectionList ? '341px' : '81px',
+        left: leftValue,
       }"
     >
       <div class="connections-info">
@@ -207,17 +207,13 @@
     <div
       class="connections-detail-main"
       :style="{
-        paddingTop: showClientInfo ? msgTop.open : msgTop.close,
+        paddingTop: msgTopValue,
         paddingBottom: `${msgBottom}px`,
-        marginLeft: showConnectionList ? '571px' : '311px',
+        marginLeft: detailLeftValue,
       }"
     >
       <div class="connections-body">
-        <div
-          ref="filterBar"
-          class="filter-bar"
-          :style="{ top: showClientInfo ? bodyTop.open : bodyTop.close, left: showConnectionList ? '571px' : '311px' }"
-        >
+        <div ref="filterBar" class="filter-bar" :style="{ top: bodyTopValue, left: detailLeftValue }">
           <div class="message-type">
             <el-select class="received-type-select" size="mini" v-model="receivedMsgType">
               <el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
@@ -233,7 +229,7 @@
           ref="subList"
           :connectionId="$route.params.id"
           :record="record"
-          :top="showClientInfo ? bodyTop.open : bodyTop.close"
+          :top="bodyTopValue"
           @onClickTopic="handleTopicClick"
           @deleteTopic="handleTopicDelete"
           @onSubError="handleSubTopicError"
@@ -260,11 +256,7 @@
         </contextmenu>
       </div>
 
-      <div
-        ref="connectionFooter"
-        class="connections-footer"
-        :style="{ marginLeft: showConnectionList ? '571px' : '311px' }"
-      >
+      <div ref="connectionFooter" class="connections-footer" :style="{ marginLeft: detailLeftValue }">
         <ResizeHeight v-model="inputHeight" />
         <MsgPublish
           :mqtt5PropsEnable="record.mqttVersion === '5.0'"
@@ -303,6 +295,7 @@ import { MqttClient, IConnackPacket, IPublishPacket, IClientPublishOptions, IDis
 import _ from 'lodash'
 import { Subject, fromEvent } from 'rxjs'
 import { bufferTime, map, filter, takeUntil } from 'rxjs/operators'
+import cbor from 'cbor'
 
 import time from '@/utils/time'
 import matchMultipleSearch from '@/utils/matchMultipleSearch'
@@ -334,7 +327,7 @@ import { getMessageId, getSubscriptionId } from '@/utils/idGenerator'
 import getContextmenuPosition from '@/utils/getContextmenuPosition'
 import { deserializeBufferToProtobuf, printObjectAsString, serializeProtobufToBuffer } from '@/utils/protobuf'
 import { jsonStringify } from '@/utils/jsonUtils'
-import cbor from 'cbor'
+import { LeftValues, BodyTopValues, MsgTopValues, DetailLeftValues } from '@/utils/styles'
 
 type CommandType =
   | 'searchContent'
@@ -476,18 +469,20 @@ export default class ConnectionsDetail extends Vue {
     return this.record.name
   }
 
-  get bodyTop(): TopModel {
-    return {
-      open: '249px',
-      close: '60px',
-    }
+  get bodyTopValue(): string {
+    return this.showClientInfo ? BodyTopValues.Open : BodyTopValues.Close
   }
 
-  get msgTop(): TopModel {
-    return {
-      open: '282px',
-      close: '91px',
-    }
+  get msgTopValue(): string {
+    return this.showClientInfo ? MsgTopValues.Open : MsgTopValues.Close
+  }
+
+  get leftValue(): string {
+    return this.showConnectionList ? LeftValues.Show : LeftValues.Hide
+  }
+
+  get detailLeftValue(): string {
+    return this.showConnectionList ? DetailLeftValues.Show : DetailLeftValues.Hide
   }
 
   get isNewWindow(): boolean {