From 373661d35a81dc9b2c77d997a9806491b50296a4 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 17 Apr 2024 20:01:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20labels=20=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Apps/DrawerPanel/index.vue                  | 2 +-
 src/components/Table/AutoDataTable/index.vue               | 4 +++-
 src/components/Table/ListTable/TableAction/LabelSearch.vue | 1 -
 src/components/Table/ListTable/TableAction/index.vue       | 1 -
 src/components/Table/TableFormatters/LabelsFormatter.vue   | 5 +++++
 src/layout/components/NavLeft/index.vue                    | 3 +++
 src/styles/sidebar.scss                                    | 2 +-
 7 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Apps/DrawerPanel/index.vue b/src/components/Apps/DrawerPanel/index.vue
index ba5c93ec1..e9227cfc2 100644
--- a/src/components/Apps/DrawerPanel/index.vue
+++ b/src/components/Apps/DrawerPanel/index.vue
@@ -2,7 +2,7 @@
   <div ref="drawer" :class="{show: show}" class="drawer">
     <div v-if="modal" :style="{'background-color': modal ? 'rgba(0, 0, 0, .3)' : 'transparent'}" class="modal" />
     <div ref="panel" :style="{width: width, height: height }" class="drawer-panel">
-      <div ref="dragBox" class="handle-button">
+      <div v-show="!show" ref="dragBox" class="handle-button">
         <i v-if="icon.startsWith('fa') || icon.startsWith('el')" :class="show ? 'el-icon-close': icon" />
         <img v-else :src="icon" alt="">
       </div>
diff --git a/src/components/Table/AutoDataTable/index.vue b/src/components/Table/AutoDataTable/index.vue
index 1795c04c3..89f5cf487 100644
--- a/src/components/Table/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -112,8 +112,9 @@ export default {
             prop: 'actions',
             label: i18n.t('Actions'),
             align: 'center',
-            width: '150px',
+            width: '100px',
             formatter: ActionsFormatter,
+            fixed: 'right',
             formatterArgs: {}
           }
           break
@@ -144,6 +145,7 @@ export default {
           break
         case 'labels':
           col.formatter = LabelsFormatter
+          col.width = '200px'
           break
         case 'comment':
           col.showOverflowTooltip = true
diff --git a/src/components/Table/ListTable/TableAction/LabelSearch.vue b/src/components/Table/ListTable/TableAction/LabelSearch.vue
index e42d5bac5..e759354be 100644
--- a/src/components/Table/ListTable/TableAction/LabelSearch.vue
+++ b/src/components/Table/ListTable/TableAction/LabelSearch.vue
@@ -7,7 +7,6 @@
       @click="showSearchSelect"
     >
       <svg-icon icon-class="tag" />
-      <span style="padding-left: 2px">{{ $t('Label') }}</span>
     </el-button>
     <el-cascader
       v-else
diff --git a/src/components/Table/ListTable/TableAction/index.vue b/src/components/Table/ListTable/TableAction/index.vue
index b52219642..34a092d2d 100644
--- a/src/components/Table/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -137,7 +137,6 @@ export default {
       this.searchTable({ labels: val })
     },
     handleLabelSearchShowChange(val) {
-      console.log('handleLabelSearchShowChange', val)
       this.foldSearch = val
     }
   }
diff --git a/src/components/Table/TableFormatters/LabelsFormatter.vue b/src/components/Table/TableFormatters/LabelsFormatter.vue
index 99dc1c11d..bc67b9741 100644
--- a/src/components/Table/TableFormatters/LabelsFormatter.vue
+++ b/src/components/Table/TableFormatters/LabelsFormatter.vue
@@ -12,6 +12,7 @@
           :key="label"
         >
           <el-tag
+            :title="getKey(label) + getValue(label)"
             :type="getLabelType(label)"
             class="tag-formatter"
             disable-transitions
@@ -255,6 +256,10 @@ export default {
 
 .tag-formatter {
   margin: 2px 0;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   //display: table;
 }
 
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index 79af5e2df..1623e2225 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -179,6 +179,9 @@ export default {
   .collapsed {
     text-align: left;
     .nav-title {
+      &:hover {
+        background-color: var(--menu-hover);
+      }
      .switch-view .icon {
         margin-left: 0;
       }
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index d564b1eb8..4d511e466 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -43,7 +43,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - #{$headerHeight} - 38px - 52px); // header-height, view-header, footer-height
+        height: calc(100% - #{$headerHeight} - 40px - 52px); // header-height, view-header, footer-height
       }
     }