From a893bcdb52ff64f20dd272fcb69ca897a4965292 Mon Sep 17 00:00:00 2001
From: wisonic <shaochuan.wu@fit2cloud.com>
Date: Mon, 20 Jan 2025 18:36:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E6=8B=96=E6=8B=BD=E5=AD=97=E6=AE=B5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/drag-item/DimensionItem.vue        | 38 ++++++++++++++-----
 .../components/editor/drag-item/DrillItem.vue | 21 +++++++---
 .../components/editor/drag-item/QuotaItem.vue | 35 +++++++++++++----
 3 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
index d4ee907a53..0399dc490b 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@@ -279,14 +279,18 @@ onMounted(() => {
               </tbody>
             </table>
           </template>
-          <span class="item-span-style">
+          <span
+            class="item-span-style"
+            :class="{
+              'hidden-status': showHideIcon,
+              'sort-status': showSort() && item.sort !== 'none'
+            }"
+          >
             <span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
           </span>
         </el-tooltip>
-        <el-icon style="margin-left: 8px">
-          <Icon
-            ><icon_invisible_outlined v-show="showHideIcon" class="svg-icon inner-class"
-          /></Icon>
+        <el-icon v-if="showHideIcon" style="margin-left: 4px">
+          <Icon><icon_invisible_outlined class="svg-icon inner-class" /></Icon>
         </el-icon>
         <el-tooltip :effect="toolTip" placement="top">
           <template #content>
@@ -691,6 +695,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   display: block;
+  overflow: hidden;
   .ed-dropdown {
     display: flex;
   }
@@ -703,7 +708,7 @@ onMounted(() => {
 
 .item-axis {
   padding: 1px 8px;
-  margin: 0 3px 2px 3px;
+  margin-bottom: 3px;
   height: 28px;
   line-height: 28px;
   display: flex;
@@ -767,10 +772,18 @@ span {
 
 .item-span-style {
   display: flex;
-  max-width: 180px;
+  max-width: 170px;
   color: #1f2329;
   margin-left: 4px;
 
+  &.hidden-status,
+  &.sort-status {
+    max-width: 150px;
+  }
+  &.hidden-status[class*='sort-status'] {
+    max-width: 135px !important;
+  }
+
   .item-name {
     flex: 1;
     white-space: nowrap;
@@ -821,7 +834,7 @@ span {
 .remove-icon {
   position: absolute;
   top: 7px;
-  right: 26px;
+  right: 24px;
   cursor: pointer;
   .inner-class {
     font-size: 14px;
@@ -851,7 +864,14 @@ span {
 }
 
 .father:hover .item-span-style {
-  max-width: 150px;
+  max-width: 130px;
+  &.hidden-status,
+  &.sort-status {
+    max-width: 120px;
+  }
+  &.hidden-status[class*='sort-status'] {
+    max-width: 100px !important;
+  }
 }
 </style>
 <style lang="less">
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
index 4bf45469f9..ba68822f01 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
@@ -182,7 +182,10 @@ onMounted(() => {
               </tbody>
             </table>
           </template>
-          <span class="item-span-style">
+          <span
+            class="item-span-style"
+            :class="{ 'sort-status': index !== 0 && item.sort !== 'none' }"
+          >
             <span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
           </span>
         </el-tooltip>
@@ -329,6 +332,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   display: block;
+  overflow: hidden;
   .ed-dropdown {
     display: flex;
   }
@@ -341,7 +345,7 @@ onMounted(() => {
 
 .item-axis {
   padding: 1px 8px;
-  margin: 0 3px 2px 3px;
+  margin-bottom: 3px;
   height: 28px;
   line-height: 28px;
   display: flex;
@@ -405,10 +409,14 @@ span {
 
 .item-span-style {
   display: flex;
-  max-width: 180px;
+  max-width: 170px;
   color: #1f2329;
   margin-left: 4px;
 
+  &.sort-status {
+    max-width: 150px;
+  }
+
   .item-name {
     flex: 1;
     white-space: nowrap;
@@ -459,7 +467,7 @@ span {
 .remove-icon {
   position: absolute;
   top: 7px;
-  right: 26px;
+  right: 24px;
   cursor: pointer;
   .inner-class {
     font-size: 14px;
@@ -489,7 +497,10 @@ span {
 }
 
 .father:hover .item-span-style {
-  max-width: 150px;
+  max-width: 140px;
+  &.sort-status {
+    max-width: 120px;
+  }
 }
 </style>
 <style lang="less">
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
index afe3c68c70..b3fb4bc843 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
@@ -369,7 +369,13 @@ onMounted(() => {
               </tbody>
             </table>
           </template>
-          <span class="item-span-style">
+          <span
+            class="item-span-style"
+            :class="{
+              'hidden-status': showHideIcon,
+              'sort-status': showSort && item.sort !== 'none'
+            }"
+          >
             <span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
             <span v-if="item.summary !== ''" class="item-right-summary">
               ({{ t('chart.' + item.summary) }})
@@ -392,10 +398,9 @@ onMounted(() => {
             -{{ t('chart.' + item.compareCalc.type) }}
           </span>
         </span>
-        <el-icon style="margin-left: 8px">
+        <el-icon v-if="showHideIcon" style="margin-left: 4px">
           <Icon>
             <icon_invisible_outlined
-              v-show="showHideIcon"
               :class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
               class="svg-icon inner-class"
             />
@@ -827,7 +832,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   display: block;
-
+  overflow: hidden;
   .ed-dropdown {
     display: flex;
   }
@@ -841,7 +846,7 @@ onMounted(() => {
 
 .item-axis {
   padding: 1px 8px;
-  margin: 0 3px 2px 3px;
+  margin-bottom: 3px;
   height: 28px;
   line-height: 28px;
   display: flex;
@@ -905,7 +910,7 @@ span {
 
 .item-span-style {
   display: flex;
-  max-width: 180px;
+  max-width: 170px;
   color: #1f2329;
   margin-left: 4px;
 
@@ -920,6 +925,13 @@ span {
     flex-shrink: 0;
     margin-left: 4px;
   }
+  &.hidden-status,
+  &.sort-status {
+    max-width: 150px;
+  }
+  &.hidden-status[class*='sort-status'] {
+    max-width: 135px !important;
+  }
 }
 
 .editor-dark {
@@ -965,7 +977,7 @@ span {
 .remove-icon {
   position: absolute;
   top: 7px;
-  right: 26px;
+  right: 24px;
   cursor: pointer;
 
   .inner-class {
@@ -996,7 +1008,14 @@ span {
 }
 
 .father:hover .item-span-style {
-  max-width: 150px;
+  max-width: 130px;
+  &.hidden-status,
+  &.sort-status {
+    max-width: 120px;
+  }
+  &.hidden-status[class*='sort-status'] {
+    max-width: 100px !important;
+  }
 }
 </style>
 <style lang="less">