perf: layout style optimization

src/components/Breadcrumb/Breadcrumb.vue

@@ -37,7 +37,7 @@
   .breadcrumb {
     height: @header-height;
     padding-right: 20px;
-    font-size: 12px;
+    font-size: 14px;
     line-height: @header-height;
     // line-height: 1;
 

src/components/Menu/src/BasicMenu.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
         offset += 54;
       }
       return {
-        height: `calc(100% - ${offset - 30}px)`,
+        height: `calc(100% - ${offset - 38}px)`,
         position: 'relative',
         overflow: 'auto',
       };
@@ -147,6 +147,7 @@ export default defineComponent({
     }
 
     const showTitle = computed(() => {
+      if (props.isTop) return true;
       if (!props.isAppMenu) return true;
       if (!props.collapsedShowTitle) {
         return !menuStore.getCollapsedState;
@@ -247,7 +248,6 @@ export default defineComponent({
     return () => {
       const { getCollapsedState } = menuStore;
       const { mode } = props;
-
       return mode === MenuModeEnum.HORIZONTAL ? (
         renderMenu()
       ) : (

src/components/Menu/src/SearchInput.vue

@@ -94,7 +94,7 @@
       .ant-input {
         color: @text-color-base;
         background: #fff;
-        border: 0;
+        // border: 0;
         outline: none;
 
         &:hover,

src/components/Menu/src/index.less

@@ -4,7 +4,7 @@
   color: @white;
   background: linear-gradient(
     118deg,
-    rgba(@primary-color, 0.7),
+    rgba(@primary-color, 0.8),
     rgba(@primary-color, 1)
   ) !important;
   border-radius: 2px;
@@ -32,6 +32,7 @@
       font-size: 12px;
       flex-direction: column;
       line-height: 24px;
+      align-items: center;
     }
 
     & > li[role='menuitem']:not(.ant-menu-submenu) {
@@ -93,6 +94,8 @@
   }
 
   &-bg__sidebar-hor {
+    overflow: hidden;
+
     &.ant-menu-horizontal {
       display: flex;
       border: 0;
@@ -105,23 +108,16 @@
       &.ant-menu-light {
         .ant-menu-item {
           &.basic-menu-item__level1 {
-            height: 38px;
-            line-height: 38px;
+            height: @header-height;
+            line-height: @header-height;
           }
         }
 
-        .ant-menu-item:hover,
         .ant-menu-submenu:hover,
-        .ant-menu-item-active,
-        .ant-menu-submenu-active,
         .ant-menu-item-open,
         .ant-menu-submenu-open,
         .ant-menu-item-selected,
-        .ant-menu-submenu-selected {
-          color: @primary-color !important;
-          border-bottom: 3px solid @primary-color;
-        }
-
+        .ant-menu-submenu-selected,
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
@@ -261,10 +257,13 @@
   }
 
   &.ant-menu-light {
+    overflow-x: hidden;
+    border-right: none;
+
     .basic-menu-item__level1 {
       &.top-active-menu {
         color: @primary-color;
-        border-bottom: 6px solid @primary-color;
+        border-bottom: 3px solid @primary-color;
       }
     }
 
@@ -306,16 +305,9 @@
   }
 
   &-light {
-    border-right: 1px solid rgba(221, 221, 221, 0.6);
-
     .ant-layout-sider-trigger {
       color: @text-color-base;
-      background: @trigger-light-bg-color;
-
-      &:hover {
-        color: @text-color-base;
-        background: @trigger-light-hover-bg-color;
-      }
+      border-top: 1px solid @border-color-light;
     }
   }
 }

src/components/Menu/src/props.ts

@@ -54,6 +54,10 @@ export const basicProps = {
     type: Boolean as PropType<boolean>,
     default: true,
   },
+  isTop: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
   beforeClickFn: {
     type: Function as PropType<Fn>,
     default: null,