From 3545b5a26934980b36acd0acb37f30b431346c75 Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Fri, 22 Sep 2023 17:23:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/SidebarItem.vue |  4 ++--
 src/styles/sidebar.scss                       | 15 +++++++++++++++
 src/types/auto-imports.d.ts                   |  4 ----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 65f3d0d..d0e87d8 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!item.meta || !item.meta.hidden">
+  <div class="menuItem" v-if="!item.meta || !item.meta.hidden">
     <!-- 只包含一个子路由节点的路由 -->
     <template v-if="hasOneShowingChild(item.children, item) &&
       (!onlyOneChild.children || onlyOneChild.noShowingChildren)
@@ -12,7 +12,7 @@
             :icon-class="onlyOneChild.meta.icon"
           />
           <template #title>
-            {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
+            <span>{{ translateRouteTitleI18n(onlyOneChild.meta.title) }}</span>
           </template>
         </el-menu-item>
       </app-link>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index cb9d683..ff01684 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -49,6 +49,7 @@
 
 
     .svg-icon {
+      display: inline-flex;
       margin-right: 16px;
     }
 
@@ -61,6 +62,20 @@
       border: none;
       height: 100%;
       width: 100% !important;
+
+      .menuItem {
+        .el-menu-item,.el-sub-menu__title {
+          display: grid;
+          grid-template-columns: auto 1fr auto;
+          align-items: center;
+
+          span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
     }
 
     // menu hover
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 5742656..e5c7bdb 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -5,8 +5,6 @@ declare global {
   const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
-  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -276,8 +274,6 @@ declare module 'vue' {
     readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
-    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
-    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>