fix: 🧩 fix breadcrumb icon style and message level issues

src/layouts/components/Header/components/Breadcrumb.vue

@@ -3,8 +3,12 @@
     <el-breadcrumb :separator-icon="ArrowRight">
       <transition-group name="breadcrumb">
         <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
-          <div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
-            <el-icon v-show="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
+          <div
+            class="el-breadcrumb__inner is-link"
+            :class="{ 'item-no-icon': !item.meta.icon }"
+            @click="onBreadcrumbClick(item, index)"
+          >
+            <el-icon v-if="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
               <component :is="item.meta.icon"></component>
             </el-icon>
             <span class="breadcrumb-title">{{ item.meta.title }}</span>
@@ -54,6 +58,9 @@ const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
       position: relative;
       display: inline-block;
       float: none;
+      .item-no-icon {
+        transform: translateY(-3px);
+      }
       .el-breadcrumb__inner {
         display: inline-flex;
         &.is-link {
@@ -63,21 +70,20 @@ const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
           }
         }
         .breadcrumb-icon {
-          margin-top: 2px;
+          margin-top: 1px;
           margin-right: 6px;
           font-size: 16px;
         }
         .breadcrumb-title {
-          margin-top: 3px;
+          margin-top: 2px;
         }
       }
       &:last-child .el-breadcrumb__inner,
       &:last-child .el-breadcrumb__inner:hover {
         color: var(--el-header-text-color-regular);
       }
       :deep(.el-breadcrumb__separator) {
-        position: relative;
-        top: -1px;
+        transform: translateY(-1px);
       }
     }
   }
@@ -87,7 +93,10 @@ const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
     .el-breadcrumb__item {
       top: -2px;
       :deep(.el-breadcrumb__separator) {
-        top: 2px;
+        top: 4px;
+      }
+      .item-no-icon {
+        transform: translateY(0);
       }
     }
   }

src/layouts/components/Menu/SubMenu.vue

@@ -2,15 +2,15 @@
   <template v-for="subItem in menuList" :key="subItem.path">
     <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
       <template #title>
-        <el-icon>
+        <el-icon v-if="subItem.meta.icon">
           <component :is="subItem.meta.icon"></component>
         </el-icon>
         <span class="sle">{{ subItem.meta.title }}</span>
       </template>
       <SubMenu :menu-list="subItem.children" />
     </el-sub-menu>
     <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
-      <el-icon>
+      <el-icon v-if="subItem.meta.icon">
         <component :is="subItem.meta.icon"></component>
       </el-icon>
       <template #title>

src/layouts/components/Tabs/index.vue

@@ -4,7 +4,7 @@
       <el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
         <el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path" :closable="item.close">
           <template #label>
-            <el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
+            <el-icon v-if="item.icon && tabsIcon" class="tabs-icon">
               <component :is="item.icon"></component>
             </el-icon>
             {{ item.title }}

src/styles/element.scss

@@ -1,7 +1,7 @@
 /* 设置 notification、message 层级在 loading 之上 */
 .el-message,
 .el-notification {
-  z-index: 2058 !important;
+  z-index: 2070 !important;
 }
 
 /* el-alert */