左侧菜单优化

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>

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

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']>