From 35b982930d2201e0d006c93495e2ea91344c715a Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Thu, 14 Sep 2023 16:07:13 +0800
Subject: [PATCH 1/2] refactor(publish): optimize publish options UI

---
 src/components/MsgPublish.vue               | 23 ++++++++-----
 src/lang/connections.ts                     | 17 +++++++---
 src/utils/element.ts                        |  4 +--
 src/views/connections/ConnectionsDetail.vue | 37 ++++++++++-----------
 web/src/components/MsgPublish.vue           |  4 +--
 5 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
index 77a920cdf..edbdd7ac3 100644
--- a/src/components/MsgPublish.vue
+++ b/src/components/MsgPublish.vue
@@ -88,18 +88,18 @@
     </div>
     <div class="publish-header">
       <div class="publish-metadata">
-        <span class="publish-label">Payload: </span>
         <el-select class="payload-select" size="mini" v-model="payloadType">
-          <el-option v-for="(type, index) in payloadOptions" :key="index" :value="type"> </el-option>
+          <el-option-group :label="$t('connections.publishPayloadEncodedBy')">
+            <el-option v-for="(type, index) in payloadOptions" :key="index" :label="type" :value="type"> </el-option>
+          </el-option-group>
         </el-select>
-        <span class="publish-label">QoS: </span>
         <el-select class="qos-select" size="mini" v-model="msgRecord.qos">
-          <el-option v-for="qos in [0, 1, 2]" :key="qos" :label="qos" :value="qos">
+          <el-option v-for="qos in [0, 1, 2]" :key="qos" :label="`QoS ${qos}`" :value="qos">
             <span style="float: left">{{ qos }}</span>
             <span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
           </el-option>
         </el-select>
-        <el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
+        <el-checkbox class="retain-checkbox" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
         <el-tooltip
           placement="top"
           :disabled="mqtt5PropsEnable"
