'admin-21.01.18:处理动画、默认主题优化等'

vue-admin-wonderful-next/src/theme/common/transition.scss

@@ -37,12 +37,13 @@
 ------------------------------- */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
+  will-change: transform;
   transition: all 0.3s ease;
   position: absolute;
+  opacity: 0;
 }
 .breadcrumb-enter-from,
 .breadcrumb-leave-to {
-  opacity: 0;
   transform: translateX(20px);
 }
 

vue-admin-wonderful-next/src/theme/common/var.scss

@@ -62,7 +62,7 @@ $--bg-topBar: #ffffff;
 $--bg-menuBar: #545c64;
 $--bg-columnsMenuBar: #4276ab;
 $--bg-topBarColor: #606266;
-$--bg-menuBarColor: #c4c4c4;
+$--bg-menuBarColor: #eaeaea;
 $--bg-columnsMenuBarColor: #e6e6e6;
 
 /* 赋值给:root

vue-admin-wonderful-next/src/theme/element.scss

@@ -722,7 +722,7 @@
 }
 .el-menu--horizontal > .el-menu-item,
 .el-menu--horizontal > .el-submenu .el-submenu__title {
-  color: var(--bg-menuBarColor);
+  color: var(--bg-topBarColor);
 }
 // 外部链接时
 .el-menu-item a,
@@ -763,11 +763,28 @@
   color: #ffffff !important;
   text-decoration: none;
 }
+// 菜单收起时鼠标经过背景颜色/字体颜色
+.el-popper.is-light {
+  .el-menu--vertical {
+    background: var(--bg-menuBar);
+  }
+  .el-menu--horizontal {
+    background: var(--bg-topBar);
+    .el-menu-item,
+    .el-submenu__title {
+      color: var(--bg-topBarColor);
+    }
+  }
+}
 // 第三方图标字体间距/大小设置
 .el-menu-item .iconfont,
 .el-submenu .iconfont {
-  font-size: 14px !important;
+  font-size: 18px !important;
-  padding-right: 8px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 5px;
+  width: 24px;
+  text-align: center;
 }
 
 /* Tabs 标签页

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -10,7 +10,7 @@ export default {
     menuBar: "#545c64",
     columnsMenuBar: '#4276ab',
     topBarColor: "#606266",
-    menuBarColor: "#c4c4c4",
+    menuBarColor: "#eaeaea",
     columnsMenuBarColor: '#e6e6e6',
     isTopBarColorGradual: false,
     isMenuBarColorGradual: false,

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -539,7 +539,7 @@ export default defineComponent({
         getThemeConfig.value.isTagsview = true;
         getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#545c64";
-        getThemeConfig.value.menuBarColor = "#c4c4c4";
+        getThemeConfig.value.menuBarColor = "#eaeaea";
         getThemeConfig.value.topBar = "#FFFFFF";
         getThemeConfig.value.topBarColor = "#606266";
         initLayoutChangeFun();

vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue

@@ -3,13 +3,15 @@
     <el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
       <template #title>
         <i :class="val.meta.icon"></i>
-        {{ val.meta.title }}
+        <span>{{ val.meta.title }}</span>
       </template>
       <sub-item :chil="val.children" />
     </el-submenu>
     <el-menu-item :index="val.path" :key="val.path" v-else>
       <i :class="val.meta.icon ? val.meta.icon : ''"></i>
-      <template v-if="!val.meta.isLink">{{ val.meta.title }}</template>
+      <template v-if="!val.meta.isLink">
+        <span>{{ val.meta.title }}</span>
+      </template>
       <template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
     </el-menu-item>
   </template>

vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue

@@ -11,7 +11,9 @@
       </el-submenu>
       <el-menu-item :index="val.path" :key="val.path" v-else>
         <i :class="val.meta.icon ? val.meta.icon : ''"></i>
-        <template #title v-if="!val.meta.isLink">{{ val.meta.title }}</template>
+        <template #title v-if="!val.meta.isLink">
+          <span>{{ val.meta.title }}</span>
+        </template>
         <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
       </el-menu-item>
     </template>