refactor: 视图UI布局初步调整

frontend/src/lang/en.js

@@ -804,7 +804,9 @@ export default {
     color_energy: 'Energy',
     color_red: 'Red',
     color_fast: 'Fast',
-    color_spiritual: 'Spiritual'
+    color_spiritual: 'Spiritual',
+    chart_data: 'Data',
+    chart_style: 'Style'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -804,7 +804,9 @@ export default {
     color_fast: '輕快',
     color_spiritual: '靈動',
     chart_details: '视图明细',
-    export_details: '导出明细'
+    export_details: '导出明细',
+    chart_data: '數據',
+    chart_style: '樣式'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -804,7 +804,9 @@ export default {
     color_fast: '轻快',
     color_spiritual: '灵动',
     chart_details: '视图明细',
-    export_details: '导出明细'
+    export_details: '导出明细',
+    chart_data: '数据',
+    chart_style: '样式'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/components/drag-item/DimensionItem.vue

@@ -7,7 +7,7 @@
         <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
         <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
       </span>
-      <span>{{ item.name }}</span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
@@ -18,7 +18,8 @@
             <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
             <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
           </span>
-          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
@@ -192,10 +193,11 @@ export default {
     text-align: left;
     height: 24px;
     line-height: 22px;
-    display: inline-block;
+    display: flex;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;
+    width: 159px;
   }
 
   .item-axis:hover {
@@ -218,4 +220,12 @@ export default {
     align-items: center;
     width: 100%
   }
+
+  .item-span-style{
+    display: inline-block;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>

frontend/src/views/chart/components/drag-item/QuotaItem.vue

@@ -7,7 +7,7 @@
         <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
         <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
       </span>
-      <span>{{ item.name }}</span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
       <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
@@ -19,9 +19,9 @@
             <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
             <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
           </span>
-          <span>{{ item.name }}</span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
           <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
-          <i class="el-icon-arrow-down el-icon--right" />
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
@@ -196,10 +196,11 @@ export default {
     text-align: left;
     height: 24px;
     line-height: 22px;
-    display: inline-block;
+    display: flex;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;
+    width: 159px;
   }
 
   .item-axis:hover {
@@ -222,4 +223,12 @@ export default {
     align-items: center;
     width: 100%
   }
+
+  .item-span-style{
+    display: inline-block;
+    width: 80px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>