@@ -683,8 +683,9 @@ export default class MsgPublish extends Vue {
   }
   .publish-metadata {
     background: var(--color-bg-normal);
-    padding: 0 16px;
+    padding: 0 13px;
     margin-top: 6px;
+    margin-bottom: 2px;
     .el-input__inner {
       padding: 4px 10px;
     }
@@ -697,10 +698,16 @@ export default class MsgPublish extends Vue {
       margin-right: 8px;
     }
     .qos-select {
-      width: 46px;
+      width: 76px;
     }
-    .retain-block {
+    .retain-checkbox {
       margin-left: 8px;
+      .el-checkbox__input {
+        line-height: 1px;
+      }
+      .el-checkbox__label {
+        padding-left: 8px;
+      }
     }
     .meta-block {
       margin-left: 6px;
diff --git a/src/lang/connections.ts b/src/lang/connections.ts
index 38f3146b4..a11a88cb8 100644
--- a/src/lang/connections.ts
+++ b/src/lang/connections.ts
@@ -497,11 +497,18 @@ export default {
     hu: 'Fogadott üzenet',
   },
   receivedPayloadDecodedBy: {
-    zh: '接收到的 Payload 通过编码格式输出',
-    en: 'Received Payload is output by encoding format',
-    tr: 'Alınan Payload, kodlama biçimiyle çıkarılır',
-    ja: '受信したペイロードは、エンコード形式で出力されます',
-    hu: 'A fogadott Payload kódolási formátum szerint',
+    zh: '使用以下格式编码接收到的 Payload',
+    en: 'Format Received Payload by',
+    tr: 'Alınan Payload’ı şununla biçimlendir: ',
+    ja: '以下の方式で受信 Payload をフォーマット: ',
+    hu: 'Fogadott Payload formázása e szerint: ',
+  },
+  publishPayloadEncodedBy: {
+    zh: '使用以下格式编码要发布的 Payload',
+    en: 'Format Payload to Publish by',
+    tr: 'Yayınlamak için Payload’ı şununla biçimlendir: ',
+    ja: '以下の方式で公開用 Payload をフォーマット: ',
+    hu: 'A közzétételre szánt Payload formázása e szerint: ',
   },
   alias: {
     zh: '别名',
diff --git a/src/utils/element.ts b/src/utils/element.ts
index d3f5e5006..ae639aa86 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -27,7 +27,7 @@ import {
   Switch,
   Select,
   Option,
-  // OptionGroup,
+  OptionGroup,
   Button,
   // ButtonGroup,
   // Table,
@@ -100,7 +100,7 @@ export default (Vue: typeof _Vue) => {
   Vue.use(Switch)
   Vue.use(Select)
   Vue.use(Option)
-  // Vue.use(OptionGroup)
+  Vue.use(OptionGroup)
   Vue.use(Button)
   // Vue.use(ButtonGroup)
   // Vue.use(Table)
diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
index 4c6469b37..ae84ab7bd 100644
--- a/src/views/connections/ConnectionsDetail.vue
+++ b/src/views/connections/ConnectionsDetail.vue
@@ -202,18 +202,11 @@
             </a>
           </span>
           <div class="message-type">
-            <el-tooltip
-              placement="top"
-              :effect="theme !== 'light' ? 'light' : 'dark'"
-              :open-delay="500"
-              :content="$t('connections.receivedPayloadDecodedBy')"
-            >
-              <a href="javascript:;" class="icon-tip">
-                <i class="el-icon-question"></i>
-              </a>
-            </el-tooltip>
-            <el-select class="received-type-select" size="small" v-model="receivedMsgType">
-              <el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type"> </el-option>
+            <el-select class="received-type-select" size="mini" v-model="receivedMsgType">
+              <el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
+                <el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type">
+                </el-option>
+              </el-option-group>
             </el-select>
             <MsgTypeTabs v-model="msgType" @change="handleMsgTypeChanged" />
           </div>
@@ -429,7 +422,7 @@ export default class ConnectionsDetail extends Vue {
   }
 
   private retryTimes = 0
-  private inputHeight = 160
+  private inputHeight = 180
   private msgBottom = 166
   private messageListHeight: number = 284
   private messageListMarginTop: number = 19
@@ -1932,10 +1925,6 @@ export default class ConnectionsDetail extends Vue {
         right: 0;
         z-index: 1;
         transition: all 0.4s;
-        .el-input .el-input__inner {
-          border: none;
-          color: var(--color-main-green);
-        }
         .subs-title {
           color: var(--color-text-title);
           position: absolute;
@@ -1954,8 +1943,11 @@ export default class ConnectionsDetail extends Vue {
         .message-type {
           @include flex-space-between;
           .received-type-select {
-            width: 95px;
-            margin-left: 245px;
+            width: 88px;
+            margin-left: 227px;
+            .el-input__inner {
+              padding: 4px 10px;
+            }
           }
           .icon-tip {
             position: absolute;
@@ -2016,4 +2008,11 @@ export default class ConnectionsDetail extends Vue {
     }
   }
 }
+.el-select-group__title {
+  padding-right: 20px;
+  color: var(--color-text-light) !important;
+  font-size: 13px;
+  height: 34px;
+  border-bottom: 1px solid var(--color-border-default);
+}
 </style>
diff --git a/web/src/components/MsgPublish.vue b/web/src/components/MsgPublish.vue
index 6819151b2..4cb0232b1 100644
--- a/web/src/components/MsgPublish.vue
+++ b/web/src/components/MsgPublish.vue
@@ -100,7 +100,7 @@
             <span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
           </el-option>
         </el-select>
-        <el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
+        <el-checkbox class="retain-checkbox" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
         <el-tooltip
           placement="top"
           :disabled="mqtt5PropsEnable"
@@ -602,7 +602,7 @@ export default class MsgPublish extends Vue {
     .qos-select {
       width: 46px;
     }
-    .retain-block {
+    .retain-checkbox {
       margin-left: 8px;
     }
     .meta-block {

From 54b40f97a9022024592819d085d4d1d5913c4dd1 Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Thu, 14 Sep 2023 16:45:07 +0800
Subject: [PATCH 2/2] refactor(web-publish): optimize publish options UI

---
 web/src/components/MsgPublish.vue             | 19 +++++++---
 web/src/components/SubscriptionsList.vue      | 10 ++---
 web/src/lang/connections.ts                   | 11 ++++--
 web/src/utils/element.ts                      |  4 +-
 .../views/connections/ConnectionsDetail.vue   | 37 +++++++++----------
 5 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/web/src/components/MsgPublish.vue b/web/src/components/MsgPublish.vue
index 4cb0232b1..ffac6b99c 100644
--- a/web/src/components/MsgPublish.vue
+++ b/web/src/components/MsgPublish.vue
@@ -89,13 +89,13 @@
     </div>
     <div class="publish-header">
       <div class="publish-metadata">
-        <span class="publish-label">Payload: </span>
         <el-select class="payload-select" size="mini" v-model="payloadType">
-          <el-option v-for="(type, index) in payloadOptions" :key="index" :value="type"> </el-option>
+          <el-option-group :label="$t('connections.publishPayloadEncodedBy')">
+            <el-option v-for="(type, index) in payloadOptions" :key="index" :label="type" :value="type"> </el-option>
+          </el-option-group>
         </el-select>
-        <span class="publish-label">QoS: </span>
         <el-select class="qos-select" size="mini" v-model="msgRecord.qos">
-          <el-option v-for="qos in [0, 1, 2]" :key="qos" :label="qos" :value="qos">
+          <el-option v-for="qos in [0, 1, 2]" :key="qos" :label="`QoS ${qos}`" :value="qos">
             <span style="float: left">{{ qos }}</span>
             <span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
           </el-option>
@@ -586,8 +586,9 @@ export default class MsgPublish extends Vue {
   }
   .publish-metadata {
     background: var(--color-bg-normal);
-    padding: 0 16px;
+    padding: 0 13px;
     margin-top: 6px;
+    margin-bottom: 2px;
     .el-input__inner {
       padding: 4px 10px;
     }
@@ -600,10 +601,16 @@ export default class MsgPublish extends Vue {
       margin-right: 8px;
     }
     .qos-select {
-      width: 46px;
+      width: 76px;
     }
     .retain-checkbox {
       margin-left: 8px;
+      .el-checkbox__input {
+        line-height: 1px;
+      }
+      .el-checkbox__label {
+        padding-left: 8px;
+      }
     }
     .meta-block {
       margin-left: 6px;
diff --git a/web/src/components/SubscriptionsList.vue b/web/src/components/SubscriptionsList.vue
index 48c66213c..a53066fd5 100644
--- a/web/src/components/SubscriptionsList.vue
+++ b/web/src/components/SubscriptionsList.vue
@@ -13,9 +13,9 @@
           <el-button class="btn new-subs-btn" icon="el-icon-plus" plain type="outline" size="mini" @click="openDialog">
             {{ $t('connections.newSubscription') }}
           </el-button>
-          <a class="hide-btn" href="javascript:;" @click="hideSubsList">
+          <!-- <a class="hide-btn" href="javascript:;" @click="hideSubsList">
             <i class="iconfont icon-collapse"></i>
-          </a>
+          </a> -->
         </div>
         <div
           v-for="(sub, index) in subsList"
@@ -674,11 +674,7 @@ export default class SubscriptionsList extends Vue {
     text-align: center;
     position: relative;
     padding: 16px 16px 0 16px;
-    text-align: initial;
-    .new-subs-btn {
-      border-width: 1px;
-      border-style: dashed;
-    }
+    text-align: center;
     .hide-btn {
       font-size: 20px;
       position: absolute;
diff --git a/web/src/lang/connections.ts b/web/src/lang/connections.ts
index 043ddf43d..c42f46e38 100644
--- a/web/src/lang/connections.ts
+++ b/web/src/lang/connections.ts
@@ -355,9 +355,14 @@ export default {
     ja: 'メッセージを受信する',
   },
   receivedPayloadDecodedBy: {
-    zh: '接收到的 Payload 通过编码格式输出',
-    en: 'Received Payload is output by encoding format',
-    ja: '受信したペイロードは、エンコード形式で出力されます',
+    zh: '使用以下格式编码接收到的 Payload',
+    en: 'Format Received Payload by',
+    ja: '以下の方式で受信 Payload をフォーマット: ',
+  },
+  publishPayloadEncodedBy: {
+    zh: '使用以下格式编码要发布的 Payload',
+    en: 'Format Payload to Publish by',
+    ja: '以下の方式で公開用 Payload をフォーマット: ',
   },
   alias: {
     zh: '别名',
diff --git a/web/src/utils/element.ts b/web/src/utils/element.ts
index 86b008d32..1e2775527 100644
--- a/web/src/utils/element.ts
+++ b/web/src/utils/element.ts
@@ -24,7 +24,7 @@ import {
   Switch,
   Select,
   Option,
-  // OptionGroup,
+  OptionGroup,
   Button,
   // ButtonGroup,
   // Table,
@@ -95,7 +95,7 @@ export default (Vue: any) => {
   Vue.use(Switch)
   Vue.use(Select)
   Vue.use(Option)
-  // Vue.use(OptionGroup)
+  Vue.use(OptionGroup)
   Vue.use(Button)
   // Vue.use(ButtonGroup)
   // Vue.use(Table)
diff --git a/web/src/views/connections/ConnectionsDetail.vue b/web/src/views/connections/ConnectionsDetail.vue
index 620dca886..c5c108c35 100644
--- a/web/src/views/connections/ConnectionsDetail.vue
+++ b/web/src/views/connections/ConnectionsDetail.vue
@@ -131,18 +131,11 @@
             </a>
           </span>
           <div class="message-type">
-            <el-tooltip
-              placement="top"
-              :effect="theme !== 'light' ? 'light' : 'dark'"
-              :open-delay="500"
-              :content="$t('connections.receivedPayloadDecodedBy')"
-            >
-              <a href="javascript:;" class="icon-tip">
-                <i class="el-icon-question"></i>
-              </a>
-            </el-tooltip>
-            <el-select class="received-type-select" size="small" v-model="receivedMsgType">
-              <el-option v-for="type in ['Plaintext', 'Base64', 'JSON', 'Hex']" :key="type" :value="type"> </el-option>
+            <el-select class="received-type-select" size="mini" v-model="receivedMsgType">
+              <el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
+                <el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type">
+                </el-option>
+              </el-option-group>
             </el-select>
             <MsgTypeTabs v-model="msgType" @change="handleMsgTypeChanged" />
           </div>
@@ -300,7 +293,7 @@ export default class ConnectionsDetail extends Vue {
   private searchTopic = ''
   private titleName: string = this.record.name
   private retryTimes = 0
-  private inputHeight = 155
+  private inputHeight = 180
   private msgBottom = 160
   private messageListHeight: number = 284
   private messageListMarginTop: number = 19
@@ -1141,10 +1134,6 @@ export default class ConnectionsDetail extends Vue {
         right: 0;
         z-index: 1;
         transition: all 0.4s;
-        .el-input .el-input__inner {
-          border: none;
-          color: var(--color-main-green);
-        }
         .subs-title {
           line-height: 32px;
           color: var(--color-text-title);
@@ -1164,8 +1153,11 @@ export default class ConnectionsDetail extends Vue {
         .message-type {
           @include flex-space-between;
           .received-type-select {
-            width: 95px;
-            margin-left: 300px;
+            width: 88px;
+            margin-left: 276px;
+            .el-input__inner {
+              padding: 4px 10px;
+            }
           }
           .icon-tip {
             position: absolute;
@@ -1227,4 +1219,11 @@ export default class ConnectionsDetail extends Vue {
     background: var(--color-light-red);
   }
 }
+.el-select-group__title {
+  padding-right: 20px;
+  color: var(--color-text-light) !important;
+  font-size: 13px;
+  height: 34px;
+  border-bottom: 1px solid var(--color-border-default);
+}
 </style>