RuoYi
2026-04-02 19cb8327f006f12403ea8591a22debd0ea26d43f
ruoyi-ui/src/assets/styles/sidebar.scss
@@ -74,6 +74,8 @@
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      height: 44px !important;
      line-height: 44px !important;
    }
    // menu hover
@@ -105,6 +107,96 @@
        background-color: $base-sub-menu-hover !important;
      }
    }
    // theme-dark 深色主题
    &.theme-dark {
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
      border-right: none;
      .el-menu-item.is-active {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
          border-right: 3px solid var(--current-color, #409eff);
          pointer-events: none;
          z-index: 1;
        }
      }
      .el-submenu.is-active > .el-submenu__title {
        color: var(--current-color, #409eff) !important;
      }
      .el-menu-item:not(.is-active),
      .submenu-title-noDropdown,
      .el-submenu__title {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: transparent;
          pointer-events: none;
          z-index: 1;
          transition: background-color 0.2s;
        }
        &:hover::before {
          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
        }
      }
    }
    // theme-light 浅色主题
    &.theme-light {
      border-right: 1px solid #e8eaf0;
      box-shadow: none;
      .el-menu-item,
      .el-submenu__title {
        color: rgba(0, 0, 0, 0.65);
      }
      .el-menu-item.is-active {
        color: var(--current-color, #409eff) !important;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: var(--current-color-light, #ecf5ff);
          border-right: 3px solid var(--current-color, #409eff);
          pointer-events: none;
          z-index: 1;
        }
      }
      .el-submenu.is-active > .el-submenu__title {
        color: var(--current-color, #409eff) !important;
      }
      .el-menu-item:not(.is-active):hover,
      .submenu-title-noDropdown:hover,
      .el-submenu__title:hover {
        background-color: #f5f7fa !important;
        color: rgba(0, 0, 0, 0.85) !important;
      }
      .nest-menu .el-submenu > .el-submenu__title,
      .el-submenu .el-menu-item {
        background-color: #fafafa !important;
        &:hover {
          background-color: #f0f5ff !important;
        }
      }
    }
  }
  .hideSidebar {
@@ -116,15 +208,17 @@
      margin-left: 54px;
    }
    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;
      .el-tooltip {
    .el-menu:not(.el-menu--horizontal) {
      .submenu-title-noDropdown {
        padding: 0 !important;
        position: relative;
        .svg-icon {
          margin-left: 20px;
        .el-tooltip {
          padding: 0 !important;
          .svg-icon {
            margin-left: 20px;
          }
        }
      }
    }