perf: layout style optimization

vben

2020-10-31 77028321816f00799cc3f70d3f0d6bde27c34522

 src/components/Menu/src/index.less

@@ -1,19 +1,54 @@
@import (reference) '../../../design/index.less';

.active-style() {
  color: @white;
  background: linear-gradient(
    118deg,
    rgba(@primary-color, 0.8),
    rgba(@primary-color, 1)
  ) !important;
  border-radius: 2px;
  box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7);
}

.active-menu-style() {
  .ant-menu-item-selected,
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    background: linear-gradient(
      118deg,
      rgba(@primary-color, 0.7),
      rgba(@primary-color, 1)
    ) !important;
    border-radius: 2px;
    box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7);
    .active-style();
  }
}

.basic-menu {
  width: 100%;

  &.collapsed-show-title.ant-menu-inline-collapsed {
    .basic-menu-item__level1 {
      padding: 2px 0;
    }

    & > li > .ant-menu-submenu-title {
      display: flex;
      margin-top: 12px;
      font-size: 12px;
      flex-direction: column;
      line-height: 24px;
      align-items: center;
    }

    & > li[role='menuitem']:not(.ant-menu-submenu) {
      display: flex;
      margin-top: 12px;
      font-size: 12px;
      line-height: 2;
      align-items: center;
      flex-direction: column;

      span {
        margin-top: 6px;
      }
    }
  }

  &__wrap {
    /* 滚动槽 */
    &::-webkit-scrollbar {
@@ -59,6 +94,8 @@
  }

  &-bg__sidebar-hor {
    overflow: hidden;

    &.ant-menu-horizontal {
      display: flex;
      border: 0;
@@ -71,29 +108,22 @@
      &.ant-menu-light {
        .ant-menu-item {
          &.basic-menu-item__level1 {
            height: 46px;
            line-height: 46px;
            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;
          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,
        .ant-menu-submenu-active,
        .ant-menu-submenu-title:hover {
          color: @primary-color;
          color: @primary-color !important;
          border-bottom: 3px solid @primary-color;
        }

@@ -172,11 +202,11 @@
    }

    .basic-menu-item__level1 {
      margin-bottom: 0;

      > .ant-menu-sub > li {
        background-color: @sub-menu-item-dark-bg-color;
      }

      margin-bottom: 0;

      &.top-active-menu {
        color: @white;
@@ -206,10 +236,10 @@
    }

    .ant-menu-submenu-title {
      // margin: 0;
      // line-height: @app-menu-item-height;
      display: flex;
      height: @app-menu-item-height;
      margin: 0;
      align-items: center;
    }

@@ -218,14 +248,22 @@
        background: unset !important;
        box-shadow: none;
      }

      .ant-menu-submenu-selected,
      .ant-menu-item-selected {
        .active-style();
      }
    }
  }

  &.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;
      }
    }

@@ -267,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;
    }
  }
}