fix: change label to span and add overflow styles

gene9831 · Jan 20, 2025 · 4869e9a · 4869e9a
1 parent 5843af5
commit 4869e9a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/plugins/tree/src/DraggableTree.vue b/packages/plugins/tree/src/DraggableTree.vue
@@ -335,6 +335,7 @@ const handleDragLeaveContainer = (event) => {
   .content {
     flex: 1;
     height: 100%;
+    overflow: hidden;
   }
 
   .rotate {
@@ -349,6 +350,7 @@ const handleDragLeaveContainer = (event) => {
     flex: 1;
     height: 100%;
     padding: 0 4px;
+    overflow: hidden;
   }
 
   .border-top {

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
@@ -23,7 +23,9 @@
         <template #content="row">
           <div class="row-content">
             <svg-icon v-if="getIconName(row)" :name="getIconName(row)"></svg-icon>
-            <label :class="{ 'node-isblock': row.rawData.componentType === 'Block' }">{{ row.label }}</label>
+            <span :class="['row-label', { 'node-isblock': row.rawData.componentType === 'Block' }]">{{
+              row.label
+            }}</span>
             <template v-if="row.id !== 'body'">
               <svg-icon v-if="eyeOpen(row.id)" name="eye" @mouseup="showNode(row.rawData)"></svg-icon>
               <svg-icon v-if="!eyeOpen(row.id)" name="eye-invisible" @mouseup="showNode(row.rawData)"></svg-icon>
@@ -231,10 +233,12 @@ export default {
 .outline-tree {
   flex: 1;
   overflow-y: scroll;
-  label {
+  .row-label {
     flex: 1;
     font-size: 12px;
     line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   svg {
     color: var(--te-common-icon-secondary);
@@ -254,6 +258,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 4px;
+    overflow: hidden;
   }
   .node-isblock {
     color: var(--te-common-color-prompt-secondary);