feat(frontend):文本过长，显示优化以及tooltip

frontend/src/views/chart/group/Group.vue

@@ -51,7 +51,7 @@
                   <!--                  />-->
                   <svg-icon icon-class="scene" class="ds-icon-scene" />
                 </span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)">
                 <span v-if="data.type ==='group'" @click.stop>
@@ -114,8 +114,8 @@
 
     <!--scene-->
     <el-col v-if="sceneMode">
-      <el-row class="title-css">
-        <span class="title-text">
+      <el-row class="title-css scene-title">
+        <span class="title-text scene-title-name" :title="currGroup.name">
           {{ currGroup.name }}
         </span>
         <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
@@ -153,7 +153,7 @@
         <span slot-scope="{ node, data }" class="custom-tree-node-list">
           <span style="display: flex;flex: 1;width: 0;">
             <span><svg-icon :icon-class="data.type" /></span>
-            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
           </span>
           <span v-if="hasDataPermission('manage',data.privileges)">
             <span style="margin-left: 12px;" @click.stop>
@@ -680,4 +680,16 @@ export default {
   .form-item>>>.el-form-item__label{
     font-size: 12px;
   }
+
+  .scene-title{
+    width: 100%;
+    display: flex;
+  }
+  .scene-title-name{
+    width: 100%;
+    overflow: hidden;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 </style>

frontend/src/views/chart/view/ChartEdit.vue

@@ -38,7 +38,7 @@
             @start="start1"
           >
             <transition-group>
-              <span v-for="item in dimension" :key="item.id" class="item">
+              <span v-for="item in dimension" :key="item.id" class="item" :title="item.name">
                 <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
                 <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
                 <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
@@ -59,7 +59,7 @@
             @start="start1"
           >
             <transition-group>
-              <span v-for="item in quota" :key="item.id" class="item">
+              <span v-for="item in quota" :key="item.id" class="item" :title="item.name">
                 <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
                 <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
                 <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
@@ -941,7 +941,10 @@ export default {
     background-color: white;
     display: block;
     word-break: break-all;
-    white-space: normal;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .item-on-move {
@@ -952,6 +955,10 @@ export default {
     color: #606266;
     /*background-color: rgba(35,46,64,.05);*/
     background-color: white;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .item + .item {

frontend/src/views/dataset/common/DatasetCustomField.vue

 <template>
   <el-col>
     <el-row style="height: 25px;">
-      <span>{{ table.name }}</span>
+      <span class="table-name">{{ table.name }}</span>
     </el-row>
     <el-divider />
     <el-checkbox v-model="checkAll" :disabled="!(fields.length > 0)" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('dataset.check_all') }}</el-checkbox>
@@ -105,4 +105,12 @@ export default {
   .el-divider--horizontal {
     margin: 12px 0
   }
+
+  .table-name{
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+  }
 </style>

frontend/src/views/dataset/common/DatasetGroupSelector.vue

@@ -42,7 +42,7 @@
                   <!--                  />-->
                   <svg-icon icon-class="scene" class="ds-icon-scene" />
                 </span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
             </span>
           </el-tree>
@@ -52,8 +52,8 @@
 
     <!--scene-->
     <el-col v-if="sceneMode" v-loading="dsLoading">
-      <el-row class="title-css">
-        <span class="title-text">
+      <el-row class="title-css scene-title">
+        <span class="title-text scene-title-name" :title="currGroup.name">
           {{ currGroup.name }}
         </span>
         <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
@@ -94,7 +94,7 @@
               <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
               <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
             </span>
-            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
           </span>
         </span>
       </el-tree>
@@ -383,4 +383,16 @@ export default {
   .title-text {
     line-height: 26px;
   }
+
+  .scene-title{
+    width: 100%;
+    display: flex;
+  }
+  .scene-title-name{
+    width: 100%;
+    overflow: hidden;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 </style>

frontend/src/views/dataset/group/Group.vue

@@ -51,7 +51,7 @@
                   <!--                  />-->
                   <svg-icon icon-class="scene" class="ds-icon-scene" />
                 </span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)">
                 <span v-if="data.type ==='group'" @click.stop>
@@ -73,7 +73,7 @@
                     </el-dropdown-menu>
                   </el-dropdown>
                 </span>
-                <span style="margin-left: 12px;" @click.stop >
+                <span style="margin-left: 12px;" @click.stop>
                   <el-dropdown trigger="click" size="small" @command="clickMore">
                     <span class="el-dropdown-link">
                       <el-button
@@ -82,7 +82,7 @@
                         size="small"
                       />
                     </span>
-                    <el-dropdown-menu  slot="dropdown">
+                    <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
                         {{ $t('dataset.rename') }}
                       </el-dropdown-item>
@@ -117,8 +117,8 @@
 
     <!--scene-->
     <el-col v-if="sceneMode">
-      <el-row class="title-css">
-        <span class="title-text">
+      <el-row class="title-css scene-title">
+        <span class="title-text scene-title-name" :title="currGroup.name">
           {{ currGroup.name }}
         </span>
         <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
@@ -191,10 +191,10 @@
               <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
               <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
             </span>
-            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
           </span>
           <span v-if="hasDataPermission('manage',data.privileges)">
-            <span style="margin-left: 12px;" @click.stop >
+            <span style="margin-left: 12px;" @click.stop>
               <el-dropdown trigger="click" size="small" @command="clickMore">
                 <span class="el-dropdown-link">
                   <el-button
@@ -203,7 +203,7 @@
                     size="small"
                   />
                 </span>
-                <el-dropdown-menu  slot="dropdown">
+                <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
                     {{ $t('dataset.rename') }}
                   </el-dropdown-item>
@@ -621,4 +621,16 @@ export default {
   .title-text {
     line-height: 26px;
   }
+
+  .scene-title{
+    width: 100%;
+    display: flex;
+  }
+  .scene-title-name{
+    width: 100%;
+    overflow: hidden;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 </style>