fix(desktop): fix some tree ui issues

emqx · Oct 15, 2024 · 169ce1e · 169ce1e
1 parent 99229ec
commit 169ce1e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/widgets/TreeNodeInfo.vue b/src/components/widgets/TreeNodeInfo.vue
@@ -50,9 +50,9 @@
         <span>Payload <el-tag v-if="node.retain" type="info" size="mini">Retained</el-tag></span>
         <span>QoS: {{ node.qos }}</span>
       </div>
-      <div class="payload-container mt-2 mb-2">
-        <pre><code :class="`language-${payloadFormat}`" v-html="latestMessage"></code></pre>
-      </div>
+      <pre
+        class="payload-container mt-2 mb-2"
+      ><code :class="`language-${payloadFormat}`" v-html="latestMessage"></code></pre>
     </div>
   </div>
 </template>
@@ -137,6 +137,8 @@ export default class TreeNodeInfo extends Vue {
 </script>
 
 <style lang="scss">
+@import '@/assets/scss/mixins.scss';
+
 body.light {
   @import '@/assets/scss/theme/custom/prism-one-light.scss';
 }
@@ -158,7 +160,6 @@ body.night {
     border: 1px solid var(--color-border-default);
     border-radius: 8px;
     width: 100%;
-
     pre {
       margin: 0;
       white-space: pre-wrap;

diff --git a/src/components/widgets/TreeView.vue b/src/components/widgets/TreeView.vue
@@ -19,7 +19,9 @@
         <span class="custom-tree-node">
           <span class="tree-node-info">
             <span>{{ node.label }}</span>
-            <span v-if="data.connectionInfo && data.connectionInfo.name"> - [{{ data.connectionInfo.name }}]</span>
+            <span v-if="data.connectionInfo && data.connectionInfo.name">
+              &nbsp;- [{{ data.connectionInfo.name }}]
+            </span>
             <el-tag v-if="data.latestMessage" size="mini" class="value-tag ml-2">
               {{ data.latestMessage }}
             </el-tag>
@@ -110,20 +112,23 @@ export default class TreeView extends Vue {
     justify-content: space-between;
     width: 100%;
     margin-right: 6px;
+    min-width: 0;
     .tree-node-meta {
       color: var(--color-text-light);
     }
     .tree-node-info {
       width: 100%;
       display: flex;
       align-items: center;
+      min-width: 0;
       .value-tag {
-        max-width: 350px;
+        max-width: 75%;
         width: auto;
-        flex: 0 1 auto;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        flex: 0 1 auto;
+        min-width: 0;
       }
     }
   }