From 72c434143414f5d2d362742eca8e2bc3b944854d Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Fri, 22 Nov 2024 17:54:40 +0800
Subject: [PATCH] feat(desktop): display mqtt properties on tree node info

---
 src/components/MqttProperties.vue |  8 ++++++-
 src/widgets/TreeNodeInfo.vue      | 37 ++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/MqttProperties.vue b/src/components/MqttProperties.vue
index 70932069d..b2e2579da 100644
--- a/src/components/MqttProperties.vue
+++ b/src/components/MqttProperties.vue
@@ -15,7 +15,12 @@
           />
         </template>
         <template v-else>
-          <span>{{ $t(`connections.${field.key}`) }}: {{ properties[field.key] }}</span>
+          <span class="property-item">
+            <span class="label"
+              >{{ $t(`connections.${field.key}`) }}<span v-if="showColon" class="colon">: </span></span
+            >
+            <span class="value">{{ properties[field.key] }}</span>
+          </span>
         </template>
       </p>
     </template>
@@ -38,6 +43,7 @@ interface PropertyField {
 export default class MqttProperties extends Vue {
   @Prop({ required: true }) public properties!: PushPropertiesModel
   @Prop({ default: '' }) public direction!: string
+  @Prop({ default: true }) public showColon!: boolean
 
   private propertyFields: PropertyField[] = [
     { key: 'subscriptionIdentifier' },
diff --git a/src/widgets/TreeNodeInfo.vue b/src/widgets/TreeNodeInfo.vue
index 86e099704..7e5941798 100644
--- a/src/widgets/TreeNodeInfo.vue
+++ b/src/widgets/TreeNodeInfo.vue
@@ -54,6 +54,11 @@
       <pre
         class="payload-container mt-2 mb-2"
       ><code :class="`language-${payloadFormat}`" v-html="latestMessage"></code></pre>
+      <MqttProperties
+        class="tree-node-info-mqtt-properties"
+        :show-colon="false"
+        :properties="node.message.properties"
+      />
     </div>
   </div>
 </template>
@@ -64,8 +69,13 @@ import { Getter } from 'vuex-class'
 import { findSubTopics, findFullTopicPath, isPayloadEmpty } from '@/utils/topicTree'
 import Prism from 'prismjs'
 import { jsonStringify, jsonParse } from '@/utils/jsonUtils'
+import MqttProperties from '@/components/MqttProperties.vue'
 
-@Component
+@Component({
+  components: {
+    MqttProperties,
+  },
+})
 export default class TreeNodeInfo extends Vue {
   @Prop() private node!: TopicTreeNode
   @Prop() private treeData!: TopicTreeNode[]
@@ -182,5 +192,30 @@ body.night {
       word-wrap: break-word;
     }
   }
+  .mqtt-properties.tree-node-info-mqtt-properties {
+    margin-top: 12px;
+    .properties {
+      .property-item {
+        display: flex;
+        flex-direction: column;
+        margin: 6px 0 12px 0;
+        .value {
+          background-color: var(--color-bg-select_lang);
+          padding: 6px 12px;
+          border-radius: 8px;
+          margin-top: 6px;
+        }
+      }
+      &.user-properties {
+        .editor-header {
+          margin-bottom: 6px;
+        }
+        .el-textarea.is-disabled .el-textarea__inner {
+          color: var(--color-text-default);
+          border: 1px solid var(--color-border-default);
+        }
+      }
+    }
+  }
 }
 </style>