From 4c2cdc1232eee7ae63214e2858c0ae104f8d6c35 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 18 Dec 2024 14:49:04 +0800
Subject: [PATCH] perf: It fits the PT-BR

---
 src/layout/components/NavLeft/Item.vue  | 18 +++++++++++++++---
 src/layout/components/NavLeft/index.vue |  6 +++---
 src/styles/index.scss                   |  8 ++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/layout/components/NavLeft/Item.vue b/src/layout/components/NavLeft/Item.vue
index b4ff2fb96..56c6d2b7f 100644
--- a/src/layout/components/NavLeft/Item.vue
+++ b/src/layout/components/NavLeft/Item.vue
@@ -1,5 +1,4 @@
 <script>
-
 export default {
   name: 'MenuItem',
   functional: true,
@@ -17,16 +16,29 @@ export default {
     const { icon, title } = context.props
     const vNodes = []
 
+    // 定义文本溢出样式
+    const ellipsisStyle = {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      width: '100%',
+      display: 'inline-block'
+    }
+
     if (icon) {
       if (icon.startsWith('fa-')) {
         vNodes.push(<i class={`fa ${icon}`} />)
       } else {
-        vNodes.push(<svg-icon icon-class={icon}/>)
+        vNodes.push(<svg-icon icon-class={icon} />)
       }
     }
 
     if (title) {
-      vNodes.push(<span slot='title'>{title}</span>)
+      vNodes.push(
+        <el-tooltip content={title} placement='right' effect='dark' open-delay={ 1000 }>
+          <span style={ellipsisStyle}>{title}</span>
+        </el-tooltip>
+      )
     }
     return vNodes
   }
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index 29b603965..4e321f82d 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -12,9 +12,9 @@
             trigger="hover"
           >
             <span slot="reference" style="width: 100%">
-              <span v-show="!isCollapse" class="view-title">
-                {{ isRouteMeta.title || '' }}
-              </span>
+              <el-tooltip v-show="!isCollapse" :content="isRouteMeta.title" :open-delay="1000" placement="bottom" effect="dark" class="view-title">
+                <span class="text-overflow">{{ isRouteMeta.title || '' }}</span>
+              </el-tooltip>
               <span class="icon-zone">
                 <svg-icon class="icon" icon-class="switch" />
               </span>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9741489d7..545ebc5fc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -599,3 +599,11 @@ li.rmenu i.fa {
   max-height: 700px;
   overflow-y: scroll;
 }
+
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 100%;
+}